CSS DOM JavaScript DOM Traversalよりも優れたトラバーサル？

Question

JavaScriptおよびCSSは、HTML要素を通過するときにそれぞれ独自のDOMツリーを使用します。 で

はJavaScript、私たちは、このような

​​3210

として、独自のDOMのトラバーサルメソッドを使用することができますJavaScriptののDOMツリーがどのできるHTML要素以外のものが含まれているためしかし、この方法は非常に直感的です開発者にとって混乱しやすい。

テキストノード：\n\t

要素ノード：<p>

テキストノード

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

はJavaScriptのDOMツリーIEは親として<div>と3人の子供を持っています：\n

HTML文書の構造が複雑になるにつれて、これを追跡するのがますます困難になります。なぜなら、すべてのHTML要素が他のものの前後に改行を持つわけではないからです。 sのDOMツリーが唯一のHTML要素が含まれ、それが実現することがはるかに容易になります：

ありがたいことに、のJavaScriptは、私たちは 'CSSので

element.querySelector("CSSselectorHere") 

を使用してのDOMのトラバーサル' CSSを使用することができます。次のテキスト 『CDF』赤に色をしようとしている場合

だけ私はJavaScriptののDOMツリーが有利であろう場所を考えることができた場合は、次のとおりです。HTMLで

：

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

JavaScriptの で

：

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

HTしかし、より良いではないでしょうMLの練習はちょうどそうユニークなテキストを囲むことですか？

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

したがって、CSSのDOMのトラバーサルを使用してスパンのスタイリングが可能です。

ので、.querySelector、CSSためでイネーブラのJavaScriptない場合（無IDS、我々は唯一のトラバーサルメソッドを使用していると仮定していない） "にする、の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を変更しないでください。