2

私は DOM を徹底的に理解することに取り組んできました。現在、私は DOM ツリーをたどっていますが、いくつかの矛盾を見つけているようです。

  • nodeList では、インデックスを使用してリストを反復処理できます
  • HTMLElement ではインデックスを使用できません

例については、このフィドルを参照してください: http://jsfiddle.net/AmhVk/4/

問題は、nodeList には element[0]、element 1のようなインデックス可能なリストがあり、HTMLElement にはないのはなぜですか?

誰かが私にこれを非常に徹底的に説明できますか? どうも...

<ul id="jow">
    <li><a href="">Item</a></li>    
    <li><a href="">Item</a></li>
    <li class="active"><a href="">Item</a></li> 
    <li class="active"><a href="">Item</a></li> 
    <li><a href="">Item</a></li>
    <li><a href="">Item</a></li>
</ul>

<div id="ieps"></div>

function simple(){

    var li = document.querySelectorAll(".active");
    var ul = li[0].parentNode;
    var getULchild = ul.children[0];

    var ieps = document.getElementById("ieps");

    ieps.innerHTML += "ul will return = " + ul + "<br>";
    ieps.innerHTML += "li will return = " + li + "<br><br>";        

    ieps.innerHTML += "ul[0] will return: " + ul[0] + "<br>";
    ieps.innerHTML += "li[0] will return: " + li[0] + "<br><br>";

}

また、フィドルで、クラス「アクティブ」を含むliの1つを削除すると。これは、単一の HTMLElement ではなく nodeList を返します: jsfiddle.net/AmhVk/5

4

1 に答える 1

3

だから私はいくつかの調査を行い、ドキュメントツリーをトラバースするときにDOMが返すオブジェクトを完全に理解しました。ネット上で本当の答えが見つからなかったので、自分の質問に答えます。これが他の誰かにも役立つことを願っています.

要素ノードの取得

これらのオプションのいずれかを使用して要素ノードを取得できます。HTMLElementこれは、またはのいずれかを返しnodeListます。

要素ノードを取得するメソッド:

  • HTMLElementdocument.getElementById()
  • HTMLCollectiondocument.getElementsByTagName()
  • nodeListdocument.getElementsByName()
  • nodeListdocument.getElementsByClassName()
  • HTMLElementdocument.querySelector()
  • nodeListdocument.querySelectorAll()

nodeList と HTMLElement

  • nodeList1 or more要素を含めることができます
  • HTMLElementonly 1要素を含めることができます

それらは、あなたがそれらを扱う方法が異なります。nodeList では、リスト nodeList[2] 内の項目を取得するために、インデックス値で括弧 [] を使用する必要があります。一方、HTMLElement を使用すると、アイテム自体を操作できます。

例

var linkClass = document.getElementsByClassName(".active");
var linkID = document.getElementById("id");

var parentFromLinkClass = linkClass[0].parentElement;
var parentFromLink = linkID.parentElement;

document.write(linkClass[0]); //returns the url of the link
document.write(linkID); //returns the url of the link

document.write(parentFromLinkClass); //HTMLLIElement (not a nodeList)
document.write(parentFromLink); //HTMLLIElement (not a nodeList)
  • linkClassnodeList selector function(getElementsByClassName)を使用して要素を選択します
  • linkIDsingle element selector function(getElementByID)を使用して要素を選択します

DOM セマンティクス

DOM のセマンティクスには、返されるオブジェクトの型を伝える非常に微妙な方法があります。返されるオブジェクトのタイプは、「最大」選択できる要素の数に依存することに注意してください。

  • getElementsByClassName - Element の複数形 (Elements) -returns nodeList
  • getElementByID - Element の単一形または名詞 -returns HTMLElement
  • querySelectorAll - 「すべて」を選択 -returns nodeList
  • querySelector - 「単一」を選択 -returns HTMLElement
  • linkID.parentElement - Element の単一形または名詞 -returns HTMLElement

必要に応じてこの回答を更新します...

于 2013-10-01T10:18:49.997 に答える