WEB APIS(共7天课程）Day2

DOM（2-2）

**《一》排它思想**

1. 干掉所有的，留下自己
2. 先要去遍历元素的集合，然后把所有的元素设置样式为空，再把当前的元素设置成高 亮

**《二》自定义属性**

1. 设置自定义属性：element.getAttribute(属性名)
2.  获取自定义属：element.setAttribute(属性名，属性值)
3. 移除自定义属性：element.removeAttribute(属性名)
4.  H5中操作自定义属性：  

• 在H5中建议我们自定义属性用 data- 开头
• 方便我们去进行获取 element.dataset.属性名

**《三》节点操作**

1.  （一）  获取节点

•  获取父子
  • 获取父节点：element.parentNode
  • 获取子元素：element.children
  • 获取子节点：element.childNodes
  • 获取第一个子节点|元素
        element.firstChild
        element.firstElementChild
  • 获取最后一个子节点|子元素
        element.lastChild
        element.lastElementChild
•  获取兄弟节点
  • 获取上一个兄弟节点|元素
        element.previousSibling
        element.previousElementSibling
  • 获取下一个兄弟节点|元素
        element.nextSibling
        element.nextElementSibling

1. （二）动态添加节点

• element.innerHTML = ''
• 创建元素，然后添加
  • var li = document.createElement('li')  // 仅仅只是在内存中
    • 挂载到DOM树
          parent.appendChild(li)  追加子元素
          parent.insertBefore(li, 参照的元素)