webAPI编程-02

3.操作元素

排他思想：
- 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
  - 1.所有元素全部清楚样式
  - 2.给当前元素设置样式
  - 注意顺序不能颠倒
自定义属性的操作
- 获取属性值
  - element.属性 //获取属性值（获取内置属性值——元素本身自带的属性）
  - element.getAttribute('属性') （主要获取自定义的属性（标准）程序员自定义的属性）
- 设置元素属性值
  - element.属性 = '值'
  - element.setAttribute('属性','值') //自定义属性
- 移除属性
  - element.removeAttribute(属性)
- H5自定义属性
  - H5规定自定义属性data-开头做为属性名并且赋值
    - ```
    eg:<div data-index = "1" ></div>;
```
- ```
eg:element.setAttribute('data-index',2);
```
  - 获取H5自定义属性
    - 1.兼容性获取element.getAttribute('data-index')
    - 2.H5新增element.dataset.index或者element.dataset['index'] ie11才支持(只能获取data-开头的)
      - 如果自定义属性里面有多个-链接的单词,获取的时候采取驼峰命名法
        
        eg:data-list-name——listName

4.节点操作

网页中所有的内容都是节点（标签、属性、文本、标签等），在DOM中，节点使用node来表示
节点的三个基本属性：nodeType(节点类型)、nodeName(节点名称)、`nodeValue(节点值)
父级节点：node.parentNode
- parentNode属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回null
子节点：
- parentNode.childNodes（标准）
  - 返回包含指定节点的子节点的集合，该集合为即时更新的集合
- parentNode.children(非标准)
  - 是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回
- parentNode.firstElementChild //返回第一个子元素节点，找不到则返回null（ie9才支持）
- parentNode.lastElementChild //返回最后一个子元素节点，找不到则返回null（ie9才支持）
- parentNode.children[0] //既没有兼容性问题又返回第一个子元素
- `parentNode.children[parentNode.children.length - 1] // 返回最后一个子元素
兄弟节点
```
1.node.nextSibling;
```
- nextSibling返回当前元素的下一个兄弟节点，包含元素节点、文本节点等等，找不到则返回null;包含所有节点
```
2.node.previousSibling;
```
- previousSilbing返回当前元素上一个兄弟节点，找不到则返回null;包含所有的节点
```
3.node.nextElementSibling;
```
- nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null
```
4.node.previousElemnetSibling;
```
- previousElementSibling返回当前元素上一个兄弟元素节点，找不到返回null (ie9以上才支持)
创建节点
```
document.createElement('tagName');
```
- document.creatElement()方法创建由tagName指定的html元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以也成为动态创建元素节点
添加节点
```
1.node.appendChild(child);
```
- node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾，类似于CSS里面after伪元素
```
2.node.insertBefore(child,指定元素);
```
- node.insertBefore()方法将一个节点添加到父节点的指定子节点前面，类似于CSS里面的before伪元素