# DOM中如何獲取元素
## 引言
文檔對象模型（Document Object Model，簡稱DOM）是HTML和XML文檔的編程接口。在Web開發中，我們經常需要通過JavaScript操作DOM元素，而獲取元素是進行任何DOM操作的第一步。本文將詳細介紹在DOM中獲取元素的各種方法，包括傳統方法、現代API以及它們的性能比較和使用場景。
---
## 1. 傳統DOM獲取方法
### 1.1 getElementById
`getElementById`是最常用的獲取元素方法之一，通過元素的`id`屬性來獲取單個元素。
```javascript
const element = document.getElementById('myId');
特點：
- 返回匹配ID的第一個元素（因為ID應該是唯一的）
- 性能最優的DOM查詢方法之一
- 僅存在于document對象上
通過類名獲取元素集合，返回一個HTMLCollection。
const elements = document.getElementsByClassName('myClass');
特點： - 返回的是動態集合（DOM變化會實時反映） - 可以在特定元素上調用 - 大小寫敏感
通過標簽名獲取元素集合，同樣返回HTMLCollection。
const divs = document.getElementsByTagName('div');
特點：
- 支持通配符*獲取所有元素
- 動態集合
- 可以在任意元素節點上調用
通過name屬性獲取元素集合，返回NodeList。
const inputs = document.getElementsByName('username');
特點：
- 主要用于表單元素
- 返回的是NodeList而非HTMLCollection
使用CSS選擇器獲取匹配的第一個元素。
const el = document.querySelector('.container > p.highlight');
優勢： - 支持所有CSS選擇器語法 - 可以在任意元素上調用 - 返回靜態結果（非動態集合）
使用CSS選擇器獲取所有匹配元素，返回NodeList。
const buttons = document.querySelectorAll('button[type="submit"]');
注意：
- 返回的是靜態NodeList（不會隨DOM變化更新）
- 性能比傳統方法稍差（但在現代瀏覽器中差距已不明顯）
檢查元素是否匹配給定選擇器。
if (element.matches('.active')) {
// 處理邏輯
}
// 文檔根元素
document.documentElement; // <html>
// 文檔頭
document.head; // <head>
// 文檔體
document.body; // <body>
// 當前激活元素
document.activeElement;
document.forms // 所有<form>元素
document.images // 所有<img>元素
document.links // 所有<a>和<area>元素
document.scripts // 所有<script>元素
// 視口可見區域
document.documentElement.clientWidth;
window.innerWidth;
// 滾動位置
window.pageXOffset;
window.pageYOffset;
// 父節點
element.parentNode;
// 所有子節點（包含文本節點等）
element.childNodes;
// 僅元素子節點
element.children;
// 前一個兄弟節點
element.previousSibling;
// 下一個兄弟節點
element.nextSibling;
// 僅元素兄弟節點
element.previousElementSibling;
element.nextElementSibling;
element.firstChild;
element.lastChild;
// 僅元素版本
element.firstElementChild;
element.lastElementChild;
| 方法 | 返回類型 | 動態性 | 性能 |
|---|---|---|---|
| getElementById | 單一元素 | - | ★★★★★ |
| getElementsBy* | HTMLCollection | 動態 | ★★★★ |
| querySelector | 單一元素 | - | ★★★ |
| querySelectorAll | NodeList | 靜態 | ★★ |
getElementById仍是最快的方式// 不佳做法
document.querySelectorAll('.menu li');
// 更好做法
const menu = document.getElementById('main-menu');
menu.querySelectorAll('li');
// 獲取表格中所有包含"active"類的行
const rows = document.querySelectorAll('tr.active');
// 添加點擊事件
rows.forEach(row => {
row.addEventListener('click', () => {
row.classList.toggle('selected');
});
});
// 獲取所有必填字段
const requiredFields = document.querySelectorAll('[required]');
requiredFields.forEach(field => {
field.addEventListener('blur', () => {
if (!field.value) {
field.style.borderColor = 'red';
}
});
});
// 獲取滾動容器
const container = document.getElementById('scroll-container');
container.addEventListener('scroll', () => {
if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
loadMoreContent();
}
});
const element = document.getElementById('not-exist');
if (element) {
// 安全操作
}
// 將NodeList轉換為數組
const buttons = [...document.querySelectorAll('button')];
// 或
const buttons = Array.from(document.querySelectorAll('button'));
對于動態添加的元素，事件委托比直接綁定更可靠：
document.addEventListener('click', (e) => {
if (e.target.matches('.dynamic-button')) {
handleButtonClick();
}
});
DOM元素獲取是前端開發的基礎技能，了解各種方法的特性和適用場景對于編寫高效代碼至關重要?，F代Web開發中：
getElementById/getElementsByClassNamequerySelector/querySelectorAll隨著Web Components和Shadow DOM的普及，DOM查詢的方式也在不斷發展，但基本原理保持不變。掌握這些核心方法將為更高級的前端開發打下堅實基礎。 “`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
