使用querySelectorAll()选择列表的第二个元素
最近我开始学习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>
回答 2
Stack Overflow用户
发布于 2020-06-05 05:43:47
由于您正在询问如何使用查询选择器(如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()方法。
我希望这会有一点帮助。
Stack Overflow用户
发布于 2020-06-05 05:15:42
document.querySelectorAll('#example-container li')返回一个包含example-container中所有li节点的集合。
它类似于数组，所以你可以迭代它。
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>
https://stackoverflow.com/questions/62203891
复制相似问题
腾讯云开发者
