javascript - javascript の childNode の ChilNode のツリー

Question

私はこの単純なhtmlを持っています:

<div id="tree">
    <div class="roi">
        <ul>
            <li>text1</li>
            <li>text2</li>
            <li>text3
                <ul>
                    <li>insideText1<li>
                    <li>insideText2<li>
                </ul>
            </li>
        </ul>
    </div>
</div>

アイテム「text2」とアイテム「insideText2」のみを取得したい。だから私は書いてみました：

var Tree=document.getElementById("tree").document.getElementsByTagName("UL");

liしかし、 「text2」と「insideText2」を含む特定に到達する方法がわかりません。助けてください。ありがとう。

Answer 1

JQueryを想定

//text2
alert($('div#tree ul > li:eq(1)').text())

//insideText2
alert($('div#tree ul > li > ul li:eq(1)').text())​

Answer 2

「text2」liにアクセスする場合は、次を使用します。

document.getElementsByTagName('li')[1]

アイテム「insideText2」は

document.getElementsByTagName('li')[2].getElementsByTagName('li')[1]

Answer 3

ドキュメント オブジェクトは 1 つしかないため、ほぼ完成ですvar Tree=document.getElementById("tree").document.getElementsByTagName("UL");。2 番目のオブジェクトを削除してdocumentください。

var Tree=document.getElementById("tree").getElementsByTagName('ul');

このページのクロムコンソールで試してみました

document.getElementById('question').getElementsByTagName('td');

魔法のように働いた

アップデート

簡単です...getElementsByTagName()メソッドは nodeList を返します (これは単なる古い配列ではありません)。上記のコードはul、「ul」タグを持つ要素内のすべての要素のリストを提供します。ulリスト内のすべてのタグをループしてli、順序付けされていないリストまたは特定の innerText/innerHTML を含む子をチェックすることができます。簡単な例をすぐに説明します。

実際の例については、この jsfiddleを確認してください。好きなだけ遊んでみてください。まだ完全に理解できないことがあれば教えてください...乾杯