javascript - 如何使用JavaScript选择第二个<LI>元素？

使用JavaScript，如何从中动态更改以下列表项之一:

<ul class="tabbernav">
<li class="tabberactive"><a title="All">All</a></li>
<li class=""><a title="One">One</a></li>
<li class=""><a title="Two">Two</a></li>
<li class=""><a title="Three">Three</a></li>
</ul>

至

<ul class="tabbernav">
<li class="tabberactive"><a title="All">All</a></li>
<li class=""><a title="One">One</a></li>
<li class=""><a title="Two">-----------NEW LIST ITEM CHANGED---------</a></li>
<li class=""><a title="Three">Three</a></li>
</ul>

最佳答案

我猜您可以在ul中使用getElementsByTagName来获取数组中的所有列表项。然后，您可以只编辑数组中的第三个元素，索引号为2。

var lItems = document.getElementsByTagName("ul").getElementsByTagName("li");
lItems[2].innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----</a>";

当然，这将获取页面上的所有ul元素，如果文档中包含两个以上的ul，则可能会导致一些奇怪的结果。但是您知道了，对不对？如果您不明白我要说的话，请问更多。

好的，上面的代码不能真正正常工作。我对代码进行了一些修改，但是其中还包括HTML的更改，因为我假设您只有一个ul“tabbernav”，因此我将其从class="tabbernav"更改为id="tabbernav"。这是执行所需操作的代码。

var ul = document.getElementById("tabbernav");
var liArray = ul.getElementsByTagName("li");

for (var i = 0; i < liArray.length; i++) {
    if(liArray[i].childNodes[0].title == "Two") {
        liArray[i].innerHTML = "Your desired output";
    }
}

希望对您有所帮助:)