获取 DOM 元素是前端开发中非常常见的操作。以下是几种常用的方法来获取 DOM 元素,以及它们的适用场景和示例:
1. getElementById
用于获取具有指定 id
属性的元素。
示例
let element = document.getElementById('myId');
2. getElementsByClassName
用于获取具有指定 class
名的所有元素,返回一个动态的 HTMLCollection
。
示例
let elements = document.getElementsByClassName('myClass');
3. getElementsByTagName
用于获取具有指定标签名的所有元素,返回一个动态的 HTMLCollection
。
示例
let elements = document.getElementsByTagName('div');
4. querySelector
用于获取匹配指定 CSS 选择器的第一个元素。
示例
let element = document.querySelector('.myClass');
5. querySelectorAll
用于获取匹配指定 CSS 选择器的所有元素,返回一个 NodeList
。
示例
let elements = document.querySelectorAll('.myClass');
6. getElementsByName
用于获取具有指定 name
属性的所有元素,返回一个 NodeList
。
示例
let elements = document.getElementsByName('myName');
详细示例
以下是一个包含所有上述方法的详细示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get DOM Elements Example</title>
</head>
<body>
<div id="myId">Element with ID</div>
<div class="myClass">First Element with Class</div>
<div class="myClass">Second Element with Class</div>
<p>Paragraph</p>
<p class="myClass">Paragraph with Class</p>
<input type="text" name="myName" value="Input Element">
<script>
// 获取具有指定 ID 的元素
let elementById = document.getElementById('myId');
console.log(elementById); // 输出: <div id="myId">Element with ID</div>
// 获取具有指定类名的所有元素
let elementsByClassName = document.getElementsByClassName('myClass');
console.log(elementsByClassName); // 输出: HTMLCollection(3) [div.myClass, div.myClass, p.myClass]
// 获取具有指定标签名的所有元素
let elementsByTagName = document.getElementsByTagName('p');
console.log(elementsByTagName); // 输出: HTMLCollection(2) [p, p.myClass]
// 获取匹配指定选择器的第一个元素
let elementByQuerySelector = document.querySelector('.myClass');
console.log(elementByQuerySelector); // 输出: <div class="myClass">First Element with Class</div>
// 获取匹配指定选择器的所有元素
let elementsByQuerySelectorAll = document.querySelectorAll('.myClass');
console.log(elementsByQuerySelectorAll); // 输出: NodeList(3) [div.myClass, div.myClass, p.myClass]
// 获取具有指定名称的所有元素
let elementsByName = document.getElementsByName('myName');
console.log(elementsByName); // 输出: NodeList [input[name="myName"]]
</script>
</body>
</html>
使用建议
getElementById
: 适用于获取单个元素时,ID 在文档中应该是唯一的。getElementsByClassName
和getElementsByTagName
: 返回的HTMLCollection
是实时更新的,适合需要动态响应 DOM 变化的情况。querySelector
和querySelectorAll
: 支持复杂的 CSS 选择器,适合需要精确匹配的情况。querySelectorAll
返回的NodeList
是静态的,不会动态更新。getElementsByName
: 常用于表单元素,name
属性在表单中具有特殊意义。