原生javascript找寻元素的方法（querySelect篇）

最新推荐文章于 2023-11-29 08:47:53 发布
最新推荐文章于 2023-11-29 08:47:53 发布
阅读量908 收藏 1
点赞数 1
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3490747/blog/910656
版权

querySelector和querySelectorAll

document对象的方法说明
querySelector(class)返回与给定css选择器匹配的第一个元素的引用（节点）
querySelectorAll(class)返回与给定css选择器匹配的一组元素的引用（节点列表）

1.querySelector（）方法用于获取匹配所提供的css选择器的第一个元素。它可以方便地获取没有id属性的元素（如果元素有id属性，可以使用getElementById（）方法来获取）。

例如下面的html：

<body>
	<div class="box">
		<p>hello!</p>
		<p>word!</p>
	</div>
</body>

1.1 使用querySelector（）方法，可以获取html中第一个<p>元素，代码如下：

var firstP=document.querySelector('.box p');

1.2 通过改变第一个P标签的字号和颜色来验证是否被选到，代码如下：

var firstP=document.querySelector('.box p');
	firstP.style.fontSize='40px';
	firstP.style.color='red';

2.使用querySelectorAll（）方法可以获取到html中所有<p>元素。

代码如下：

var firstP=document.querySelectorAll('.box p');

通过for循环遍历所有P标签，进行验证，代码如下：

var firstP=document.querySelectorAll('.box p');
	for (var i = 0; i < firstP.length; i++) {
		firstP[i].style.fontSize='40px';
		firstP[i].style.color='red';
	};

3.在HTML5 DOM中新增了一个与querySelector（）方法类似并且更加精简的方法，那就是getElementsByClassName（），这个方法比较新，有的DOM里面还没有实现，IE8以下不支持。

var classP=document.getElementsByClassName('box')

 

转载于:https://my.oschina.net/u/3490747/blog/910656

