Question

我知道如何使用querySelector，id等获取元素。但是如何遍历多个元素然后选择一个元素。以下片段将说明我愿意实现的目标。

我希望通过课程p遍历example并申请一些css

＆＃13;

function myFunction() {
    //document.querySelector(".example").style.backgroundColor = "red";
    document.querySelector(".example p").style.backgroundColor = "red";
}

＆＃13;

<!DOCTYPE html>
<html>
<body>

  <div class="example">

    <p>Hello lovely people</p>
    <p>Hello lovely people</p>
    <p>Hello lovely people</p>
  </div>

  <button onclick="myFunction()">Try it</button>

</body>
</html>

＆＃13;

Answer 1

对于您在评论中提出的问题：

如果p中有.example，并且您希望在点击按钮时更改所有这些内容，则可以将功能更改为：

function myFunction() {
  var element = document.querySelectorAll('.example p');
  for(i = 0; i <= element.length; i++) {
    element[i].style.backgroundColor = 'red';
  }
}

'旧'问题

您可以使用+中的querySelector CSS选择器。

制作

document.querySelector(".example + p").style.backgroundColor = "red";

function myFunction() {
    document.querySelector(".example + p").style.backgroundColor = "red";
}

<!DOCTYPE html>
<html>
<body>

<h2 class="example">Dont be a racist hate everyone.</h2> 

<p>Hello lovely people</p> <!-- This element I wish to make red -->

<button onclick="myFunction()">Try it</button>

</body>
</html>

Answer 2

您可以使用＆＃39; TreeWalker＆＃39;。它根据提供的过滤器遍历所有节点。

<script type="text/javascript">
    var walker = document.createTreeWalker(
        document.body, window.NodeFilter.SHOW_ELEMENT, null, false
    ),currentNode;

    currentNode = walker.nextNode();
    while (currentNode !== null) {
        currentNode.style.backgroundColor = 'red';
        currentNode = walker.nextNode();
    }
</script>

上面的例子只是遍历document.body中的所有颂歌并将背景颜色应用为红色。但请确保从父节点遍历。在您的情况下，您可以将＆＃39; .example＆＃39;和＆＃39; p＆＃39;在一个＆＃39; div里面和遍历

<div class="container>
   <h2 class="example">Dont be a racist hate everyone.</h2> 
   <p>Hello lovely people</p> 
</div>

并将walker设置为此容器节点

 var walker = document.createTreeWalker(
        document.querySelector('.container'), window.NodeFilter.SHOW_ELEMENT, null, false
    )

Answer 3

如果你想在元素之后使用＆＃34;示例＆＃34;上课，使用＆＃34; +＆＃34;在班级和p之间。

＆＃13;

function myFunction() {
    document.querySelector(".example+p").style.backgroundColor = "red";
}

＆＃13;

<!DOCTYPE html>
<html>
<body>

<h2 class="example">Dont be a racist hate everyone.</h2> 

<p>Hello lovely people</p> <!-- This element I wish to make red -->

<button onclick="myFunction()">Try it</button>

</body>
</html>

＆＃13;

Answer 4

此代码也可以使用。（点）在班级名称之前。

document.querySelector("p.example").style.backgroundColor = "red";

选择器列表@ List of CSS Selectors

如何选择元素的多个子元素

4 个答案:

'旧'问题