全面解析JS DOM查找元素的技巧

1. 通过ID查找元素：getElementById()

getElementById()方法通过元素的ID属性查找元素。该方法接受一个字符串参数，该参数指定要查找的元素的ID。如果找到匹配的元素，则该方法返回该元素；否则，返回null。

<div id="myElement">Hello World!</div>

<script>
  // 获取具有ID为"myElement"的元素
  var element = document.getElementById("myElement");

  // 检查元素是否为null
  if (element) {
    // 如果元素存在，则对其进行操作
    element.style.color = "red";
  }
</script>

2. 通过标签名查找元素：getElementsByTagName()

getElementsByTagName()方法通过标签名查找元素。该方法接受一个字符串参数，该参数指定要查找的元素的标签名。如果找到匹配的元素，则该方法返回一个包含这些元素的NodeList对象；否则，返回一个空NodeList对象。

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

<script>
  // 获取所有具有标签名"p"的元素
  var elements = document.getElementsByTagName("p");

  // 循环遍历NodeList对象并对其进行操作
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = "blue";
  }
</script>

3. 通过类名查找元素：getElementsByClassName()

getElementsByClassName()方法通过类名查找元素。该方法接受一个字符串参数，该参数指定要查找的元素的类名。如果找到匹配的元素，则该方法返回一个包含这些元素的NodeList对象；否则，返回一个空NodeList对象。

<div>
  <p class="my-class">Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

<script>
  // 获取所有具有类名"my-class"的元素
  var elements = document.getElementsByClassName("my-class");

  // 循环遍历NodeList对象并对其进行操作
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = "green";
  }
</script>

4. 通过选择器查找元素：querySelector()和querySelectorAll()

querySelector()和querySelectorAll()方法通过CSS选择器查找元素。querySelector()方法返回匹配第一个选择器的元素，而querySelectorAll()方法返回匹配所有选择器的元素。

<div>
  <p id="my-id">Paragraph 1</p>
  <p class="my-class">Paragraph 2</p>
</div>

<script>
  // 获取具有ID为"my-id"的元素
  var element = document.querySelector("#my-id");

  // 获取所有具有类名"my-class"的元素
  var elements = document.querySelectorAll(".my-class");

  // 对元素进行操作
  element.style.color = "red";
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = "blue";
  }
</script>

5. 总结

在本文中，我们介绍了JS DOM中查找元素的各种方法，包括getElementById()、getElementsByTagName()、getElementsByClassName()、querySelector()和querySelectorAll()。通过学习这些方法，您将能够轻松地操作页面上的元素，创建更加交互式和动态的网页应用程序。