# JavaScript怎么獲取HTML元素
## 前言
在Web開發中，JavaScript與HTML的交互是核心技能之一。獲取HTML元素是操作DOM（文檔對象模型）的第一步，本文將詳細介紹JavaScript中獲取HTML元素的多種方法及其應用場景。
---
## 一、基礎方法
### 1. 通過ID獲?。篳getElementById()`
```javascript
// 獲取id為"header"的元素
const header = document.getElementById('header');
// 獲取所有包含"menu-item"類的元素
const menuItems = document.getElementsByClassName('menu-item');
// 獲取所有<div>元素
const divs = document.getElementsByTagName('div');
document.getElementsByTagName('*')獲取所有元素querySelector()// 獲取第一個匹配CSS選擇器的元素
const btn = document.querySelector('.btn-primary');
querySelectorAll()// 獲取所有<p>元素
const paragraphs = document.querySelectorAll('p');
| 方法 | 返回類型 | 動態性 | 性能 |
|---|---|---|---|
| getElementsBy* | HTMLCollection | 動態 | 快 |
| querySelectorAll | NodeList | 靜態 | 較慢 |
// 通過name屬性獲取
const username = document.forms['loginForm']['username'];
// 獲取所有<input>元素
const inputs = document.forms[0].elements;
document.documentElement // <html>
document.head // <head>
document.body // <body>
document.title // 標題文本
getElementByAttribute()// 實驗性方法（部分瀏覽器支持）
const items = document.getElementByAttribute('data-id');
// 避免在循環中重復查詢
const items = document.querySelectorAll('.item');
items.forEach(item => {
// 處理邏輯
});
const element = document.getElementById('not-exist');
if (element) {
// 安全操作
}
// 獲取表格第二行
const row = document.querySelector('table tr:nth-child(2)');
// 移動端菜單控制
const menuBtn = document.querySelector('.menu-toggle');
const nav = document.getElementById('main-nav');
menuBtn.addEventListener('click', () => {
nav.classList.toggle('active');
});
const form = document.forms[0];
const emailInput = form.querySelector('input[type="email"]');
form.addEventListener('submit', (e) => {
if (!emailInput.value.includes('@')) {
e.preventDefault();
alert('請輸入有效郵箱');
}
});
// 需要轉換為數組
const elements = [...document.querySelectorAll('.item')];
// 或
Array.from(document.querySelectorAll('.item'));
// 事件委托或重新查詢
document.addEventListener('click', (e) => {
if (e.target.matches('.dynamic-item')) {
// 處理邏輯
}
});
// 需要先訪問shadowRoot
const shadowHost = document.getElementById('host');
const shadowElement = shadowHost.shadowRoot.querySelector('.inner');
掌握HTML元素獲取是JavaScript DOM操作的基礎。建議： 1. 根據場景選擇合適方法 2. 注意不同方法的性能差異 3. 結合開發者工具調試選擇器
通過靈活運用這些方法，你將能高效地操作網頁中的任何元素。 “`
注：本文約1500字，包含代碼示例、對比表格和實用建議。實際使用時可根據需要調整代碼示例的具體內容。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
