目录
1. document.querySelector
1.1 语法：
1.2 示例
2.querySelectorAll()
3.document.querySelector.bind和document.querySelectorAll.bind
附：使用document.querySelector()搜索时,点‘.‘和井号‘#‘的用法
总结
1. document.querySelector
document.querySelector
可以获取文档中的第一个匹配的元素。
这个函数返回匹配的元素（如果找到了匹配项），否则返回 null
1.1 语法：
const element = document.querySelector(selector);
1.2 示例
以下示例， 包含根据标签名选择，类名选择，属性名等选择元素
Node-Link Tree
你好，2024！
你好.冬天
龙马精神
龙年大吉
龙凤呈祥
1.龙年行大运，祥瑞照门庭。岁月悠悠，情谊绵长，感恩有您相伴。愿您在新的一年里，如龙腾飞，事业兴旺；如龙入海，生活美满。祝您龙年吉祥如意！
龙年到来，祥瑞满天。愿您如龙般矫健，事业腾飞；如龙鳞闪耀，生活美满。祝您龙年大吉，万事如意！
2.querySelectorAll()
当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。 ---->querySelectorAll 得到一个伪数组 DOM。
ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法
Node-Link Tree
龙马精神
龙凤呈祥
3.document.querySelector.bind和document.querySelectorAll.bind
定义全局的变量，方便直接获取dom
Node-Link Tree
龙马精神
龙年大吉
龙凤呈祥
附：使用document.querySelector()搜索时,点‘.‘和井号‘#‘的用法
document.querySelector()用于选择文档中的元素，你可以根据元素的类型（标签名div/span）、类名(class)、或 id 来进行选择。在使用时，可以根据以下规则来确定何时使用点 (`.`) 和何时使用井号 (`#`)：
1. 使用点 (`.`)：
当你希望选择具有特定类名的元素时，使用点。
例如，`document.querySelector('.classname')` 会选择具有指定类名的元素。
例如， ，你可以使用 `document.querySelector('.box')` 来选择它。
2. 使用井号 (`#`)：
当你希望选择具有特定 id 的元素时，使用井号。
例如，`document.querySelector('#elementId')` 会选择具有指定 id 的元素。
例如， ，你可以使用 `document.querySelector('#myDiv')` 来选择它。
3. 使用标签名：
如果你想选择特定类型的元素，只需提供标签名即可。
例如，`document.querySelector('div')` 会选择页面上的第一个 `` 元素。
这不需要点 (`.`) 或井号 (`#`) 前缀。
总之，前缀点 (`.`) 用于选择类名，前缀井号 (`#`) 用于选择 id，而不使用前缀时用于选择标签名。根据需要选择适当的前缀，以便准确地选择目标元素。
总结
到此这篇关于JavaScript中document.querySelector()方法使用详解的文章就介绍到这了,更多相关js document.querySelector()方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
js中的document.querySelector()方法举例详解
解读document.querySelector()方法
JavaScript中的document.querySelector()常见用法示例