使用querySelectorAll()来选择列表中的第二个元素。

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: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() 的方法。

我希望这对你有一点帮助。

Answer 2

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>