vscode 默認(rèn)瀏覽器：Live  Server › Settings

重點(diǎn)

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

querySelectorAll

作用

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

語(yǔ)法

const elements = document.querySelectorAll(selector);

特點(diǎn)

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

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

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

示例

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

getElementById

作用

通過(guò) ID 獲取單個(gè)元素（ID 在文檔中唯一）。

語(yǔ)法

const element = document.getElementById(id);

特點(diǎn)

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

• 返回單個(gè)元素（不存在返回 null）。

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

示例

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

getElementsByClassName

作用

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

語(yǔ)法

const elements = document.getElementsByClassName(className);

特點(diǎn)

• 返回的是動(dòng)態(tài)的 HTMLCollection（DOM 變化時(shí)會(huì)自動(dòng)更新）。

• 可同時(shí)傳入多個(gè)類名（空格分隔）。

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

示例

// 獲取所有包含 active 類的元素
const activeItems = document.getElementsByClassName('active');
?
// 獲取同時(shí)包含 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 元素的屬性，用于直接綁定點(diǎn)擊事件的 JavaScript 代碼。

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

用法示例

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

特點(diǎn)

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

• 局限性：

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

  • HTML 和 JavaScript 代碼耦合，不利于維護(hù)。

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

2. click 事件（JavaScript 的 addEventListener）

定義

• 通過(guò) JavaScript 綁定事件：使用 addEventListener('click', callback) 動(dòng)態(tài)綁定點(diǎn)擊事件。

• 靈活且符合標(biāo)準(zhǔn)：是推薦的事件綁定方式，支持更復(fù)雜的場(chǎng)景。

用法示例

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

特點(diǎn)

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

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

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

3. jQuery 的 .click() 方法

定義

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

• 兼容性和簡(jiǎn)化代碼：主要用于舊項(xiàng)目或簡(jiǎn)化事件綁定。

用法示例

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

特點(diǎn)

• 鏈?zhǔn)秸{(diào)用：支持 jQuery 的鏈?zhǔn)秸Z(yǔ)法（如 .click().css()）。

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

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

（1）button 變量未定義

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

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

• 如果 button 未定義，代碼會(huì)直接報(bào)錯(cuò) ReferenceError: button is not defined。

（2）this 指向錯(cuò)誤

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

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

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

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

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

（4）事件綁定對(duì)象語(yǔ)法問(wèn)題

$('button').on({ "click": handler }) 語(yǔ)法雖然合法，但通常用于綁定多個(gè)事件（如同時(shí)綁定 click 和 mouseover）。對(duì)于單一事件，更推薦直接使用 .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）處理多個(gè)按鈕

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

• 通過(guò) $(this) 或 event.target 可確保僅修改當(dāng)前點(diǎn)擊的按鈕樣式。

（5）. 最終建議

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

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

修正后的代碼示例：

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

總結(jié) 

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

最新評(píng)論