DOM是Document Object Model（文档对象模型）的缩写 ，由w3c制定Web标准
二、节点类型（了解）
1、每个节点都有一个nodeType属性，用于表明节点的类型。
2、常用节点类型与对应nodeType值：
备注：
用于判断获取到的元素属于什么类型节点
元素节点 <==> 1
文本节点 <==> 3
属性节点 <==> 2
三、获取元素节点(2、3条可以通过任意元素对象去调用)
1、document.getElementById("id名")
*、获取id名所在的元素（速度最快） ，返回值为元素对象或者null
*、须通过document调用
2、getElementsByClassName("class名")
* 获取到类名所在的元素组成的类数组。通过索引操作具体元素对象。返回值为类数组或者[]。
* 元素节点均可调用
3、getElementsByTagName("标签名")
* 获取到标签名所在的元素组成的类数组。通过索引获取到具体的元素
* 元素节点均可调用
4、document.getElementsByName("名字")
* 获取到**表单**名字所在的元素组成的类数组
*必须通过document调用
5、获取body及html
document.body ==> 获取body
document.documentElement ==> 获取html
四、利用节点关系，获取所有节点
| 利用节点关系，获取元素、文本节点 | 利用元素关系，获取元素节点 |
|---|---|
| 获取父级节点：ele.parentNode * 得到节点的父节点 | 获取父级节点：ele.parentElement * 得到节点的父元素节点 |
| 获取子节点：ele.childNodes * 得到ele元素的全部子节点列表(类数组) ele.firstChild * 获得ele元素的第一个子节点 ele.lastChild * 获得ele元素的最后一个子节点 | 获取子节点：ele.children * 得到ele元素的全部子元素节点列表ele.firstElementChild * 获得ele元素的第一个子节点ele.lastElementChild * 获得ele元素的最后一个子节点 |
| 获取兄弟节点：ele.nextSibling * 获得节点的下一个兄弟节点ele.previousSibling * 得到节点的上一个兄弟节点 | 获取兄弟节点：ele.nextElementSibling * 获得节点的下一个兄弟节点ele.previousElementSibling * 得到节点的上一个兄弟节点 |
五、三大节点的三大属性
1、元素节点
* nodeType 1
* nodeName 元素名大写
* nodeValue null
2、属性节点
* nodeType 2
* nodeName 属性名
* nodeValue 属性值
3. 文本节点
* nodeType 3
* nodeName #text
* nodeValue 文本内容
六、节点的增删改查
1、节点的创建
(1) document.**createElement**(“标签名”)
* 创建一个元素节点
(2) document.createTextNode(“文本”)
* 创建文本节点(了解)
(3) document.createAttribute(“属性名”)
* 创建一个属性节点(了解)
2、节点的插入
备注：以下parent表示父级元素，ele表示元素
(1) parent.appendChild(插入的节点)
* 向节点的子节点列表的结尾添加新的子节点
(2) parent.insertBefore(new,node)
* 在指定的子节点node前插入新的子节点new。
例：往子节点前面插入一个新节点
var h2 = document.createElement('h2');
h2.innerHTML = '哈哈哈';
document.body.insertBefore(h2,h3);
(3) ele.setAttributeNode(attrNode)
* 在指定元素中插入一个属性节点（了解）
演示：利用创建节点方法，生成三种节点，并往元素节点插入内容及属性
1.创建元素节点
var h3 = document.createElement("h3");
2.创建文本节点，并往h3元素节点插入文本节点
var txt = document.createTextNode("啦啦啦");
h3.appendChild(txt);
常用方法 =====> h3.innerHTML = "啦啦啦"；
3.创建属性节点，并往h3元素节点插入属性节点
var title = document.createAttribute("title");
title.nodeValue = 'xxx';
h3.setAttributeNode(title)；
常用方法 =====> h3.title = "xxx"
4.将元素节点插入body里面
document.body.appendChild(h1);
案例:生成表格
1 //1.获取文本框、按钮、及输出元素 2 //2.封装表格函数（保证单一原则,即一个函数只做一件事） 3 function createTable(r,c){ 4 //2.1 创建table>tbody>tr>td,记得插入对应的父元素内 5 //2.2 将table返回出去 6 } 7 //3.点击按钮时 8 //2.1 获取行列值 9 //2.2 执行生成表格函数 10 //2.3 将表格插入输出元素 11 //2.4 注意事项：每次插入前，记得清空上一次插入的内容 12 output.innerHTML = ''; 13 output.appendChild(table);
案例：自动应答机器人
1 // 1.获取输出元素ul、输入框及按钮 2 // 3.设置应答消息，用数组方式存放 3 var q = '你好,在吗,约吗,十年了还约吗'.split(','); 4 var a = '他好我也好,不是本人,叔叔在哪约,滚'.split(','); 5 // 2.点击按钮，发送信息（.active） 6 btn.onclick = function(){ 7 //2.1 发送信息（即在ul内插入li，并设置类名）： 8 //2.2 发送自动应答信息（设置延迟n秒，setTimeout） 9 // 注意：利用发送信息在q数组的索引，获取a数组中自动回复的内容 10 var idx = q.indexOf(_msg); 11 if(idx >= 0){ 12 aLi.innerHTML = a[idx]; 13 }else{ 14 aLi.innerHTML = '你说什么？风太大我听不到'; 15 } 16 //2.3 清空内容，自动聚焦 17 msg.value = ''; 18 msg.focus(); 19 }
3、节点的删除、复制、判断方法
删除：
(1) 父节点.removeChild(ele)
* 删除（并返回）当前节点parent的指定子节点ele。
* 父节点删除子节点
复制:
(2) 当前节点.cloneNode(boolean)
* 复制节点，boolean为true是深复制。返回值为复制后的新节点
判断：
(3) 父节点.hasChildNodes()
* 判断当前节点是否拥有子节点,返回布尔值当有参数时判断是否有这个子节点
案例：表格删除、复制表格行
1 *添加行号 2 *添加删除按钮 3 *删除当前行（一定要书写在生成表格后） 4 *获取所有按钮 5 *分别给所有按钮绑定事件处理函数 6 for(var i=0;i<btnDels.length;i++){ 7 btnDels[i].onclick = function(){ 8 //console.log(i)//演示：不管点击哪个按钮，最终都会得到10（变量查找规则） 9 //利用当前对象this，删除当前行tr、 10 } 11 //*添加复制功能，复制行 12 btnCopies[i].onclick = function(){ 13 // 获取当前行 14 var currentTr = this.parentNode.parentNode; 15 // 复制tr 16 var copyTr = currentTr.cloneNode(true); 17 // ！！！问题：复制的tr没有事件，为什么，怎么解决？ 18 table.getElementsByTagName('tbody')[0].appendChild(copyTr); 19 } 20 }
七、节点的属性及方法
* 节点是对象，给对象添加属性与给html元素添加属性不是一个意思。
* html标准属性会互相影响，但是不是标准的属性不会互相影响。
1、节点(对象)的属性
（1.1）tagName 获取元素元素的标签名
（1.2）className 设置/获取元素的class属性
（1.3）id 设置/获取元素id属性
（1.4）name 设置/获取元素name属性
（1.5）style 设置/获取元素的内联样式
（1.6）innerHTML 设置/获取元素的内容（包含html代码）
（1.7）innerText 设置或获取位于元素标签内的文本
2、节点的方法（操作html结构属性）
（2.1）ele.setAttribute(attr,val)("html属性","属性值")
给html元素添加属性
（2.2）ele.getAttribute(attr)("html属性")
拿到html属性对应的属性值
（2.3）ele.removeAttribute(attr)("html属性")
删除html属性
（2.4） ele.hasAttribute(attr)("html属性") 判断是否存在html属性
八、节点的盒模型相关的属性
（1）offsetWidth: ==> 当前元素的宽度（border + padding + content）
（2）offsetHeight: ==> 当前元素的高度（border + padding + content）
（3）offsetLeft: ==> 当前元素离**<定位父级>**元素左边的距离。
（4）offsetTop ==> 当前元素离**<定位父级>**元素顶部的距离。
备注： 若不在定位父级，则相对于html的距离
九、操作css样式
(1) 元素.style.属性 = "属性值" ==> 只能操作内联样式
(2) window.getComputedStyle(ele,pseudo)
* ele:要获取样式的元素
* pseudo:伪元素样式字符(可选)，可获取伪元素样式
(3) ele.currentStyle （IE8-）
* 得到包含ele所有样式的对象（支持IE8以下浏览器）
* currentStyle不能获得css总属性的值
十、图片解释
1、html结构与dom节点属性的共同点与不同点
2、节点的关系
* dom_tree