javascript - CSS DOM Traversal 优于 JavaScript DOM Traversal？

Question

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

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

element.parentNode
element.nextSibling

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

即

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

JavaScript 的 DOM 树有 <div>作为 parent 和 3 个 child :

文本节点:\n\t

元素节点:<p>

文本节点:\n

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

值得庆幸的是，JavaScript 允许我们使用 CSS 的 DOM 遍历:

element.querySelector("CSSselectorHere")

由于 CSS 的 DOM 树只包含 HTML 元素，这使得它更容易实现。

只有我能想到 JavaScript 的 DOM 树在哪里有优势的情况是，如果您尝试将以下文本“cdf”着色为红色:

在 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 遍历来设计 span 的样式。 (假设我们只使用遍历方法，没有 id)

如果是，.querySelector ，JavaScript 中用于CSS 的 DOM 遍历的启动器，是否会使 JavaScript 自己的内置 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 来做那样的事情。特别是，您不应该为了能够使用 CSS API 而修改 HTML。