JavaScript-对象中的搜索元素

Question

说我有一个ul的班级名称＆＃39; images＆＃39;包含各种li个对象。我有一个使用

的JS变量指向的列表

var list = document.GetElementsByClassName("images")[0]; //single 'images' exist in document

如何搜索li指向的列表中的所有var list个元素？在互联网上搜索了这个 -

var list = document.getElementsByClassName("images")[0];
var list = *!*element.*/!*getElementsByTagName("li"); // getting syntax error at this line

如果没有jQuery，有没有办法做到这一点？

Answer 1

使用querySelectorAll

访问DOM节点时，您可以使用现在非常常见的querySelectorAll。

给定一个假定的html结构：

<ul class="images">
  <li>Bob Thorton</li>
  <li>Joe Biden</li>
  <li>Tom <strong>Yorke</strong></li>
</ul>

你的JavaScript是：

// Query for the item
var items = document.querySelectorAll('.images li strong');

// Do what you need to do
// Note that items is an array so we access the first result [0]
items[0].style.color = '#f00';

请注意，querySelectorAll会返回类似于数组的NodeList。在上面的示例中，我们将列表视为一个数组，并仅将第一个DOM元素提取为红色。

演示

这是demo。