Javascript - 选择元素的子元素的第一个子元素

Question

我有以下的HTML：

<div class="list">
<div class="items">
    <ul>
        <li>IMPORTANT</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
    <ul>
        ...
    </ul>
</div>

现在我希望通过Javascript选择“list” div中“items” div中第一个“ul”中的第一个“li”。

- Lumnezia

---

浏览器兼容性如何？ - David Thomas

Answer 1

您可以使用任何组合的getElementById、getElementsByClassName和getElementsByTagName来实现。

var divs = document.getElementsByClassName('items');
var uls = divs[0].getElementsByTagName('ul');
var lis = uls[0].getElementsByTagName('li');
var li = lis[0];
//// li is now the first list element of the first list inside the first div with the class "items"

如果您为某些元素指定了id，那么使用getElementById会更容易，而不是使用笨重的getElements_并且不必处理数组：

var div = document.getElementById('items');  // If the right <div> has an id="items"
var uls = div.getElementsByTagName('ul');
var lis = uls[0].getElementsByTagName('li'); // Or instead of uls[0] give the right ul and id
var li = lis[0];                             // Or instead of lis[0] give the right li and id

最简单的解决方案可能是使用像jQuery这样的库，在其中您可以使用选择器进行以下操作:

var li = $('div.items:first ul:first li:first');

编辑： 如果您不能使用jQuery并且没有排除旧版浏览器（主要是IE7或更低版本）的问题，我建议使用David Thomas的解决方案。

- dtech

---

该 div 具有项目类，而不是项目 ID。 - scott.korin

错过了，我已经修复了。 - dtech

Answer 2

如果你的目标是现代浏览器，我建议：

var importantLi = document.querySelector('.list .items li');

参考文献:

• document.querySelector() ^兼容性。

- David Thomas

Answer 3

您的div通常应该是<div id="items">或<div id="items" class="items">, 因为带有ID的div在页面上是唯一的。

然后，

firstLi = document.getElementById("items").firstChild.firstChild;

- Alexander

Answer 4

使用 JQuery，更容易定位目标

$(".list .items ul:first li:first")

或者

$("div.list div.items ul li").first()

请参考在线演示

- Siva Charan

Answer 5

您可以尝试使用以下代码：<script>$('.items ul li:first').val()</script>

- mrakodol