vscode 默認瀏覽器：Live  Server › Settings

重點

querySelector 通過 CSS 選擇器提供了一種簡潔、靈活的方式操作 DOM，是替代傳統(tǒng) getElementById、getElementsByClassName 的現(xiàn)代方法。結(jié)合 querySelectorAll 可以覆蓋絕大多數(shù) DOM 查詢需求。

querySelectorAll

作用

返回文檔中所有匹配指定 CSS 選擇器的元素集合（靜態(tài)的 NodeList）。

語法

const elements = document.querySelectorAll(selector);

特點

• 支持所有 CSS 選擇器語法（包括復(fù)雜選擇器）。

• 返回的是靜態(tài)的 NodeList（不會隨 DOM 變化自動更新）。

• 需要遍歷操作元素（例如 forEach）。

示例

// 獲取所有類名為 item 的元素
const items = document.querySelectorAll('.item');
?
// 獲取所有 input 類型為 checkbox 的元素
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
?
// 遍歷操作
items.forEach(item => {
  item.style.backgroundColor = 'yellow';
});

getElementById

作用

通過 ID 獲取單個元素（ID 在文檔中唯一）。

語法

const element = document.getElementById(id);

特點

• 直接通過 ID 查找，性能最優(yōu)。

• 返回單個元素（不存在返回 null）。

• 不支持組合選擇器，僅接受純 ID 字符串。

示例

// 獲取 ID 為 header 的元素
const header = document.getElementById('header');
?
// 修改內(nèi)容
header.textContent = 'New Header';

getElementsByClassName

作用

通過 類名 獲取元素的動態(tài)集合（HTMLCollection）。

語法

const elements = document.getElementsByClassName(className);

特點

• 返回的是動態(tài)的 HTMLCollection（DOM 變化時會自動更新）。

• 可同時傳入多個類名（空格分隔）。

• 需要轉(zhuǎn)換為數(shù)組才能使用 forEach 等方法。

示例

// 獲取所有包含 active 類的元素
const activeItems = document.getElementsByClassName('active');
?
// 獲取同時包含 btn 和 primary 類的元素
const buttons = document.getElementsByClassName('btn primary');
?
// 轉(zhuǎn)換為數(shù)組操作
Array.from(buttons).forEach(btn => {
  btn.disabled = true;
});

onlick與click的用法

1. onclick 屬性

定義

• HTML 內(nèi)聯(lián)事件：onclick 是 HTML 元素的屬性，用于直接綁定點擊事件的 JavaScript 代碼。

• 直接執(zhí)行代碼或調(diào)用函數(shù)：可以內(nèi)聯(lián)編寫 JavaScript 邏輯，或調(diào)用已定義的函數(shù)。

用法示例

<!-- 內(nèi)聯(lián)直接編寫邏輯 -->
<button onclick="alert('按鈕被點擊了！')">點擊我</button>
?
<!-- 調(diào)用外部函數(shù) -->
<button onclick="handleClick()">點擊我</button>
?
<script>
function handleClick() {
  console.log("按鈕被點擊");
}
</script>

特點

• 簡單直接：適合快速實現(xiàn)簡單邏輯。

• 局限性：

  • 只能綁定一個事件處理函數(shù)（重復(fù)賦值會覆蓋）。

  • HTML 和 JavaScript 代碼耦合，不利于維護。

  • 無法控制事件傳播（冒泡或捕獲階段）。

2. click 事件（JavaScript 的 addEventListener）

定義

• 通過 JavaScript 綁定事件：使用 addEventListener('click', callback) 動態(tài)綁定點擊事件。

• 靈活且符合標準：是推薦的事件綁定方式，支持更復(fù)雜的場景。

用法示例

<button id="myButton">點擊我</button>
?
<script>
const button = document.getElementById("myButton");
?
// 綁定事件
button.addEventListener("click", function() {
  console.log("按鈕被點擊（方式1）");
});
?
// 綁定多個事件（不會覆蓋）
button.addEventListener("click", function() {
  console.log("按鈕被點擊（方式2）");
});
?
// 使用箭頭函數(shù)
button.addEventListener("click", () => {
  console.log("箭頭函數(shù)處理點擊");
});
</script>

特點

• 支持多個事件監(jiān)聽器：可綁定多個函數(shù)，按順序執(zhí)行。

• 控制事件傳播：通過第三個參數(shù) useCapture 指定事件在捕獲階段（true）或冒泡階段（false，默認）觸發(fā)。

• 解綁事件靈活：通過 removeEventListener 移除特定事件。

3. jQuery 的 .click() 方法

定義

• jQuery 的簡化語法：.click() 是 jQuery 提供的快捷方法，底層基于 addEventListener。

• 兼容性和簡化代碼：主要用于舊項目或簡化事件綁定。

用法示例

<button id="jqButton">點擊我</button>
?
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#jqButton").click(function() {
  console.log("jQuery 方式點擊");
});
?
// 等效于 addEventListener
$("#jqButton").on("click", function() {
  console.log("另一種 jQuery 綁定方式");
});
</script>

特點

• 鏈式調(diào)用：支持 jQuery 的鏈式語法（如 .click().css()）。

• 隱式遍歷：自動為匹配的所有元素綁定事件（如多個同類元素）。

• 兼容性：處理了瀏覽器兼容性問題（如 IE 舊版本）。

（1）button 變量未定義

• 代碼中直接使用了 button.style.color = 'red'，但 button 變量未被定義。

• 如果 button 是全局變量（如通過 const button = document.querySelector('button') 定義），則可能僅對第一個按鈕生效，且不符合 jQuery 操作邏輯。

• 如果 button 未定義，代碼會直接報錯 ReferenceError: button is not defined。

（2）this 指向錯誤

• 使用箭頭函數(shù) () => { ... } 時，this 不會指向觸發(fā)事件的 DOM 元素，而是繼承外層作用域的 this（通常是 window 或 undefined）。

• 在 jQuery 事件處理函數(shù)中，必須通過 this 或 event.target 獲取當前元素，但箭頭函數(shù)破壞了這一機制。

（3）混合原生 DOM 和 jQuery 操作

• button.style.color 是原生 DOM 操作，而 $('button').on(...) 是 jQuery 方法，混用會導(dǎo)致代碼風(fēng)格不一致且易出錯。

• 推薦統(tǒng)一使用 jQuery 方法（如 .css()）操作元素。

（4）事件綁定對象語法問題

$('button').on({ "click": handler }) 語法雖然合法，但通常用于綁定多個事件（如同時綁定 click 和 mouseover）。對于單一事件，更推薦直接使用 .on('click', handler)。

（1）避免混合操作

統(tǒng)一使用 jQuery：

$(this).css('color', 'red'); // 推薦

統(tǒng)一使用原生 DOM：

const button = document.querySelector('button');
button.addEventListener('click', function() {
  this.style.color = 'red';
});

（2）處理多個按鈕

• 如果頁面上有多個 <button> 元素，$('button').on(...) 會為所有按鈕綁定事件。

• 通過 $(this) 或 event.target 可確保僅修改當前點擊的按鈕樣式。

（5）. 最終建議

• 優(yōu)先使用方案 1（普通函數(shù) + this），保持 jQuery 的簡潔性和一致性。

• 如果必須用箭頭函數(shù)，選擇方案 2 并顯式使用 event.target。

修正后的代碼示例：

// 最佳實踐：普通函數(shù) + jQuery 方法
$('button').on('click', function() {
  $(this).css('color', 'red');
});

總結(jié) 

到此這篇關(guān)于JavaScript中獲取選擇器的文章就介紹到這了,更多相關(guān)JS獲取選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！