介绍函数用法:document.querySelector
document.querySelector 是一个 JavaScript 函数,它允许你通过提供一个 CSS 选择器来选择文档中的第一个匹配的元素。这个函数返回匹配的元素(如果找到了匹配项),否则返回 null。document.querySelector 是一个非常有用的方法,因为它让你可以通过多种选择器轻松地选择和操作 DOM 元素。
(图片来源网络,侵删)
函数的用法如下:
const element = document.querySelector(selector);
其中,selector 是一个包含 CSS 选择器的字符串,用于查找和选择元素。
以下是一些使用 document.querySelector 的示例:
-
通过标签名选择元素:
const firstParagraph = document.querySelector('p');
这将选择文档中的第一个
元素。
-
通过类名选择元素:
(图片来源网络,侵删)const firstElementWithClass = document.querySelector('.my-class');
这将选择文档中具有 my-class 类名的第一个元素。
-
通过 ID 选择元素:
const elementWithId = document.querySelector('#my-id');
这将选择具有 my-id ID 的元素。
-
通过属性选择器选择元素:
const firstInputElement = document.querySelector('input[type="text"]');
这将选择文档中第一个类型为 text 的 元素。
-
通过复合选择器选择元素:
(图片来源网络,侵删)const firstElement = document.querySelector('.my-class.another-class');
这将选择文档中具有 my-class 和 another-class 类名的第一个元素。
请注意,document.querySelector 只返回第一个匹配的元素。如果你想选择文档中的所有匹配的元素,可以使用 document.querySelectorAll 函数。这个函数返回一个包含所有匹配元素的 NodeList。
const allElementsWithClass = document.querySelectorAll('.my-class');
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...