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在div“列表”中的div“items”中的第一个“ul”中选择第一个“li”。

Answer 1

您可以使用getElementById ， getElementsByClassName和getElementsByTagName任意组合。

var divs = document.getElementsByClassName('items');
var uls = divs[0].getElementsByTagName('ul');
var lis = uls[0].getElementsByTagName('lo');
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而不是clunky getElements_而不必处理数组：

var div = document.getElementById('items');  // If the right <div> has an id="items"
var uls = div.getElementsByTagName('ul');
var lis = uls[0].getElementsByTagName('lo'); // 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的解决方案。

Answer 2

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

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

参考文献：

• document.querySelector() ^兼容性 。

Answer 3

你的div通常是<div id="items">或<div id="items" class="items">因为id的div在页面上是唯一的。

然后

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

Answer 4

使用JQuery ，它更容易定位

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

要么

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

参考现场演示

Answer 5

你可以尝试这个<script>$('.items ul li:first').val()</script>