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“list”的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代替笨重的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() ^{compatibility}。

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")

OR

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

参考 LIVE DEMO

Answer 5

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

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

5 个答案: