2-1控制节点

1.nodeType 节点类型

nodeType == 1 元素节点
nodeType == 2 属性节点
nodeType == 3 文本节点

<script>
var app = document.getElementById("app")
var id = app.getAttributeNode("id")//获取属性节点
console.log(app.nodeType) //元素节点
console.log(app.firstChild.nodeType); // 文本节点
console.log(id.nodeType); // 属性节点
</script>

2 获取父子兄弟节点

• parentNode

  获取父节点
  

• childNodes

   获取子节点
  

• children

   获取子（元素）节点
  

• firstChild (获取第一个子节点) firstElementChild（获得第一个元素节点） lastChild （获得最后一个子节点）lastElementChild（获得最后一个子元素节点）

• previousSibling（获取前一个节点） previousElementSibling（获取前一个元素节点）

• nextSibling（获取下一个节点） nextElementSibling（获取下一个元素节点 ） ```

    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
  

<ul id="app">
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>

<a name="rPKeg"></a>
## 3 增加节点
<a name="wayo1"></a>
### append 在结尾插入节点
<a name="Su747"></a>
### prepend 在开头插入节点

• html

<a name="kOVdu"></a>
## 4 删除节点
** removeChild() 删除节点**

<script>
    // removeChild() 让元素从DOM树，渲染树中消失
    var app = document.getElementById("app")
    var child = document.getElementById("child")
    app.removeChild(child)
</script>

** remove()删除节点自己**

chilidNiode.remove();

<a name="YbZbK"></a>
## 5 替换节点
** replaceChild 替换节点**