【SSD系列】没了jquery, vue, react，你还会DOM节点的增删改查吗？-阿里云开发者社区

前言

关于【SSD系列】：

前端一些有意思的内容，旨在3-10分钟里， 500-1500字，有所获，又不为所累。

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

常用查询节点方法有哪些
什么是空白节点？？她又到底是个什么东西
querySelectorAll 有哪些坑
怎么查询伪元素
四种删除节点方式你都知道吗
HTMLCollection 和 NodeList的区别
怎样删除所有的孩子节点

我们已经先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。

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

前言