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

标签 javascript html select

我有以下 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“项目”中的第一个“ul”中选择第一个“li”。

最佳答案

您可以使用 getElementByIdgetElementsByClassNamegetElementsByTagName 的任意组合。

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 的解决方案。

关于Javascript - 选择元素的子元素的第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21406644/

相关文章:

select - 如何从 Coldfusion 中的查询中选择特定记录?

javascript - 如何在 Vue 中的 v-for 列表项中切换两个图标

javascript - 当隐藏的 div 可见时滚动到内容

javascript - jquery 事件绑定(bind)的奇怪行为

html - 如何在 HTML 选择中添加选项组?

html - 在网格中平均分配固定宽度的 div

arrays - 从值范围内的 influxdb 记录中选择

MySQL 使用 select 和 if else 更新列

在nodejs中传递javascript消息

javascript - 传单中带有 geoJson 文件的 Font Awesome 图标