Js选择器document.querySelector()方法

Js+JQuery helloweb 次浏览 已收录 评论() 扫描二维码
扫描二维码

HTML 的 DOM querySelector() 方法可以不需要额外的 jQuery 等支持,也可以方便的获取 DOM 元素,语法跟 jQuery 类似。

获取文档中 id="container" 的元素

Html 代码:

<div id="contatiner">HelloWeb</div>

Js 代码:

var oBox = document.querySelector("#contatiner");
console.log(oBox);

打印结果:

1.png

注意:

querySelector() 方法仅仅返回匹配指定选择器的第一个元素;如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

参数类型可以为如下:

1. 指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

2. 对于多个选择器,使用逗号隔开,返回一个匹配的元素。

获取第一个 p 元素

Html 代码:

<p>HelloWeb前端网始终和你在一起</p>
<p>HelloWeb前端网和你一起成长</p>

Js 代码:

var node = document.querySelector("p");
console.log(node);

打印结果:

2.png

获取文档中的第一个 class="helloweb" 的元素

Html 代码:

<p class="helloweb">HelloWeb前端网始终和你在一起</p>
<p class="helloweb">HelloWeb前端网和你一起成长</p>

Js 代码:

var node = document.querySelector(".helloweb");
console.log(node);

打印结果:

3.png

获取 class="helloweb" 的第一个 p 元素

Html 代码:

<span class="helloweb">HelloWeb前端网始终和你在一起</span>
<p class="helloweb">HelloWeb前端网和你一起成长</p>

Js 代码:

var node = document.querySelector("p.helloweb");
console.log(node);

打印结果:

4.png

获取第一个带 target 属性的 a 元素

Html 代码:

<a href="http://www.helloweb.wang">HelloWeb前端网</a>
<a href="https://www.taobao.com" target="_blank">淘宝,淘你喜欢</a>

Js 代码:

var node = document.querySelector("a[target]");
console.log(node);

打印结果:

5.png

多个选择器的使用方法

注意这里有个小 bug;比如我这样写:

Html 代码:

<h1>H1标题</h1>
<h2>H2标题</h2>
<h3>H3标题</h3>

Js 代码:

document.querySelector("h2,h3").style.backgroundColor = 'pink';

打印结果:

6.png

但是,如果文档中 h3 元素位于 h2 元素之前,h3 元素将会被设置指定的背景颜色。

Html 代码:

<h1>H1标题</h1>
<h3>H3标题</h3>
<h2>H2标题</h2>

Js 代码:

document.querySelector("h3,h2").style.backgroundColor = 'pink';

打印结果:

7.png

所以,多元素选择时,哪个先匹配就是谁,只有一个能被选中。


原文链接:HelloWeb前端网 » Js选择器document.querySelector()方法 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享