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

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

4.JPG


前言



关于【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="刷新"/>
复制代码


常用的节点查询方法


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


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


  1. getElementsByClassName
    根据元素的classname属性值就行查询。
document.getElementsByClassName("item") // HTMLCollection(3) [li.item, li.item, li.item]
复制代码


  1. getElementsByName
    根源节点的name属性进行查询。
document.getElementsByName("btnSubmit") // NodeList [input]
复制代码


  1. getElementsByTagName
    根据节点标签名进行查询。
document.getElementsByTagName("li") // HTMLCollection(3) [li.item, li.item, li.item]
复制代码


  1. querySelector
    根绝css选择器进行节点查询,返回单个节点。
document.querySelector("#outer") // <div class="outer" id="outer">......
复制代码


  1. querySelectorAll
    根绝css选择器进行节点查询,返回节点列表。
document.querySelectorAll(".item") // NodeList(3) [li.item, li.item, li.item]
复制代码


  1. 在没有querySelectorquerySelectorAll出现之前,基本都是通过前四个查询方法配合 childNodesparentNode方法扩展出各种方法。


一些特殊查询属性


  • 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楼。


1.JPG


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


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

2.JPG


那空白节点,究竟是个什么东西??


看代码,其实就是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> 
复制代码

3.JPG


小结



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

篇幅优先,如果star超过 100, 再写一篇节点增加和更新的文章。


写在最后



写作不易,你的一赞一评就是我前行的最大动力。

技术交流群,请加微信 dirge-cloud。

相关文章
|
19天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于访问 XML 文档中的特定节点。该方法返回一个节点列表,相当于节点数组,可用来遍历和导航节点树。例如,加载 &quot;books.xml&quot; 到 xmlDoc 后,`x = xmlDoc.getElementsByTagName(&quot;book&quot;)` 将获取所有 `&lt;book&gt;` 节点。
|
14天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,即节点数量。通过遍历这个属性,可以访问和处理所有节点。例如,示例代码加载&quot;books.xml&quot;,获取所有&quot;title&quot;节点,并依次输出它们的第一个子节点的值。
|
18天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。在示例中,代码加载&quot;books.xml&quot;,然后通过`getElementsByTagName(&quot;title&quot;)`获取所有标题节点。使用`for`循环遍历这些节点,输出每个标题的文本内容。
|
5天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于获取 XML 文档中指定标签名的所有节点,返回一个节点列表,类似数组。可以循环遍历节点树或利用节点关系导航来访问每个节点。例如,加载 &quot;books.xml&quot; 到 xmlDoc 后,变量 x 存储了所有 `&lt;book&gt;` 节点的列表。
|
1天前
|
XML 存储 JavaScript
XML DOM - 访问节点
DOM 允许访问 XML 文档的每个节点, 主要通过三种方式: 1. 使用 `getElementsByTagName()` 方法; 2. 循环遍历节点树; 3. 利用节点间关系导航。 此方法返回一个节点列表(Node List),实质为节点数组。示例代码加载 &quot;books.xml&quot; 到 `xmlDoc`,并存储结果到变量 `x`。
|
2天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,它加载XML字符串到xmlDoc,然后遍历根元素的所有子节点,打印出节点名及文本值。在浏览器中运行此实例会显示标题、作者和年份等信息。
|
3天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于访问XML文档中的特定节点。节点可按三种方式获取:使用该方法、遍历节点树或导航节点关系。`getElementsByTagName()` 返回一个节点列表,类似数组,可用于处理多个匹配节点。例如,代码加载 &quot;books.xml&quot; 到 `xmlDoc`,再将结果保存到变量 `x`。
|
7天前
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于访问XML文档中的特定节点。节点可按三种方式获取:使用该方法、遍历节点树或导航节点关系。`getElementsByTagName()` 返回一个节点列表,类似数组,可用于处理多个匹配节点。例如,代码加载 &quot;books.xml&quot; 到 `xmlDoc`,再将结果保存到变量 `x`。
|
4天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,它加载XML字符串到`xmlDoc`,遍历根元素的所有子节点,打印出节点名及文本值,如&quot;title: Everyday Italian&quot;等。
|
9天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了XML DOM遍历节点树的概念,通过循环或移动在节点树中操作。示例展示了如何遍历XML文档,提取每个元素的名称和值。代码实例遍历了一个XML结构,输出了`book`元素的子节点信息,如`title`, `author`, `year`及其对应的值。