之前我们说过JavaScript有三部分组成ECMAscript,BOM,DOM,之前我们都在了解JavaScript的语法即ECMAScript， 今天我们开始了解DOM(文档对象模型（Document object Model），操作网页上的元素的API）
什么是DOM
DOM
DOM就是由节点组成的。
节点（Node）：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点，但是实际上他们的具体类型是不同的。常见节点分为四类：
-
文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
-
元素节点（标签）：HTML标签。
-
属性节点（属性）：元素的属性。
-
文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。
节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object。
解析过程： HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
DOM的作用
DOM可以做什么？
-
找对象（元素节点）
-
设置元素的属性值
-
设置元素的样式
-
动态创建和删除元素
-
事件的触发响应：事件源、事件、事件的驱动程序
DOM节点的获取
想要操作元素节点，必须首先要找到该节点。有三种方式可以获取DOM节点：
var div1 = document.getElementById("box1"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获取 元素节点数组，所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获取 元素节点数组，所以有s
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问，节点的访问关系，是以属性的方式存在的
| 父节点 | 兄弟节点 | 子节点 | 所有子节点 |
|---|---|---|---|
| parentNode | nextSibling | firstChild | childNodes |
| nextElementSibling | firstElementChild | children | |
| previousSibling | lastChild | ||
| previousElementSibling | lastElementChild |
节点.parentNode //获取父节点
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
节点自己.parentNode.children[index]; //随意得到兄弟节点
第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
子节点数组 = 父节点.childNodes; //获取所有节点。
DOM节点的操作
上一段的内容：节点的访问关系都是属性。
本段的内容：节点的操作都是函数（方法）。
创建节点
新的标签(元素节点) = document.createElement("标签名");
<script type="text/javascript">
var a1 = document.createElement("li"); //创建一个li标签
var a2 = document.createElement("adbc"); //创建一个不存在的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
插入节点
插入节点有两种方式，它们的含义是不同的。
方式1：
父节点.appendChild(新的子节点); //如果新的子节点在页面上存在 则是会把节点移动到里面
解释：父节点的最后插入一个新的子节点。
方式2：
父节点.insertBefore(新的子节点,作为参考的子节点)
解释：
-
在参考节点前插入一个新的节点。
-
如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。
删除节点
格式如下：
父节点.removeChild(子节点);
解释：用父节点删除子节点。必须要指定是删除哪个子节点。
如果我想删除自己这个节点，可以这么做：
node1.parentNode.removeChild(node1);
复制节点
格式如下：
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true);
括号里带不带参数，效果是不同的。解释如下：
-
不带参数/带参数false：只复制节点本身，不复制子节点。
-
带参数true：既复制节点本身，也复制其所有的子节点。
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
我们就统一拿下面这个标签来举例：
<img src="images/1.jpg" class="img" title="hahah" alt="seeyou" id="a1">
获取节点属性
元素节点.属性名;
元素节点[属性名];
元素节点.getAttribute("属性名称");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="images/1.jpg" class="img" title="hahah" alt="seeyou" id="a1">
<script>
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src);
console.log(myNode.className);
console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]);
console.log(myNode["title"]);
</script>
</body>
</html>
设置节点属性
myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name
元素节点.setAttribute("属性名", "新的属性值");
删除节点属性
元素节点.removeAttribute(属性名);
myNode.removeAttribute("class");
myNode.removeAttribute("id");
注意
innerHTML和innerText的区别
-
value：标签的value属性。
-
innerHTML：双闭合标签里面的内容（包含标签）。
-
innerText：双闭合标签里面的内容（不包含标签）。（老版本的火狐用textContent）
这里讲一下nodeType属性。
-
nodeType == 1 表示的是元素节点（标签） 。记住：在这里，元素就是标签。
-
nodeType == 2 表示是属性节点。
-
nodeType == 3 是文本节点。
style属性
在DOM当中，如果想设置样式，有两种形式：
-
className（针对内嵌样式）
-
style（针对行内样式）
style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式
元素.style.样式名
元素.style["属性"]; //格式
box.style["width"]; //举例
元素.style.样式名 = 样式值;
我们通过style属性设置的样式都是行内样式，而行内样式有较高的优先级。但是如果在样式中的其他地方写了!important，则此时!important会有更高的优先级。
style属性的注意事项
style属性需要注意以下几点：
（1）样式少的时候使用。
（2）style是对象。我们在上方已经打印出来，typeof的结果是Object。
（3）值是字符串，没有设置值是“”。
（4）命名规则，驼峰命名。
（5）只能获取行内样式，和内嵌和外链无关。
（6）box.style.cssText = “字符串形式的样式”。
style的常用属性包括：
-
backgroundColor
-
backgroundImage
-
color
-
width
-
height
-
border
-
opacity 设置透明度 (IE8以前是filter: alpha(opacity=xx))
注意DOM对象style的属性和标签中style内的值不一样，因为在JS中，-不能作为标识符。比如：
-
DOM中：backgroundColor
-
CSS中：background-color
事件
事件简介
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。
事件的三要素：
-
事件源：引发后续事件的html标签。
-
事件：js已经定义好了（见下图）。
-
事件驱动程序：对样式和html的操作。也就是DOM。
也就是说，我们可以在时间对应的属性中写一些js代码，当事件被触发时，这些代码将会执行。
代码书写步骤如下：
-
（1）获取事件源：document.getElementById(“box”); // 类似于Android里面的findViewById
-
（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
-
（3）书写事件驱动程序：关于DOM的操作。
<body>
<button id="target1" type="submit" onclick="fun1()"> click me</button>
<script type="text/javascript" >
var div = document.getElementById("target1");
function fun1() {
alert("hahahah")
}
</script>
</body>
常见的事件如下
| 事件名 | 描述 |
|---|---|
| onclick | 鼠标点击触发 |
| ondbclick | 鼠标双击触发 |
| onkeyup | 按下并释放某个按键时触发 |
| onchange | 文本内容或者下拉菜单选项改变时触发 |
| onfocus | 获得焦点时触发 |
| onblur | 失去焦点时触发 |
| onmouseover | 鼠标悬停时触发 |
| onmouseout | 鼠标移出时触发 |
| onload | 页面加载时触发 |
| onunload | 关闭网页时触发 |
| onsubmit | 提交时触发 |
| onreset | 重置表达时 触发 |
绑定事件的方式
直接绑定
<body>
<button id="target1" type="submit" > click me</button>
<script type="text/javascript" >
var div = document.getElementById("target1");
div.onclick = function() {
alert("hahahahah")
}
</script>
</body>
// 或者用下面的方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("hahaha");
}
行内绑定
<body>
<button id="target1" type="submit" onclick="fun1()"> click me</button>
<script type="text/javascript" >
var div = document.getElementById("target1");
function fun1() {
alert("hahahah")
}
</script>
</body>
