本文深入讲解JavaScript基础，包括常量变量、数据类型、运算符，以及DOM操作技巧，如动态元素创建、属性操作和事件处理。通过实例演示，带你掌握DOM遍历和事件基础，适合前端开发者提升技能。
JavaScript简称JS，是一种嵌入到HTML页面中的编程语言，由浏览器一边解析一边执行
JS的引入方式
外部引用
外部引用JS的时候，可以在head中引入，也可以在body里面引用
同样，内部引用也可以在head或body里面引用
语法基础
- 常量与变量
- 数据类型
- 运算符
- 表达式与语句
- 类型转换
- 转义字符
- 注释（这就省略了吧）
JS每一条语句，都以;结尾
常量与变量
var变量
const常量
数据类型
基本数据类型：数字、字符串、布尔值、未定义值、空值
引用类型：数组、对象
未定义值
已经使用var声明了，但是没有进行赋值，此时就是undefined
运算符
常见的运算符有5种：
- 算术运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 条件运算符
流程控制
一般有三种流程控制方式：
- 顺序结构
- 选择结构
- 循环结构
在JS中，常用的内置对象有四种：
String、Array、Date、Math
字符串类型
str.length获取字符串的长度
str.toLowerCase()将大写字符串转换为小写字符串
str.toUpperCase()将小写字符串转换为大写字符串
str.charAt(index)获取第inde（从0开始）个字符
str.substring(start, end)start开始位置（从0开始），end结束位置[start, end)
end省略的话，则到结尾
str.replace(原字符串, 替换的新字符串)
str.split("分割符x")将字符串以分隔符x，分割为数组
str.indexOf(指定字符串)返回指定字符串首次出现的下标
str.lastIndexOf(指定字符串)返回指定字符串最后出现的下标
var str = "abcabc";
alert(str.indexOf("ab"));//0
alert(str.lastIndexOf("ab"));//3
DOM基础
DOM操作，可以理解为“元素操作”
DOM采用“树形结构”
每一个元素就是一个节点，而每一个节点就是一个对象。
我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作
节点类型
DOM节点有12种类型，常见的有三种：
- 元素节点 nodeType1
- 属性节点 nodeType2
- 文本节点 nodeType3
在JS中，使用nodeType属性来判断一个节点的类型
DOM对象可以以o开头，这样，一眼就看出是一个DOM对象
获取元素
创建元素
在JS中，可以使用createElement()来创建一个元素节点
也可以使用createTextNode()来创建一个文本节点
然后，可以将元素节点与文本节点“组装”成：“有文本内容的元素”
这种方式，被称为 动态DOM操作
也就是，元素是由JS创建的，一开始在HTML中不存在的
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function()
{
// 创建一个strong标签（元素节点）
var e1 = document.createElement("strong");
// 创建一个文本节点
var text = document.createTextNode("文本内容");
// 将文本节点插入到元素节点中
e1.appendChild(text);
console.log(e1);
//获取id为box的节点
var oDiv = document.getElementById("box");
console.log(oDiv);
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
// 将e1节点插入到oDiv中
oDiv.appendChild(e1);
}
</script>
</head>
<body>
<div id="box">
123
</div>
</body>
</html>
操作动态DOM，在实际开发用得非常多
再来个小练习：
如果动态创建带有属性的复杂节点？像这样：<input type="button" id="submit" value="提交1" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function()
{
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交2";
var oDiv = document.getElementById("box");
oDiv.appendChild(oInput);
}
</script>
</head>
<body>
<div id="box">
<input type="button" id="submit" value="提交1" />
</div>
</body>
</html>
插入元素
创建好了元素，如果不插入到HTML中，将没有意义
插入元素有两种方法：
A.appendChild(B)将B插入到A父元素的内部子元素的“尾部”
A.insertBefore(B, ref);将B这个新元素，插入到父元素A中，ref子元素的前面
删除元素
A.removeChild(B)将B从父元素A中删除
复制元素
obj.cloneNode(bool)
obj表示被复制的元素
bool：true，表示复制元素本身以及该元素下的所有子元素
bool：false，表示仅仅复制元素本身，不复制该元素下的子元素
替换元素
A.replaceChild(new, old);
A表示父元素，new表示新子元素，old表示旧子元素
DOM进阶
HTML属性操作（对象属性）
HTML属性操作，指的是使用JS来操作元素的HTML属性，例如：
<input type="button" id="submit" value="提交" />
操作id、type、value等
JS中，有两种操作HTML元素属性的方式：
- 对象属性
- 对象方法
obj.attr
obj是元素名，是一个DOM对象
所谓DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点
attr是属性名
想要获得某个属性的值，首先需要找到这个元素节点，然后才可以获取到该属性的值
获取一个元素的class，不能使用obj.class，应该使用obj.className
obj.attr不仅可以获取HTML元素的属性值，还可以获取动态创建的DOM元素中的属性值
HTML属性操作（对象方法）
JS提供了4种方法：
getAttribute()
setAttribute()
removeAttribute()
hasAttribute()
obj.getAttribute("attr");
obj是元素名，attr是属性名。
getAttribute()只有一个参数，并且参数是双引号括起来的
obj.getAttribute("attr");与obj.attr都可以获取HTML或动态DOM的属性值
obj.getAttribute("attr");可以获取自定义属性，而obj.attr不可以
obj.setAttribute("attr", "值")
CSS属性操作
HTML属性操作完后，来学下操作CSS属性
获取CSS属性值
getComputedStyle(obj).attr
get computed style：获取计算后的样式
设置CSS属性值
obj.style.attr = "值";
在JS中，可以使用cssText属性来同时设置多个CSS属性
obj.style.cssText = "值";
例如：
oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";
DOM遍历
DOM遍历，可以理解为“查找元素”的意思
查找哪些元素呢？一般是三种：
- 查找父元素
- 查找子元素
- 查找兄弟元素
查找父元素
obj.parentNode
查找子元素
childNodes、firstChild、lastChild
children、firstElementChild、lastElementChild、children[i]
childNodes：获取所有的子节点，包括元素节点以及文本节点
childNodes：获取所有元素节点（不包括文本节点）（常用）
查找兄弟元素
previousSibling、nextSibling
previousElementSibling、nextElementSibling
如果只希望操作元素节点，建议使用后两个
innerHTML和innerText
innerHTML属性获取和设置一个元素的“内部元素”
innerText属性获取和设置一个元素的“内部文本”
document.body.innerHTML = '<img class="pic" src="images/haizei.png" style="border:1px solid silver"/>';
事件基础
什么是事件？
鼠标点击onclick就是一个事件
在JS中，事件一般有三部分
- 事件主角：是按钮还是div元素或是其他？
- 事件类型：是点击还是移动或是其他？
- 事件过程：这个事件都发生了些什么？
JS常见的事件有五种：
鼠标事件、键盘事件、表单事件、编辑事件、页面事件
事件调用方式：
- 在script标签中调用
- 在元素中调用
// 为元素添加点击事件
oBtn.onclick = function ()
{
alert("...");
};
鼠标事件
键盘事件
键盘按下：onkeydown
键盘松开：onkeyup
表单事件
- onfocus和onblur
- onselect
- onchange
onfocus 表示获取焦点时触发的事件
onblur 表示失去焦点时触发的事件，两者是相反操作。
编辑事件
在JS中，常用的编辑事件有三种：
- oncopy
- onselectstart
- oncontextmenu
oncopy：一般用来做，不准复制
document.body.oncopy = function ()
{
return false;
}
onselectstart：一般用来做，不准选中
语法：
document.body.onselectstart=function()
{
return false;
}
onselectstart：一般用来做，不准鼠标右键
语法：
document.body.oncontextmenu=function()
{
return false;
}
页面事件
常用的页面事件有两个：
- onload
- onbeforeunload
在JS中，onload表示文档加载完成后再执行的一个事件
浏览器从上到下解析到 window.onload 时，就会先不解析window.onload 里面的代码，而是继续往下解析，直到把整个 HTML 文档解析完了之后才会回去执行window.onload 里面的代码。
onbeforeunload 离开页面之前触发的一个事件
事件阶级
在JS中，要给元素添加一个事件，可以使用：
- 事件处理器
- 事件监听器
当想为同一个元素添加多个相同的事件，就需要事件监听器了
事件监听器
所谓事件监听器，指的是使用addEventListener()方法来为一个元素添加事件，又称为“绑定事件”
obj.addEventListener(type, fn, false)
type是字符串，指的是事件类型。例如单击事件用“click”；鼠标移入用“mouseover”，需要注意的是：这个事件类型不需要加上on前缀的
fn是一个函数名，或者是一个匿名函数
false 表示在事件冒泡阶段调用
解绑事件
obj.removeEventListener(type, fn, false);
fn必须是函数名，而不能是匿名函数
此方法只可以解除“事件监听器”添加的事件，不可以解除“事件处理器”添加的事件
“事件处理器”添加的事件的解除，可以使用obj.事件名 = null;
event对象
当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。
每一个事件，都有一个对应的event对象
event对象常用属性：
每次调用事件的时候，JS都会默认给这个事件函数加上一个隐藏的参数，这个参数就是event对象。一般来说，event对象是作为事件函数的第一个参数传入的
在使用的时候，可以使用：e、ev、event、a等多可以接收event对象
this
哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象
在事件函数中，想要使用当前元素节点，尽量使用this
window对象
在JS中，一个浏览器窗口，就是一个window对象
也就是，把窗口看成对象
一个窗口就是一个window对象
这个窗口里面的HTML文档就是一个document对象
document对象是window对象的子对象
window对象及下面location、navigator等子对象，由于都是操作浏览器窗口的，所以我们又称之为 BOM
BOM：browser object module（浏览器 对象 模型）
窗口操作
在JS中，窗口操作常见的有两种：打开窗口、关闭窗口
打开窗口
window.open(url, target)
window可以省略，但一般不省略
open(url, target)
target就是当前界面打开，还是新窗口，与a标签中的target类似
关闭窗口
window.close();无参数
定时器
在JS中，有两组定时器的实现：
- setTimeout()和clearTimeout()
- setInterval()和clearInterval()
interval：间隔
setTimeout()和clearTimeout
setTimeout()方法，一次性调用函数
clearTimeout()方法，取消执行setTimeout()
setTimeout(code, time);
code可以是一段代码，可以是一个函数，或者函数名
time是时间，单位ms，表示过多久时间才执行code代码
叫delay不是更好？
setInterval()和clearInterval()
setInterval()可以重复调用函数
setInterval(code, delay);
为避免累加，在每次“开始”前，清一下定时器
location对象
在JS中，可以使用window对象下的location子对象来操作当前窗口的URL
window.location.href
window.location.search
window.location.hash
navigator对象
window.navigator.userAgent
获取浏览器的相关信息
document对象
document对象是window对象下面的一个子对象，它操作的是HTML文档里所有的内容
浏览器操作BOM browser
文档操作DOM document
BOM包含DOM
document对象属性
常用的属性：
document.URL也可以获取当前文档的URL，不可以设置
只不过，window的url不仅可以获取，还可以设置
document.referrer获取上一个页面的地址
document对象方法
常用的对象方法：
document.write(“内容”);
扫一扫
1505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
