CSS DOM Traversal 优于 JavaScript DOM Traversal？答案

【问题标题】：CSS DOM Traversal superior than JavaScript DOM Traversal?CSS DOM Traversal 优于 JavaScript DOM Traversal？
【发布时间】：2016-10-18 21:59:19
【问题描述】：

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

在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 遍历设置 span 样式。（假设我们只使用遍历方法，没有 id）

如果是这样，JavaScript 中 CSS 的 DOM 遍历的推动者 .querySelector 是否会制作 JavaScript 自己的内置 - DOM 中的遍历方法过时了？

【问题讨论】：

这是作业题吗？我真的不明白这里的问题是什么......这似乎更像是一种意见。
@Hexxagonal 不，我刚刚阅读了有关 DOM 的一章，我想知道是否可以记住 .querySelector 如果没有它不起作用的边缘情况。我解释了很多，所以人们知道我来自哪里。
@NoName 在大多数情况下，是的，去吧。它为您提供了更清晰的代码。这就是 jQuery 多年前起飞的原因，并且 querySelector 在现代浏览器中得到了不错的支持。
@NoName: 没有什么能阻止你在 JavaScript 和 CSS 的需要时使用容器元素，如 span 和 div，因为它们没有语义价值，因此不会改变你的含义文档，但在 HTML 的上下文中，这完全是不必要的。
@NoName：您可以在事后将跨度添加到 HTML。但是，仅将它放在 HTML 中并不是语义上的不正确。我可能在“更好的实践”方面吹毛求疵……

标签： javascript dom css-selectors traversal

【解决方案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 API。

【讨论】：

我以为我永远不会看到有人提到NonDocumentTypeChildNode，哎呀。