chunzhuang9775
关注
JavaScript の querySelector 使用说明
weixin_45566993的博客
04-22 9896
🚀 优质资源分享 🚀 学习路线指引（点击解锁） 知识定位 人群定位 🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 本文记录，JavaScript 中 querySelector 的使用方法。小白贡献，语失莫怪。 // 两种 query 的 method (方法) documen
简单几步原生javascript实现元素拖拽功能兼容所有浏览器
hello world!
09-30 4323
代码 *{margin: 0;padding: 0;} 按住左键拖动 window.onload = function() { //用于确定是否是拖拽的对象 var drag; //鼠标位于目标元素上的时候距离目标元素的位置 var x,y; //取得元素
javascript函数querySelector,querySelectorAll介绍
mao1059568684的专栏
11-29 1733
querySelector用于获得dom节点，可以接受三种类型的参数：id(#)，class(.)，标签。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList),很像jquery的选择器。下面的代码示例：        id        class   var htmlStr= document.query
js中的document.querySelector()方法
最新发布
withkai44的博客
11-29 1万+
ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。位于元素之前，元素将会被设置指定的背景颜色，总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
js querySelectAll和querySelect函数学习
黄彪博客
01-16 934
文章目录问题描述解决办法案例学习 问题描述 工作中一个项目是用Vue编写的（编写逻辑比较简单），现在将代码发布到其他项目中 使用iframe 去获取其他项目中的数据（已经是同源了），但是发现使用查找dom节点非常困难 第一反应是引用jquery，增大了代码量，实际上只是为了节点的查找方便 解决办法 使用如下 API 方便查找节点 Element.querySelectorAll() Docu...
javascript函数querySelector介绍
行成于思毁于随
03-22 1572
querySelector用于获得dom节点，可以接受三种类型的参数：id(#)，class(.)，标签。很像jquery的选择器。不过只能返回一个子孙元素，但是jquery选择器的话，可以返回一组元素集合。下面的代码示例：        id        class   var htmlStr= document.querySelector("body #query").in
jQuery与原生JavaScript选择HTML元素集合用法对比分析
10-15
主要介绍了jQuery与原生JavaScript选择HTML元素集合用法,结合实例形式对比分析了jquery与原生JavaScript选择页面HTML相关操作方法、注意事项及运行效率,需要的朋友可以参考下
用JavaScript来美化HTML的select标签的下拉列表效果
10-23
可以通过jQuery的选择器或者原生JavaScript的document.getElementsByTagName("select")方法获取。 - 对于每一个获取到的select元素，创建一个div元素作为它的自定义下拉列表，并将其放置在select元素的位置。这个...
原生js form表单美化插件表单元素input select下拉框
11-11
原生JavaScript作为Web开发的基础，提供了丰富的API和方法来处理表单元素，如input和select。本主题将深入探讨如何使用原生JavaScript对form表单进行美化，并对input输入框和select下拉框进行优化。 一、表单基础 1...
Javascript操作dom对象之select全面解析
10-19
在这篇文章中，作者详细解析了使用JavaScript操作DOM对象中select元素的方法。首先，介绍了一个基础的HTML结构，即包含三个option选项的select元素。这三个选项分别代表“北京大学”、“清华大学”和“北京电影学院...
JavaScript-DOM之 querySelect() 和 querySelectAll()方法简述
qq_39494705的博客
12-09 1704
querySelect() 简单举个栗子： 1.获取文档中 id=“demo” 的元素： document.querySelector("#demo"); 2.获取文档中有 “target” 属性的第一个 元素： document.querySelector("a[target]"); 定义和用法 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： ...
js querySelector和getElementByXXX 获取元素的区别
weixin_30698527的博客
03-28 319
js的querySelector获取的是静态的集合（取到和文档更改没关系了） 获取的是第一个(并不是集合)getElementBy 获取的是集合 querySelector和querySelectorAll() querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 总结 如果只...
Javascript教程:querySelector()方法
10-14 2814
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements N
html 表单 selector,javascript-如何使用querySelector来按名称选择输入元素？
weixin_42355744的博客
06-25 1254
javascript-如何使用querySelector来按名称选择输入元素？我最近在此站点上获得了帮助，希望在诸如2721827157822669869825之类的表单输入中使用name="pwd"，但是一旦我取出querySelectorAll，它就完全改变了功能中必须执行的操作。HTML：Password: Javascript：debugger;function checkForm() {...
js的querySelector跟querySelectorAll
qq_36320160的博客
10-08 778
querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个) 　　　　　　　docume...
document.querySelector()方法
u010227042的博客
09-09 7183
HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。 获取文档中id=”container”的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <
query获取整个节点html,JavaScript中querySelector()获取HTML元素的方法介绍
weixin_31720623的博客
06-07 1614
QuerySelector()是一种可以从JavaScript 检测和获取任意HTML元素的方法，虽然JavaScript从开始就有可以获得HTML元素的getElemenById()和getElemetnsByClasNamo()等方法，但是，如果使用querySelector()，则可以在jQuery意义上有选择地指定HTML元素，而无需了解id属性值，class属性值等。简而言之，就是可以使...
JavaScript中选择器函数querySelector和querySelectorAll
晴空闲云
11-20 4599
选择器是Css非常强大的功能，早先一般是通过getElementById和getElementsByTagName来获取页面元素，在一些场景下就很不方便。 后来DOM扩展出了Selector API标准，其中 Selector API Level 1 包含了querySelector和querySelectorAll两个方法，可以通过Css选择器匹配页面元素。 querySelector查询单个元素 querySelector用于查询页面中第一个符合规则的元素，可以在Document实例和Element实例
Query获取Select选择的Text和Value:
MRwang
10-17 1175
语法解释：   1.  $("#select_id").change(function(){//code...});   // 为 Select 添加事件， 当选择其 中一项时触发   2. var checkText=$("#select_id").find("option:selected").text();  // 获取 Select 选择的 Text  3. 
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值