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

只有一个文档对象，所以你几乎就在那里var Tree=document.getElementById("tree").document.getElementsByTagName("UL");，只需放下第二个document：

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

在此页面上的 chrome 控制台中尝试过

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

像魅力一样工作

更新

这很容易......该getElementsByTagName()方法返回一个 nodeList （不仅仅是任何旧数组）。上面的代码提供了ul元素中具有“ul”标签的所有元素的列表。您可以遍历ul列表中的所有标签，并检查li包含无序列表或某个 innerText/innerHTML 的子项。我会在一分钟内为你举一个简单的例子。

检查这个 jsfiddle以获得一个工作示例。随心所欲地玩它，让我知道是否还有一些你不完全清楚的东西......干杯

Answer 3

如果您想访问“text2” li，请使用：

document.getElementsByTagName('li')[1]

并且项目“insideText2”将是

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