CSS DOM遍历优于JavaScript DOM遍历？

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

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

element.parentNode
element.nextSibling

然而，这种方式非常不直观，因为JavaScript的DOM树包含HTML元素以外的内容，这对于开发人员来说很容易搞乱

i、 e

由于CSS的DOM树只包含HTML元素，因此更容易实现

我唯一能想到的情况是，如果您试图将文本“cdf”涂成红色，那么JavaScript的DOM树将是有利的：

在HTML中：

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

然而，一个更好的HTML实践不是仅仅像这样封闭唯一的文本吗

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

abc cdf

因此，可以使用CSS的DOM遍历设置span的样式。（假设我们只使用遍历方法，没有ID）

---

如果是这样的话，

.querySelector

，JavaScript中用于CSS的DOM遍历的启用码，是否会使JavaScript自己内置的DOM遍历方法过时

否。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

---

所以你不需要cssapi来做类似的事情。尤其是你不应该修改你的HTML来使用CSS API。

这是一个家庭作业问题吗？我真的不明白这里的问题是什么。。。这似乎更像是一种观点。@Hexxagonal不，我刚刚读了一章关于DOM的内容，我想知道我是否能记住它。如果没有边缘案例，它就不起作用。我解释了很多，这样人们就知道我从哪里来。@NoName在大多数情况下，是的，去吧。它为您提供了更清晰的代码。这就是jQuery这么多年前开始流行的原因，querySelector在现代浏览器中得到了相当好的支持。@NoName：没有任何东西可以阻止您在JavaScript和CSS中使用span和div等容器元素，因为它们没有语义值，因此不会改变文档的含义，但是在HTML的上下文中，这显然是不必要的。@NoName：您可以在事实发生后将跨度添加到HTML中。但是仅仅将它放在HTML中并不是语义上的错误。我可能在“更好的实践”方面吹毛求疵……我想我从来没见过有人提到

非文档类型childnode

，哎呀。

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

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

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