JavaScript中获取选择器的方式举例详解

vscode 默认浏览器：Live  Server › Settings

重点

querySelector 通过 CSS 选择器提供了一种简洁、灵活的方式操作 DOM，是替代传统 getElementById、getElementsByClassName 的现代方法。结合 querySelectorAll 可以覆盖绝大多数 DOM 查询需求。

querySelectorAll

作用

返回文档中所有匹配指定 CSS 选择器的元素集合（静态的 NodeList）。

语法

const elements = document.querySelectorAll(selector);

特点

• 支持所有 CSS 选择器语法（包括复杂选择器）。

• 返回的是静态的 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 查找，性能最优。

• 返回单个元素（不存在返回 null）。

• 不支持组合选择器，仅接受纯 ID 字符串。

示例

// 获取 ID 为 header 的元素
const header = document.getElementById('header');
​
// 修改内容
header.textContent = 'New Header';

getElementsByClassName

作用

通过 类名 获取元素的动态集合（HTMLCollection）。

语法

const elements = document.getElementsByClassName(className);

特点

• 返回的是动态的 HTMLCollection（DOM 变化时会自动更新）。

• 可同时传入多个类名（空格分隔）。

• 需要转换为数组才能使用 forEach 等方法。

示例

// 获取所有包含 active 类的元素
const activeItems = document.getElementsByClassName('active');
​
// 获取同时包含 btn 和 primary 类的元素
const buttons = document.getElementsByClassName('btn primary');
​
// 转换为数组操作
Array.from(buttons).forEach(btn => {
  btn.disabled = true;
});

onlick与click的用法

1. onclick 属性

定义

• HTML 内联事件：onclick 是 HTML 元素的属性，用于直接绑定点击事件的 JavaScript 代码。

• 直接执行代码或调用函数：可以内联编写 JavaScript 逻辑，或调用已定义的函数。

用法示例

<!-- 内联直接编写逻辑 -->
<button onclick="alert('按钮被点击了！')">点击我</button>
​
<!-- 调用外部函数 -->
<button onclick="handleClick()">点击我</button>
​
<script>
function handleClick() {
  console.log("按钮被点击");
}
</script>

特点

• 简单直接：适合快速实现简单逻辑。

• 局限性：

  • 只能绑定一个事件处理函数（重复赋值会覆盖）。

  • HTML 和 JavaScript 代码耦合，不利于维护。

  • 无法控制事件传播（冒泡或捕获阶段）。

2. click 事件（JavaScript 的 addEventListener）

定义

• 通过 JavaScript 绑定事件：使用 addEventListener('click', callback) 动态绑定点击事件。

• 灵活且符合标准：是推荐的事件绑定方式，支持更复杂的场景。

用法示例

<button id="myButton">点击我</button>
​
<script>
const button = document.getElementById("myButton");
​
// 绑定事件
button.addEventListener("click", function() {
  console.log("按钮被点击（方式1）");
});
​
// 绑定多个事件（不会覆盖）
button.addEventListener("click", function() {
  console.log("按钮被点击（方式2）");
});
​
// 使用箭头函数
button.addEventListener("click", () => {
  console.log("箭头函数处理点击");
});
</script>

特点

• 支持多个事件监听器：可绑定多个函数，按顺序执行。

• 控制事件传播：通过第三个参数 useCapture 指定事件在捕获阶段（true）或冒泡阶段（false，默认）触发。

• 解绑事件灵活：通过 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>

特点

• 链式调用：支持 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 指向错误

• 使用箭头函数 () => { ... } 时，this 不会指向触发事件的 DOM 元素，而是继承外层作用域的 this（通常是 window 或 undefined）。

• 在 jQuery 事件处理函数中，必须通过 this 或 event.target 获取当前元素，但箭头函数破坏了这一机制。

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

• button.style.color 是原生 DOM 操作，而 $('button').on(...) 是 jQuery 方法，混用会导致代码风格不一致且易出错。

• 推荐统一使用 jQuery 方法（如 .css()）操作元素。

（4）事件绑定对象语法问题

$('button').on({ "click": handler }) 语法虽然合法，但通常用于绑定多个事件（如同时绑定 click 和 mouseover）。对于单一事件，更推荐直接使用 .on('click', handler)。

（1）避免混合操作

统一使用 jQuery：

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

统一使用原生 DOM：

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

（2）处理多个按钮

• 如果页面上有多个 <button> 元素，$('button').on(...) 会为所有按钮绑定事件。

• 通过 $(this) 或 event.target 可确保仅修改当前点击的按钮样式。

（5）. 最终建议

• 优先使用方案 1（普通函数 + this），保持 jQuery 的简洁性和一致性。

• 如果必须用箭头函数，选择方案 2 并显式使用 event.target。

修正后的代码示例：

// 最佳实践：普通函数 + jQuery 方法
$('button').on('click', function() {
  $(this).css('color', 'red');
});

总结 

到此这篇关于JavaScript中获取选择器的文章就介绍到这了,更多相关JS获取选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论