CSSDOM遍历优于JavaScriptDOM遍历？

Question

JavaScript 和 CSS 在遍历 HTML个元素。

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

element.parentNode
element.nextSibling

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

即

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

JavaScript 的 DOM 树有 <div> 作为父项和 3 个子项：

文本节点：\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 遍历来设置跨度样式。（假设我们只使用遍历方法，没有 id）

如果是，.querySelector 是否是 JavaScript 中 CSS 的促成因素' s DOM遍历，让JavaScript自带的DOM遍历方法过时了？

Answer 1

没有。 CSS 更受限制，因为它只能 select 个元素（和伪元素，但不能通过 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 API。

CSSDOM遍历优于JavaScriptDOM遍历？

CSS DOM Traversal superior than JavaScript DOM Traversal?

javascript

dom

traversal

css-selectors