CSS遍历优于JavaScript DOM遍历？

Question

JavaScript和CSS在遍历HTML元素时都使用自己的DOM树。

在JavaScript中，我们可以使用它自己的DOM遍历方法，例如

element.parentNode
element.nextSibling

但是，这种方式是非常不直观的，因为JavaScript的DOM树包含了一些东西，而不是HTML元素，对于开发人员来说，这些元素很容易搞砸。

即

<div>
     <p>
     </p>
</div>

JavaScript's DOM Tree以<div>作为父级和3个子级：

文本节点：\n\t

元素节点：<p>

文本节点：\n

随着HTML文档结构的复杂性增加，这变得越来越难以跟踪，因为并不是所有HTML元素都有一个换行符。

幸运的是，JavaScript允许我们使用CSS的DOM遍历：

element.querySelector("CSSselectorHere")

由于CSS的DOM树只包含HTML元素，因此实现起来要容易得多。

只有我能想到的情况是，如果您试图将文本"cdf“涂成红色，那么JavaScript's DOM树将具有优势：

在HTML中：

<p> abc <a href="...">link</a> cdf </p>

在JavaScript

pElementVariable.firstChild.nextSibling.nextSibling.classList.add("CSSclassRed");

然而，一个更好的HTML实践难道不是像这样把唯一的文本括起来吗？

<p> abc <a href="...">link</a> <span>cdf</span> </p>

因此，使用CSS的DOM遍历来设置跨的样式是可能的。(假设我们只使用遍历方法，不使用is )

如果是这样的话，.querySelector是JavaScript for CSS的DOM遍历中的一种工具，它会使.querySelector自己的内置DOM遍历方法过时吗？

Answer 1

不是的。CSS是比较有限的，因为它只能选择元素(和伪元素，但不能通过querySelector，但这可能会改变)。

使用DOM，您可以遍历树中的任意节点。这更有力。如果要限制元素，可以：

node.childNodes; // All child nodes
parentNode.children; // Only element child nodes

node.firstChild; // First node child
parentNode.firstElementChild; // First element child

node.lastChild; // Last node child
parentNode.lastElementChild; // Last element child

node.previousSibling; // The previous sibling node
nonDoctypeChildNode.previousElementSibling; // The previous sibling element

node.nextSibling; // The next sibling node
nonDoctypeChildNode.nextElementSibling; // The next sibling element

node.parentNode; // The parent node
node.parentElement; // The parent node, only if it's an element

因此，您不需要CSS API来实现这种功能。特别是，您不应该修改HTML以使其能够使用CSS。