【SSD系列】没了jquery, vue, react，你还会DOM节点的增删改查吗？

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战。javascript

前言

关于【SSD系列】：
前端一些有意思的内容，旨在3-10分钟里， 500-1500字，有所获，又不为所累。css

先提问一波：(无框架前提下)html

经常使用查询节点方法有哪些前端
什么是空白节点？？她又究竟是个什么东西vue
querySelectorAll 有哪些坑java
怎么查询伪元素node
四种删除节点方式你都知道吗react
HTMLCollection 和 NodeList的区别jquery
怎样删除全部的孩子节点git

咱们已经先jquery, vue, react等前端框架带来的便利了：

jquery就不说了，一个$走天下，无限连。
vue和react使用ref就能拿到对应节点。

离开了这些框架，你还能666的操做Node节点吗？

本文源码

crud-doms

节点查询

先放一段测试的html代码

<div class="outer" id="outer">
    <ul class="list list-1">
      <li class="item">list-one</li>
      <li class="item">list-two</li>
      <li class="item">list-three</li>
    </ul>
  </div>

  <input type="button" name="btnSubmit" value="刷新"/>
复制代码

经常使用的节点查询方法

getElementById

根据元素的id属性值进行节点查询，返回单一节点。

document.getElementById("outer")  // <div class="outer" id="outer">......
复制代码

getElementsByClassName

根据元素的classname属性值就行查询。

document.getElementsByClassName("item") // HTMLCollection(3) [li.item, li.item, li.item]
复制代码

getElementsByName

根源节点的name属性进行查询。

document.getElementsByName("btnSubmit") // NodeList [input]
复制代码

getElementsByTagName

根据节点标签名进行查询。

document.getElementsByTagName("li") // HTMLCollection(3) [li.item, li.item, li.item]
复制代码

querySelector

根绝css选择器进行节点查询，返回单个节点。

document.querySelector("#outer") // <div class="outer" id="outer">......
复制代码

querySelectorAll

根绝css选择器进行节点查询，返回节点列表。
```
document.querySelectorAll(".item") // NodeList(3) [li.item, li.item, li.item]
复制代码
```
在没有querySelector和querySelectorAll出现以前，基本都是经过前四个查询方法配合 childNodes和parentNode方法扩展出各类方法。

一些特殊查询属性

document.all 返回全部的节点
document.images 返回全部的图片
document.forms 返回全部的form表单
document.links 返回全部的连接标签
document.embeds 返回全部的 object标签元素，之前主要用于flash，pdf等等

querySelectorAll 注意事项

其返回的静态的NodeList，随后对DOM元素的改动不会影响其集合的内容。

下面的代码能够看到，添加一个节后后， nodeList长度并无变化。

<ul class="list list-1">
    <li class="item">list-one</li>
    <li class="item">list-two</li>
    <li class="item">list-three</li>
  </ul>

  <script> var nodeList = document.querySelectorAll(".item"); console.log("len：", nodeList.length); // 3 var liEl = document.createElement("li"); liEl.className = "item"; liEl.innerHTML = "list-for" document.querySelector(".list").appendChild(liEl); console.log("len：", nodeList.length); //3  </script>
复制代码

querySelectorAll可能返回的不是你指望的值

<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>

<script> var select = document.querySelector('.select'); var inner = select.querySelectorAll('.outer .inner'); inner.length; // 1, not 0! </script>

复制代码

那么怎样才能返回指望的结果呢？答案是 :scope

var select = document.querySelector('.select');
var inner = select.querySelectorAll(':scope .outer .inner');
inner.length; // 0
复制代码

转义特殊字符

<div id="foo\bar"></div>
  <div id="foo:bar"></div>

  <script> console.log('#foo\bar') // "#fooar" document.querySelector('#foo\bar') // 不匹配任何元素 console.log('#foo\\bar') // "#foo\bar" console.log('#foo\\\\bar') // "#foo\\bar" document.querySelector('#foo\\\\bar') // 匹配第一个div document.querySelector('#foo:bar') // 不匹配任何元素 document.querySelector('#foo\\:bar') // 匹配第二个div </script>
复制代码

HTMLCollection 和 NodeList的区别

细心的通知可能发现了，上面的方法，有的返回的是HTMLCollection，有的返回的是NodeList。他们有什么区别呢？

