Question

最近，我开始学习HTML和JS。当我使用document.querySelectorAll() API时，我看到它可以使用

document.querySelectorAll('#example-container li:first-child');

选择ID名称为example-container的列表的第一个子代。

所以我想可能是

document.querySelectorAll('#example-container li:second-child');

可以选择ID名称为example-container的列表的第二个子项。

但是显然这是错误的。所以我很困惑如何使用querySelectorAll()访问列表的第二或第三项？

我在下面发布了HTML代码：

<div id="example-container">
  <ul>
    <li class="feature">Luxurious sized master suite</li>
    <li class="feature">Oversized walk-in closet</li>
    <li class="feature">Frameless Beech cabinetry with concealed hinges</li>
    <li class="feature">Elegant slab white quartz countertops with large backsplash</li>
    <li class="feature">Dual china sinks with Moen faucets</li>
    <li class="feature">Clear frameless shower enclosures</li>
</ul>

Answer 1

document.querySelectorAll('#example-container li')返回一个集合，其中包含li中的所有example-container个节点。

这就像数组，因此您可以对其进行迭代。

document.querySelectorAll('#example-container li')[index]

console.log(document.querySelectorAll('#example-container li')[1])
//its second

<div id="example-container">
<img src="img/coded-homes-logo-sm.png"
         class="img-responsive" />
<img src="img/home.jpg"
         class="thumbnail img-responsive push-down-top" />
<section class="description">
    <p class="h5">Five bedrooms, three full baths and 3,702 square feet of living space.</p>
    <p>Extra-tall double-door entry opens to an inviting and spacious foyer. Formal living and dining rooms featuring see through fireplace.</p>
    <p>Large gourmet kitchen with granite countertops, stainless steel appliances with double ovens. Arrow shaped center island, huge, walk in pantry and lots of cabinets for storage. Large eating area off the kitchen for the family to enjoy meals together.</p> 
    <p>The front bedroom with full bathroom just outside the door. Huge family room with recessed entertainment area complete with recessed lighting and ceiling fan. The huge master suite features a soaker tub, large shower, walk-in closet and an additional over-sized walk-in closet. The master bath features split sinks with granite countertops. 3 large, secondary bedrooms and large bathroom that is great for kids to share.</p>
    <p>Also includes: 3 car garage, high ceilings throughout, wired for spa in backyard, dual pane windows, new tile and carpet on bottom floor and large, upstairs laundry room. Nicely landscaped backyard with the best views in the Temescal Valley.</p>
</section>
<h2 class="h4">Features</h2>
<ul>
    <li class="feature">First</li>
    <li class="feature">Second</li>
    <li class="feature">Frameless Beech cabinetry with concealed hinges</li>
    <li class="feature">Elegant slab white quartz countertops with large backsplash</li>
    <li class="feature">Dual china sinks with Moen faucets</li>
    <li class="feature">Clear frameless shower enclosures</li>
</ul>

Answer 2

由于您要问如何使用查询选择器（例如document.querySelectorAll('#example-container li:second-child')）选择第二个或第三个元素，因此，我将告诉您如何使用css选择器和document.querySelectorAll()来选择它们。

您可以使用：

const el = document.querySelectorAll('#example-container li')[1];

以选择列表中的第二个元素。这可能是用JavaScript的首选方式。

但是css有一个叫做:nth-child()的东西，它允许您在列表中选择一个特定的孩子。在JS中，您可以执行以下操作：

const el = document.querySelector(#example-container li:nth-child(2));

选择第二个列表项。请注意，您不需要querySelectorAll()方法。

我希望能有所帮助。

使用querySelectorAll（）选择列表的第二个元素

2 个答案: