Javascript 如何找到刚开始的li元素

我必须创建第一个li元素的数组，但我不确定如何创建

我的html如下所示：

<div class="nav">
<ul>
    <li>Element 1</li>
    <li>Element 2
        <ul>
            <li>Element 2.1</li>
            <li>Element 2.2</li>
            <li>Element 2.3</li>
            <li>Element 2.4</li>
        </ul>
    </li>
    <li>Element 3</li>
    <li>Element 4
        <ul>
            <li>Element 4.1</li>
            <li>Element 4.2</li>
            <li>Element 4.3</li>
            <li>Element 4.4</li>
        </ul>
    </li>
</ul>

您需要将li作为目标，li是ul的子对象，ul是.nav的子对象，因此您需要使用子组合器>：

---

可以使用>，通过引用直接子元素来实现这一点：

const allVisibleElements=document.queryselectoral'.nav>ul>li'； allVisibleElements.forEache=>e.setAttributestyle，背景色：黄色； ul，li{背景色：fff} 要素1 要素2 要素2.1 要素2.2 要素2.3 要素2.4 要素3 要素4 要素4.1 要素4.2 要素4.3 要素4.4

---

只需从Chrome的dev tools部分查看它，右键单击要复制其Js路径的元素。其他答案也是可行的，但获取DOM元素的JS路径的最简单方法是这样的。

document.queryselector所有接受CSS选择器，以便您可以编写use.nav>ul>li

document.queryselectoral.nav>ul>li.forEache=>console.loge 要素1 要素2 要素2.1 要素2.2 要素2.3 要素2.4 要素3 要素4 要素4.1 要素4.2 要素4.3 要素4.4 请尝试：

$('.nav > li:eq(0)').text();

或

或

---

它称为直接子选择器，而不是直接子选择器。根据定义，子女是直系亲属，而不是包括子女、孙子女、曾孙女等在内的后代。对，更新。谢谢，我不记得正确的术语。您的确切需要是单独获取元素1、元素2、元素3、元素4，以便可以像这样使用

const allVisibleElements = document.querySelectorAll('.nav > ul > li');

$('.nav > li:eq(0)').text();

$('.nav > li:first').text();

$( ".nav li:nth-child(1)" ).text();