新的选择器

Posted on In

querySelector()

querySelector 只能选择一组中的第一个元素：

1
2
3
4
5
6
<div class="test">div1</div>
<div class="test">div2</div>

<script>
  document.querySelector(".test").style.color = "red" //只有第一个会变红
</script>

querySelectorAll()

querySelectorAll 获取一组元素：

1
2
3
4
5
6
7
8
9
<div class="test">div1</div>
<div class="test">div2</div>

<script>
  let aDiv = document.querySelectorAll(".test")
  for (let div of aDiv) {
    div.style.color = "red"
  }
</script>

getElementsByClassName()

getElementsByClassName 通过 class name 选择元素：

1
2
3
4
5
6
7
8
9
<div class="test">div1</div>
<div class="test">div2</div>

<script>
  let aDiv = document.getElementsByClassName("test")
  for (let div of aDiv) {
    div.style.color = "red"
  }
</script>

获取 classList 属性

1
2
3
4
5
6
7
8
9
<div id="div1" class="box1 box2 box3"></div>

<script>
  let oDiv = document.getElementById("div1")
  oDiv.classList //[box1, box2, box3]
  oDiv.classList.add("box4") //添加className
  oDiv.classList.remove("box2") //删除className
  oDiv.classList.toggle("box4") //如果有box4，则删除；反之，则添加box4
</script>