javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS获取选择器

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

作者：517

在JavaScript中选择器是一种强大的工具,用于从HTML文档中选择和操作元素,通过选择器,可以轻松地找到特定的元素,并对其进行各种操作,这篇文章主要介绍了JavaScript中获取选择器的相关资料,需要的朋友可以参考下

vscode 默认浏览器：Live  Server › Settings

重点

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

querySelectorAll

作用

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

语法

const elements = document.querySelectorAll(selector);

特点

示例

// 获取所有类名为 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 为 header 的元素
const header = document.getElementById('header');
​
// 修改内容
header.textContent = 'New Header';

getElementsByClassName

作用

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

语法

const elements = document.getElementsByClassName(className);

特点

示例

// 获取所有包含 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 属性

定义

用法示例

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

特点

2. click 事件（JavaScript 的 addEventListener）

定义

用法示例

<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>

特点

3. jQuery 的 .click() 方法

定义

用法示例

<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>

特点

（1）button 变量未定义

（2）this 指向错误

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

（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）处理多个按钮

（5）. 最终建议

修正后的代码示例：

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

总结 

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

您可能感兴趣的文章:
阅读全文