JS—DOM元素

• 节点树种节点之间的关系，父子、兄弟
• 节点种类：元素节点、文本节点、属性节点。
• getElementById()：获取特定 ID 元素的节点
  1. window.onload = function () { //预加载 html 后执行
• getElementsByTagName()： 获取相同元素的节点列表
  1. 返回数组，使用[0]来获取
• getElementsByName() ：获取相同名称的节点列表
  1. 不是所有标签都有name属性
  2. 某些低版本浏览器会有兼容性问题
• getElementsByClassName()

返回数组，使用[0]来获取

• getAttribute() 获取特定元素节点属性的值
  1. 获取自定义属性时， oDiv.xxx ，  IE支持，其他浏览器不支持，因此要采用这个方法来访问
• setAttribute() 设置特定元素节点属性的值
  1. IE低版本浏览器不支持这个方法
• removeAttribute() 移除特定元素节点属性 
  1. 某些低版本浏览器不支持

• 访问元素节点的属性
  1. tagName 获取元素节点的标签名
  2. innerHTML 获取元素节点里的内容
  3. outerHTML/innerText，非 W3C DOM 规范
  4. id 元素节点的 id 名称
  5. title 元素节点的 title 属性值（鼠标悬停时的提示）
  6. style  CSS内联样式属性值

• node 节点属性
  1. 节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性 ，分别为：nodeName、nodeType 和 nodeValue。
  2. 节点属性nodeName、 nodeType、 nodeValue元素1 属性 2 文本 3
  3. 节点的属性列表：
  4. childNodes 获取当前元素节点的所有子节点
  5. firstChild 获取当前元素节点的第一个子节点
  6. lastChild 获取当前元素节点的最后一个子节点
  7. ownerDocument 获取该节点的文档根节点，相当与 document
  8. parentNode 获取当前节点的父节点
  9. previousSibling 获取当前节点的前一个同级节点
  10. nextSibling 获取当前节点的后一个同级节点
  11. attributes 获取当前元素节点的所有属性节点集合
• childNodes 属性
  1. 返回元素节点和文本节点两种
  2. 使用nodeName来获取元素的标签名称
  3. 使用nodeValue来获取文本内容
  4. 使用nodeType来判断到底是哪个节点（元素1 属性 2 文本 3）
• innerHTML 和 nodeValue
  1. box.childNodes[0].nodeValue = '<strong>abc</strong>';
  2. box.innerHTML = '<strong>abc</strong>';
  3. 使用nodeValue，标签会被转义，然后在页面上原样输出
• attributes 属性
  1. document.getElementById('box').attributes //NamedNodeMap
  2. document.getElementById('box').attributes.length;//返回属性节点个数
  3. document.getElementById('box').attributes[0]; //返回最后一个属性节点
  4. document.getElementById('box').attributes[0].nodeType; //2，属性
  5. document.getElementById('box').attributes[0].nodeValue; //属性值
  6. document.getElementById('box').attributes['id']; //返回属性为 id 的节点
  7. document.getElementById('box').attributes.getNamedItem('id'); //
• 忽略空白文本节点
  1. body.childNodes.length
  2. 在低版本IE中，会自动忽略掉空白的文本节点，其他浏览器不会忽略
  3. 可以编写一个手工过滤空白节点的方法
  4. 或者编写一个删除空白节点的方法
  5. 匹配空白节点可以使用正则：/^s+$/.test(box.nodeValue)
• 节点操作
  1. DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点
  2. write()
  3. createElement()
  4. createTextNode()
  5. appendChild()
  6. insertBefore()
  7. removeChild()
• offsetParent（参照物父元素）
  1. 当某个元素的父元素或以上元素都未进行CSS定位时，则返回body元素，也就是说元素的偏移量（offsetTop、offsetLeft）等属性是以body为参照物的
  2. 当某个元素的父元素进行了CSS定位时（absolute或者relative），则返回父元素，也就是说元素的偏移量是以父元素为参照物的
  3. 当某个元素及其父元素都未进行CSS定位时，则返回距离最近的使用了CSS定位的元素。