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

I have the following HTML:

我有以下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>

Now I want to select the First "li" in the first "ul" in the div "items" in the div "list" via Javascript.

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

5 个解决方案

#1

You can use any combination of getElementById, getElementsByClassName and getElementsByTagName.

您可以使用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"

It is easier if you give some elements an id, then you can use an getElementById instead of the clunky getElements_ and don't have to deal with arrays:

如果你给一些元素一个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

The easiest solution is probably to use a library like jQuery, in which you can do this with selectors:

最简单的解决方案可能是使用像jQuery这样的库,您可以使用选择器执行此操作:

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

edit: I'd recommend David Thomas's solution if you can't use jQuery and have no problem with excluding older browsers (mainly IE7 or lower).

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

#2

If you're targeting modern browsers, I'd suggest:

如果你的目标是现代浏览器,我建议:

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

References:

document.querySelector() ^{compatibility}.

#3

your div would normally be <div id="items"> or <div id="items" class="items"> since a div with id is unique on a page.

你的div通常是

或

因为id的div在页面上是唯一的。

Then

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

#4

Using JQuery, it's more easy to target

使用JQuery,它更容易定位

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

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

Refer LIVE DEMO

参考现场演示

#5

-2

you can try this <script>$('.items ul li:first').val()</script>

你可以尝试这个

#1