DOM操作节点

1. 获取子节点

• childNodes 所有子节点（元素、注释、文本、换行符）。

    <ul>
      <!-- 注释 -->
      <li class="li1">1</li>
      <li class="li2">2</li>
      <li class="li3">3</li>
    </ul>
<script>
    var ul = document.getElementsByTagName('ul')[0];
    console.log(ul.childNodes);
</script>

结果为 NodeList(9) [text, comment, text, li.li1, text, li.li2, text, li.li3, text]。

• firstChild 第一个子节点（元素、注释、文本、换行符）。

<script>
    console.log(ul.firstChild);
</script>

结果为 #text。

• lastChild **最后一个子节点（元素、注释、文本、换行符）。

<script>
    console.log(ul.firstChild);
</script>

结果为 #text。

2. 获取子元素节点

• children 获取所有子元素节点，有兼容问题（低版本IE【6-8】会和childNodes一样）。

    <ul>
      <!-- 注释 -->
      <li class="li1">1</li>
      <li class="li2">2</li>
      <li class="li3">3</li>
    </ul>
<script>
    var ul = document.getElementsByTagName('ul')[0];
    console.log(ul.children);
</script>

会正确获得所有子节点，结果为HTMLCollection(3) [li.li1, li.li2, li.li3]。

• firstElementChild 获取第一个子元素

<script>
    console.log(ul.firstElementChild);
</script>

结果为 <li class="li1">1</li>。

• lastElementChild 获取最后一个子元素

<script>
    console.log(ul.lastElementChild);
</script>

结果为 <li class="li1">1</li>.

3. 获取父元素节点

• parentNode 获取父元素

    <ul>
      <!-- 注释 -->
      <li class="li1">1</li>
      <li class="li2">2</li>
      <li class="li3">3</li>
    </ul>
<script>
    var li = document.getElementsByTagName('li')[0];
    console.log(li.parentNode);
</script>

结果为<ul>...</ul>. 包含了<ul>中的 所有子元素和注释（相当于上方代码完整输出）。

• offsetParent 获取具有定位属性的最近父元素

    <div style="position: relative">
      <ul>
        <!-- 注释 -->
        <li class="li1">1</li>
        <li class="li2">2</li>
        <li class="li3">3</li>
     </ul>
   </div>
<script>
    console.log(li.offsetParent);
</script>

结果为：<div style="position: relative">...</div>.同样包含<div>中的所有元素&注释。

4. 获取同级节点

• previousSibling 获取上一个兄弟节点（元素|注释|文本|换行符）

    <ul>
      <!-- 注释 -->
      <li class="li1">1</li>
      <li class="li2">2</li>
      <li class="li3">3</li>
    </ul>
<script>
    var li = document.getElementsByTagName('li')[0];
    console.log(li.previousSibling);
</script>

结果为 #text.

• nextSibling 获取下一个兄弟节点

<script>
    console.log(li.nextSibling);
</script>

结果为 #text.

5. 获取同级元素节点

• previousElementSibling 获取上一个兄弟元素节点

    <ul>
      <!-- 注释 -->
      <li class="li1">1</li>
      <li class="li2">2</li>
      <li class="li3">3</li>
    </ul>
<script>
    var li = document.getElementsByTagName('li')[1]; //<== 变为1
    console.log(li.previousElementSibling);
</script>

结果是 <li class="li1">1</li>.

• nextElementSibling 获取下一个兄弟元素节点

<script>
    console.log(li.nextElementSibling);
</script>

结果是 <li class="li3">3</li>.

带有Element的方法，低版本IE不兼容（为了和IE区别做出了便利性的牺牲）。

6. 节点的增删改查

• 创建节点 createTextNode()，createElement()

    document.createTextNode('文本');  // 创建文本节点
    document.createElement('div');  // 创建节点

• 插入节点 appendChild()，insertBefore()

    parent.appendChild(newNode); // 父元素末尾插入元素
    oldNode.parentNode.insertBefore(newNode,oldNode);   // 指定元素前插入节点

实例1（在body末尾插入元素）

 <script>
    var div = document.createElement('div');  // 创建节点
      div.id = "my-div";  // 添加属性1
      div.className = "box";  // 添加属性1
      document.body.appendChild(div); // 在body末尾插入div
</script>

插入节点.png

实例2 （在div前插入元素）

    <div id="div"></div>
</body>
<script>
    var div = document.getElementById('div');
    var p = document.createElement('p');
      div.parentNode.insertBefore(p,div);
</script>

插入节点2.png

• 替换节点 replaceChild()，innerHTML，innerText

    oldNode.parentNode.replaceChild(newNode, oldNowde);
    element.innerHTML; //  获取元素中的所有节点
    element.innerText; // 获取元素中的文本节点
    element.innerHTML= '<div class="box">文本</div>'; 
    //  覆盖元素中的所有内容，可设置元素节点&文本节点^
    element.innerText = '文本'; 
    // 覆盖元素中的所有内容，只能设置文本节点,但可以以文本输出标签。

实例1

    <p>
      <span>需要被替换的节点</span>
    </p>
<script>
    var span = document.getElementsByTagName('span')[0];
    var b = document.createElement('b');
    span.parentNode.replaceChild(b,span);
</script>

替换节点.png

实例2

    <p>
      <span>需要被替换的节点</span>
      <span>需要被替换的节点</span>
      <span>需要被替换的节点</span>
    </p>
<script>
    var p = document.getElementsByTagName('p')[0];
    p.innerHTML = '<b class="bold">插入节点</b>';
    // p.innerText = '插入文本';
</script>

innerHTML&innerText 会覆盖元素中的全部内容，并且只能同时使用一种，如果将注释取消，结果就是<p>插入文本</p>，按顺序覆盖，可以p.innerHTML = '插入文本<b></b>'。虽然inner这种方式简单，但速度会比较慢。

• 删除节点 removeChild()

      delNode.parentNode.removeChild(delNode);

实例

      <p><p>
<script>
    var p = document.getElementsByTagName('p')[0];
    p.parentNode.removeChild(p);
</script>

插入和修改同级元素都会调用父元素执行，所以会出现.parentNode

• 复制节点 cloneNode()

    element.cloneNode(false) // 只克隆节点
    element.cloneNode(false) // 克隆节点和其内部的所有节点

实例

    <p><!-- 注释 -->克隆节点</p>
<script>
    var p = document.getElementsByTagName('p')[0];
    console.log(p.cloneNode(false));
    console.log(p.cloneNode(true));
</script>

克隆节点.png