--- highlight: a11y-dark --- 这是我参与8月更文挑战的第10天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831")。 ## 前言关于[【SSD系列】](https://juejin.cn/column/6991252706941730852)： **前端一些有意思的内容，旨在3-10分钟里， 500-1500字，有所获，又不为所累。** 先提问一波：(无框架前提下) * **常用查询节点方法有哪些** * **什么是空白节点**？？她又到底是个什么东西 * **querySelectorAll 有哪些坑** * **怎么查询伪元素** * **四种删除节点方式你都知道吗** * **HTMLCollection 和 NodeList的区别** * **怎样删除所有的孩子节点** 我们已经先jquery, vue, react等前端框架带来的便利了： * jquery就不说了，一个`$`走天下，无限连。 * vue和react使用`ref`就能拿到对应节点。离开了这些框架，你还能666的操作Node节点吗？ ## 本文源码 **[crud-doms](https://github.com/xiangwenhu/juejinBlogsCodes/tree/master/crud-doms)** ## 节点查询先放一段测试的html代码 ```html

list-one
list-two
list-three

``` ### 常用的节点查询方法 1. [getElementById](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById) 根据元素的`id`属性值进行节点查询，返回单一节点。 ```js document.getElementById("outer") //

...... ``` 2. `getElementsByClassName` 根据元素的classname属性值就行查询。 ```js document.getElementsByClassName("item") // HTMLCollection(3) [li.item, li.item, li.item] ``` 3. `getElementsByName` 根源节点的name属性进行查询。 ```js document.getElementsByName("btnSubmit") // NodeList [input] ``` 4. `getElementsByTagName` 根据节点标签名进行查询。 ```js document.getElementsByTagName("li") // HTMLCollection(3) [li.item, li.item, li.item] ``` 5. `querySelector` 根绝css选择器进行节点查询，返回单个节点。 ```js document.querySelector("#outer") //

...... ``` 6. `querySelectorAll` 根绝css选择器进行节点查询，返回节点列表。 ```js 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长度并没有变化。 ```html

list-one
list-two
list-three

``` * querySelectorAll可能返回的不是你期望的值 ```html

``` 那么怎样才能返回期望的结果呢？答案是 `:scope` ```js var select = document.querySelector('.select'); var inner = select.querySelectorAll(':scope .outer .inner'); inner.length; // 0 ``` * **[转义特殊字符](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector#转义特殊字符)** ```html

``` ### **HTMLCollection 和 NodeList的区别** 细心的通知可能发现了，上面的方法，有的返回的是HTMLCollection，有的返回的是NodeList。他们有什么区别呢？这里先要弄清晰继承关系： ```js HTMLElement -> Element -> Node-> EventTarget ``` [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) 前一个提供了事件分发能力，本身也是一个订阅发布中心，更多详情参见 **[3行代码一个订阅发布中心，不会不知道吧](https://juejin.cn/post/6991992950876028959)**。 [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) 有 12种节点类型，详情参见 [NodeType](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)，我们常用的 div, span等等属于nodeType=1的节点类型。所以： HTMLCollection 是元素节点类型，即nodeType为1的节点。 NodeList 是节点集合，包含文本节点，注释节点等等其他节点。 ### 怎么查询伪元素 ```html // html代码

Tom

``` 答案是不能，但你可以通过 [window.getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) 来获取其样式。 ```css window.getComputedStyle(nihao, "before")["content"] // "\"你好，\"" ``` ## 节点删除先特出测试的html代码段 ```html

list-one
list-two
list-three

``` ### [Node.removeNode](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/removeChild) 这种我们用的最多的方法，前提是首先得获得要被删除元素的父节点，可以使用`parentNode`或者`parentElement`获得。 ```js 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](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) 这个方法属于 Element对象上，也就表明，其他nodeType类型是不可以使用的, 其不需要获得副节点。 ```js 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 ```js 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](https://developer.mozilla.org/zh-CN/docs/web/api/document/adoptnode) 从其他的document文档中获取一个节点。该节点以及它的子树上的所有节点都会从原文档删除。 ```js 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`可能导致事件监听器没有被取消，以导致内存泄漏，具体有么有，还得看浏览器的实现。我们封装一个吧： ```js 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楼。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1faeb4fc6ce340c8980929c34113bd83~tplv-k3u1fbpfcp-watermark.image) 我们调整一下代码, 删除空白，再看输出 ```html

list-one
list-two
list-three

``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b040d1e33ff472b834c93129d27517b~tplv-k3u1fbpfcp-watermark.image) 那空白节点，究竟是个什么东西？？看代码，其实就是**nodeType为3的文本节点**。进行输出的时候其textConent为空。 ```js 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` ```html

list-one
list-two
list-three

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83bde55b6eeb4097aeac2d274db14685~tplv-k3u1fbpfcp-watermark.image) ## 小结是不是很简单，一切都看起来没那么难，这样，你才容易入坑啊。 **篇幅优先，如果star超过 100，再写一篇节点增加和更新的文章。** ## 写在最后写作不易，你的一赞一评就是我前行的最大动力。技术交流群，请加微信 dirge-cloud。 > [Node](https://developer.mozilla.org/zh-CN/docs/Web/API/Node) > [HTMLElement](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement) > [querySelectorAll](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll)