Web API 笔记03

自定义属性操作：

元素.属性 的方法没法拿到元素的属性。

//原html为 <div id = "box" index = "0"></div>
  元素.getAttrbute('index');

这种方法可以获得任意标签中的属性

元素.setAttrbute('属性名' , '属性值');

传两个参数，一个属性名，一个属性的值。

这种方法也可设置W3C标准的的属性，如class。

不需要关心返回值。

    元素.removeAttrbute('属性名');

小拓展：

自定义属性在属性命名前面加一个 “data-属性“; 调用的时候只需要 元素.dataset.属性 即可获得属性值

设置：div.dataset.haha = 'hello';

调用：var test = div.dataset.haha;

只要是id设置的属性标签，可以直接console.console.log(id)即可获得对象。

节点：

    var mark = Document/Element.getElementById('box');

找子元素

1 .childNodes: 返回所有子节点，包含文本和注释，是个伪数组

.nodeType：标签是 1 ，文本是 3 ，注释是 8 ；
.nodeValue：标签是null ，文本和注释都是内容
.nodeName：标签全是大写
.children: 返回所有的标签节点（元素）的伪数组 ————常用，但是有兼容性问题。

属性节点：(了解)

.getAttributeNode(‘某个标签’);

2.找兄弟元素：

3.找父元素：

.parentNode

可通过一个接口进去之后找到附近的节点，找某个标签某子元素，可通过遍历子节点伪数组，判断nodeValue值与标签名，标签名要全用大写

节点操作：

1.添加一个子节点

```js
// Node.appendChild(ChildNode 不加'')
ul.appendChild(li);
```

已有元素相当于剪贴效果，新元素相当于创建

2.插入一个子节点在子基准节点前，有剪贴效果

  Node.insertBefore(NewNode , BaseChildNode);

3.移除一个子节点

 Node.removeChild(ChildNode);

4.新节点替换掉子节点有剪贴效果

Node.replaceChild(NewNode , ChildNode);

5.复制一个节点，默认是false，只复制一个节点标签；如果是true，则复制节点及里面的全部内容

   Node.cloneNode([false/true]);

不会自动插入，需要用appenChild进行添加