CSS DOM Traversal优于JavaScript DOM Traversal？

Question

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

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

element.parentNode
element.nextSibling

但是,这种方式非常不直观,因为JavaScript的DOM Tree包含除HTML元素之外的其他内容,这些内容很容易让开发人员感到困惑.

即

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

JavaScript的DOM Tree <div>作为父级和3个子级:

文本节点: \n\t

元素节点: <p>

文本节点: \n

随着HTML文档结构的复杂性增加,这变得越来越难以跟踪,因为并非所有HTML元素都在其他事物之前和之后都有换行符.

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

element.querySelector("CSSselectorHere")

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

只有我能想到JavaScript的DOM树才有用的情况是,如果你试图在下面为文本"cdf"red着色:

在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)

如果是这样,用于CSS的DOM遍历的JavaScript中.querySelector的启动器,是否使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.特别是您不应该修改HTML以便能够使用CSS API.