极客笔记JS 查找元素
在网页开发中，经常需要使用 JavaScript 来操作 DOM 元素，包括查找、添加、删除、修改等操作。查找元素是其中一个最基础、最常用的操作之一。在本文中，我们将详细介绍在 JavaScript 中如何查找元素。
通过 ID 查找元素
通过 ID 查找元素是最常用的一种方式。每个元素在页面中都可以设置一个唯一的 ID，通过这个 ID 可以快速准确地找到对应的元素。
<!DOCTYPE html>
<html>
<head>
<title>通过 ID 查找元素</title>
</head>
<body>
<div id="myDiv">这是一个 div 元素</div>
<script>
// 通过 getElementById 方法获取元素
let myDiv = document.getElementById('myDiv');
console.log(myDiv);
</script>
</body>
</html>
上面的示例代码中，我们通过 getElementById 方法获取了 ID 为 myDiv 的 div 元素，然后将获取的元素输出到控制台中，运行结果如下：
<div id="myDiv">这是一个 div 元素</div>
通过类名查找元素
除了通过 ID 查找元素，我们还可以通过类名来查找元素。使用 getElementsByClassName 方法可以获取所有拥有特定类名的元素，返回的是一个类数组（HTMLCollection）。
<!DOCTYPE html>
<html>
<head>
<title>通过类名查找元素</title>
</head>
<body>
<div class="myClass">这是一个 div 元素</div>
<div class="myClass">这是另一个 div 元素</div>
<script>
// 通过 getElementsByClassName 方法获取元素
let myDivs = document.getElementsByClassName('myClass');
console.log(myDivs);
</script>
</body>
</html>
上面的示例代码中，我们通过 getElementsByClassName 方法获取了类名为 myClass 的所有 div 元素，然后将获取的元素输出到控制台中，运行结果如下：
HTMLCollection(2) [div.myClass, div.myClass]
通过标签名查找元素
如果想要获取所有特定标签名的元素，可以使用 getElementsByTagName 方法。这个方法返回的也是一个类数组（HTMLCollection）。
<!DOCTYPE html>
<html>
<head>
<title>通过标签名查找元素</title>
</head>
<body>
<div>这是一个 div 元素</div>
<div>这是另一个 div 元素</div>
<script>
// 通过 getElementsByTagName 方法获取元素
let divs = document.getElementsByTagName('div');
console.log(divs);
</script>
</body>
</html>
上面的示例代码中，我们通过 getElementsByTagName 方法获取了所有的 div 元素，然后将获取的元素输出到控制台中，运行结果如下：
HTMLCollection(2) [div, div]
通过选择器查找元素
除了上述三种查找元素的方式，还可以使用选择器（querySelector 和 querySelectorAll）来查找元素。这种方式更为灵活，可以通过 CSS 选择器来定位元素。
<!DOCTYPE html>
<html>
<head>
<title>通过选择器查找元素</title>
</head>
<body>
<div id="myDiv">这是一个 div 元素</div>
<div class="myClass">这是一个 div 元素</div>
<div class="myClass">这是另一个 div 元素</div>
<p>这是一个 p 元素</p>
<script>
// 通过 querySelector 方法获取元素
let myDiv = document.querySelector('#myDiv');
console.log(myDiv);
// 通过 querySelectorAll 方法获取元素
let myClasses = document.querySelectorAll('.myClass');
console.log(myClasses);
</script>
</body>
</html>
上面的示例代码中，我们通过 querySelector 方法获取了 ID 为 myDiv 的 div 元素，通过 querySelectorAll 方法获取了类名为 myClass 的所有 div 元素，并将获取的元素输出到控制台中，运行结果如下：
<div id="myDiv">这是一个 div 元素</div>
NodeList(2) [div.myClass, div.myClass]
总结
通过本文的介绍，我们了解了在 JavaScript 中查找元素的几种常用方式：通过 ID、类名、标签名以及选择器。这些方法在实际开发中经常会用到，对于操作页面元素十分方便。当然，在实际开发中，我们还可以结合这些方法灵活运用，以满足不同的需求。