1. DOM 简介
-
DOM全称：Document Object Model 文档对象模型。
- 文档：表示整个HTML网页文档。
- 对象：表示将网页中的每一个部分都转换为一个对象。
- 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。
- JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作web页面了。
(1) 节点node
- 节点是构成我们网页的最基本的组成部分。比如：html标签，属性，文本，注释，整个文档等都是一个节点。
- 节点分为不同的类型，类型不同，属性和方法也都不尽相同。
常用的节点分为四类：
文档节点document：整个HTML文档。document对象作为window对象的属性存在，我们不用获取，可以直接使用。通过该对象，我们可以在整个文档中，查找或创建节点对象。
元素节点：HTML文档中的HTML标签。属性节点：元素的属性。它是元素节点的一部分。我们一般不使用属性节点。
文本节点：HTML标签的文本内容。
如图所示：
(2) 事件
- 指文档或浏览器窗口中发生的一些特定的交互瞬间。即用户和浏览器之间的交互行为。
- 如：点击某个元素，将鼠标移动至某个元素上方等等。
-
可以为按钮的对应事件绑定处理函数的形式来响应事件。当事件被触发时，其对应的函数将会被调用。
举例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 方法1：通过标签的属性绑定事件，结构与行为耦合，不方便维护，不推荐使用 --> <button id="btn" onclick = "alert('确定');">我是一个按钮</button> <!-- 方法2：结构与行为分离，方便维护，推荐使用 --> <button id="btn">我是一个按钮</button> <script type="text/javascript"> //将id为"btn"的button元素设置为对象btn var btn = document.getElementById("btn"); alert(btn);//[object HTMLButtonElement] //为对象添加属性，绑定一个事件 //像这种为单击事件绑定的函数，称为单击响应函数 btn.onclick = function () { alert("点击表示确认"); }; </script> </body> </html>说明：如上两种方式。方法2中，将script标签写在了body中，下面会做解释。
(3) 文档的加载
- 浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。
- 如果将script标签写到页面的上边，在运行代码时，DOM对象还没有加载，会导致无法获取到DOM对象。
-
如下代码：对于alert和button，页面会先运行alert，确定后才会按顺序由上到下加载button。所以在举例1中，将script标签中的内容写在head内，是会报错的，不能为btn添加属性onclick。Uncaught TypeError: Cannot set property 'onclick' of null
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> alert("hello"); </script> </head> <body> <button id="btn">我是一个按钮</button> </body> </html>解决办法：使用window.onload先加载后执行代码。（小小缺点：先加载后执行，会影响html的加载速度。但其实，没有明显区别。）
-
onload事件会在整个页面加载完成之后才触发。为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成后执行，这样可以确保我们的代码执行时，所有的DOM对象已经加载完毕了。
举例：当页面加载完后，点击按钮，才会alert。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload = function () { var btn = document.getElementById("btn"); btn.onclick = function () { //innerHTML通过这个属性，可以获取到元素内部的html代码 alert(btn.innerHTML);//结果：我是一个按钮 } }; </script> </head> <body> <button id="btn">我是一个按钮</button> </body> </html>注意：innerHTML通过这个属性，可以获取到元素内部的html代码。但是对于自结束标签，这个属性没有意义。如果需要读取元素节点属性，直接使用元素.属性名。
例如：元素.id 元素.name 元素.value。但是读取class属性时需要使用 元素.className
(4) 主要用法：
通过document对象调用,获取元素节点
-
getElementById()方法
通过id属性获取一个元素节点对象
-
getElementsByTagName()方法
通过标签名获取一组元素节点对象。这个方法会返回一个类数组对象，将所有查询到的元素封装到对象中。即使查询到的结果只有一个，也会封装到数组中返回。
-
getElementsByName()方法
通过name属性获取一组元素节点对象
通过具体的元素节点调用，获取元素节点的子节点
-
getElementsByTagName()方法
返回当前节点的指定标签名后代节点
-
childNodes属性
表示当前节点的所有子节点(包括文本节点在内的),根据DOM标准，标签间的空白，也会当作文本节点。注意：IE8以及以下的浏览器，不会将空白当作文本节点。
-
children属性
可以获取当前元素的所有子元素
-
firstChild属性
表示当前节点的第一个子节点(包括文本节点)
-
firstElementChild
获取当前元素的第一个子元素。但不支持IE8及以下的浏览器
-
lastChild属性
表示当前节点的最后一个子节点
通过具体的节点调用，获取父节点和兄弟节点
-
parentNode属性
表示当前节点的父节点
-
previousSibling属性
表示当前节点的前一个兄弟节点(可能是空白文本)
-
perviousElementSibling
获取前一个兄弟元素，IE8及以下不支持
-
nextSibling属性
表示当前节点的后一个兄弟节点
其他剩余方法
-
getElementsByClassName()方法
根据class属性值获取一组元素节点对象。但是该方法不支持IE8及以下的浏览器
-
document.body属性
保存body的引用,等同于 document.getElementsByTagName("body")[0];默认一个页面只有一个body。
document.documentElement属性，保存html根标签
-
document.all属性
代表页面中所有的元素（不去重复）。
等同于document.getElementByTagName("*") -
document.querySeletor()方法
需要一个选择器的字符串作为参数，可以根据CSS选择器来查询一个元素节点对象。虽然IE8中没有getElementsByClassName(),但是可以使用querySelector()代替。
使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，结果只会返回第一个。document.querySelector("#box1"); -
documentSelectorAll()
将符合条件的元素封装到一个数组中返回。即使符合条件的元素只有一个，它也会返回数组。
- checked:设置或返回checkbox是否应被选中。通过多选框的checkbox属性，可以获取或设置多选框的选中状态。
- 在事件的响应函数中，响应函数是给谁绑定的，this就是谁。
//为checkAllBox绑定单击响应函数
var checkAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclink=function(){
alert(this === checkedAllBox);
}5.DOM的增删改
createElement()创建元素节点
可以用于创建夜歌元素节点。它需要一个标签名作为参数，将会根据标签名创建节点对象，并将创建好的对象作为返回值返回。
//创建li元素节点
var li= document.createElement("li");//[objectHTMLIElement]createTextNode()创建文本节点
可以用来创建一个文本节点对象。需要一个文本内容作为参数，将根据该内容创建文本节点，并将新的节点返回。
//创建文本内容为“广州”的文本节点
var gzText= document.createTextNode("广州");//[object Text]appendChild()把新的子节点添加到指定节点
向一个父节点中添加一个新的子节点。
用法：父节点.appendChild(子节点)
//<li>广州</li> 文本节点广州是标签节点li的子节点
li.appendChild(gzText);insertBefore() 在指定的子节点前面插入新的子节点。
语法：父节点.insertBefore(新节点，旧节点)
replaceChild() 替换子节点
可以使用指定的子节点替换已有的子节点。
语法：父节点.replaceChild(新节点，旧节点)
removeChild() 删除子节点
语法：父节点.removeChild(子节点)
子节点.parentNode.removeChild(子节点)var bj = document.getElementById("bj");
var city = document.getElementById("city");
//下面两句的等同
city.removeChild(bj);
bj.parentNode.removeChild(bj);//不需要知道子节点的父节点
........
<ul id="city">
<li id="bj">北京</li>
</ul>小结：
- innerText属性可以获取到元素内部的文本内容，它和innerHTML的区别是，它会自动将标签去掉，只剩文本内容。
- 使用innerHTML也可以完成DOM的增删改相关操作，一般我们与appendChild结合使用。
var city = document.getElementById("city");
//创建li节点
var li = document.createElement("li");
//向li中设置文本
li.innerHTML = "广州";
//将li添加到city中
city.appendChild(li);
- 文本框的value属性值，就是文本框中填写的内容
姓名<input id="username"value ="abc">var um = document.getElementById("username");
//读取um的value属性值
alert(um.value);- window对象的方法：confirm()显示带有一段消息以及确认按钮或者取消按钮的对话框。
用于弹出一个带有确认和取消按钮的提示框。需要一个字符串作为参数，该字符串将会作为提示文字显示。如果用户点击确认则会返回true，点击取消则返回false。
- window对象的方法：prompt()显示可提示用户输入的对话框。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。