这里先要弄清晰继承关系：

HTMLElement -> Element -> Node-> EventTarget
复制代码

EventTarget 前一个提供了事件分发能力，自己也是一个订阅发布中心，更多详情参见 3行代码一个订阅发布中心，不会不知道吧。

Node 有 12种节点类型，详情参见 NodeType，咱们经常使用的 div, span等等属于nodeType=1的节点类型。

因此：

HTMLCollection 是元素节点类型，即nodeType为1的节点。

NodeList 是节点集合，包含文本节点，注释节点等等其余节点。

怎么查询伪元素

// html代码  
<style> .nihao::before{ content: '你好，'; } </style>
  <div class="nihao" id="nihao">
    Tom
  </div>
复制代码

答案是不能，但你能够经过 window.getComputedStyle 来获取其样式。

window.getComputedStyle(nihao, "before")["content"] // "\"你好，\""
复制代码

节点删除

先特出测试的html代码段

<ul class="list list-1">
    <li class="item">list-one</li>
    <li class="item">list-two</li>
    <li class="item">list-three</li>
  </ul> 
复制代码

Node.removeNode

这种咱们用的最多的方法，前提是首先得得到要被删除元素的父节点，可使用parentNode或者parentElement得到。

var ul = document.querySelector(".list");
    console.log("li length", ul.children.length);  // 3
    ul.removeChild(ul.children[0])  // removeChild
    console.log("li length", ul.children.length); // 2

复制代码

Element.remove

这个方法属于 Element对象上，也就代表，其余nodeType类型是不可使用的, 其不须要得到副节点。

var ul = document.querySelector(".list");
    console.log("li length", ul.children.length);  // 3
    ul.children[0].remove();  // remove
    console.log("li length", ul.children.length); // 2

复制代码

outerHTML或者innerHTML

var ul = document.querySelector(".list");
    console.log("li length", ul.children.length);  // 3
    ul.children[0].outerHTML = null   // outerHTML
    console.log("li length", ul.children.length); // 2


复制代码

Document.adoptNode

从其余的document文档中获取一个节点。该节点以及它的子树上的全部节点都会从原文档删除。

var ul = document.querySelector(".list");
console.log("li length", ul.children.length);  // 3
document.adoptNode(ul.children[0]); // adoptNode
console.log("li length", ul.children.length); // 2

复制代码

批量删除节点

批量删除，好比清除某个节点下的全部子节点，通常是使用while循环，暴力的方式是 innerHTML = null。

innerHTML = null可能致使事件监听器没有被取消，以致使内存泄漏，具体有么有，还得看浏览器的实现。

咱们封装一个吧：

function clearChildNodes(node){
    while(node.hasChildNodes()){
        node.removeChild(node.firstChild);
    }
}
const ul = document.querySelector(".list");
console.log("nodes:", ul.childNodes.length);  // 7
clearChildNodes(ul);   
console.log("nodes:", ul.childNodes.length);  // 0
复制代码

空白节点

为何是7个节点呢？看图上的空白节点，有4个， 4+3 =7楼。

咱们调整一下代码, 删除空白，再看输出

<ul class="list list-1"><li class="item">list-one</li><li class="item">list-two</li><li class="item">list-three</li></ul>
复制代码

那空白节点，到底是个什么东西？？

看代码，其实就是nodeType为3的文本节点。进行输出的时候其textConent为空。

var ul = document.querySelector(".list");
    console.log("li length", ul.childNodes.length);  // 7

    var firstNode = ul.childNodes[0];
    console.log("nodeType", firstNode.nodeType);  // 3 
    console.log("content", firstNode.textContent); // 
复制代码

咱们不妨添加一点内容, 你就能清晰的知道了，其childNodes长度依旧是7，第一个文本节点的内容是 text content

<ul class="list list-1">text content
    <li class="item">list-one</li>
    <li class="item">list-two</li>
    <li class="item">list-three</li>
  </ul> 
复制代码

小结

是否是很简单，一切都看起来没那么难，这样，你才容易入坑啊。

篇幅优先，若是star超过 100，再写一篇节点增长和更新的文章。

写在最后

写做不易，你的一赞一评就是我前行的最大动力。
技术交流群，请加微信 dirge-cloud。

Node
HTMLElement
querySelectorAll