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而不是笨重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() ^兼容性。