前言
DOM 是 Document Object Model（文档对象模型）的缩写，定义了访问和操作 HTML 文档的标准方法。DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
DOM 将 HTML 文档表达为树结构。
DOM中的层级关系
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
-
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
DOM查找元素
1. 直接查找
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
2. 间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素 Ps:节点和标签的区别 节点：既包含元素，又包含文本内容(包括一些换行符) 标签：只包含标签
DOM操作
操作内容
innerText 文本 outerText innerHTML HTML内容
outerHTML value 值
PS:
1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。innerHTML是符合W3C标准的属性，而innerText、outerText、outerHTML只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签
操作属性
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性
removeAttribute // 移除属性
实例1：基本使用：
- eg: <input id='i1' name='n1' type='text' alex='sb'>
- obj = document.getElementById('i1')
- obj.getAttribute('name')
- obj.setAttribute('name', '123')
- obj.removeAttribute('name')
实例1：利用操作属性，实现全选和反选
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <div id="p1"> 10 <p>hhh</p> 11 </div> 12 13 <input type="button" value="全选" onclick="CheckAll()" /> 14 <input type="button" value="取消" onclick="CancleAll()"/> 15 <input type="button" value="反选" onclick="ReverseAll()"/> 16 17 <table border="1"> 18 <thead> 19 <tr> 20 <th>序号</th> 21 <th>用户名</th> 22 <th>密码</th> 23 </tr> 24 </thead> 25 <tbody id="tb"> 26 <tr> 27 <td><input type="checkbox" /></td> 28 <td>2</td> 29 <td>22</td> 30 </tr> 31 <tr> 32 <td><input type="checkbox" /></td> 33 <td>2</td> 34 <td>22</td> 35 </tr> 36 <tr> 37 <td><input type="checkbox" /></td> 38 <td>2</td> 39 <td>22</td> 40 </tr> 41 <tr> 42 <td><input type="checkbox" /></td> 43 <td>2</td> 44 <td>22</td> 45 </tr> 46 </tbody> 47 </table> 48 <script src="jquery-1.12.4.js"></script> 49 <script> 50 function CheckAll(){ 51 var tb = document.getElementById('tb'); 52 var trs = tb.children; 53 for(var i=0;i<trs.length;i++){ 54 var current_tr = trs[i]; 55 var ck = current_tr.firstElementChild.firstElementChild; 56 ck.setAttribute('checked','checked'); 57 } 58 } 59 function CancleAll(){ 60 var tb = document.getElementById('tb'); 61 var trs = tb.children; 62 for(var i=0;i<trs.length;i++){ 63 var current_tr = trs[i]; 64 var ck = current_tr.firstElementChild.firstElementChild; 65 ck.removeAttribute('checked'); 66 } 67 } 68 function ReverseAll() { 69 var tb = document.getElementById('tb'); 70 var trs = tb.children; 71 for (var i = 0; i < trs.length; i++) { 72 var current_tr = trs[i]; 73 var ck = current_tr.firstElementChild.firstElementChild; 74 if (ck.checked) { 75 ck.checked = false; 76 ck.removeAttribute('checked'); 77 } else { 78 ck.checked = true; 79 ck.setAttribute('checked', 'checked'); 80 } 81 } 82 } 83 </script> 84 </body> 85 </html>