js queryselector

站长资源 2022-09-21 08:59www.dzhlxh.cnseo优化

js queryselector是什么呢?不知道的小伙伴来看看小编今天的分享吧!

1、js queryselector简介:

js中querySelector()方法是返回文档中匹配指定CSS选择器的一个元素。

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

如:

var body = document.querySelector('body');
var mydiv = document.querySelector('#mydiv');
var myclass = document.querySelector('.selected');

以上三个用来代替getElementById()和getElementByTagName().

其次如果要限定范围查找  则可以 

var img = document.body.querySelector('img.button');

相对于querySelectorAll(); 则是取得一个NodeList

2、语法

 document.querySelector(CSS selectors)

拓展资料:

js选择器:querySelector和querySelectorAll

二者区别:

querySelector是单一选择器,得到的是唯一的一个元素;

querySelectorAll,得到的是一个数组,所有名为“*”的集合;

有点类似于jquery中id选择器和class选择一,id必须是唯一的,class是一组,querySelector用来选择唯一的id,querySelectorAll用来选择重复出现的元素或者class,当然理解是这样的,如果页面仅有一个唯一class,你用querySelector也可以!

用法:

let box = document.querySelector(".box");//单一元素生效
box.onclick = function(){
box.style.background= "red";
}
let boxs = document.querySelectorAll(".box");//等到的是“.box”的集合
boxs[0].onclick = function(){
boxs[0].style.background= "red";
}

以上就是小编今天的分享了,希望可以帮助到大家。

上一篇:mysql json_extract 下一篇:js assign

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板