HTML5 JavaScript中获取元素，筛选选择器(querySelector)

最新推荐文章于 2024-04-30 17:18:50 发布
最新推荐文章于 2024-04-30 17:18:50 发布
阅读量7.4k 收藏 3
点赞数 1
分类专栏： HTML5 JavaScript 文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/79629671
版权

querySelector: 只能筛选出符合条件的第一个元素
querySelectorAll: 获取符合条件的所有元素,返回数组类型。


demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		.box {
			width: 300px;
			height: 100px;
			margin: 10px auto;
			border: 1px solid #000;
		}
	</style>

</head>
<body>
	<div class="box box1" id="boxId"></div>
	<div class="box box2"></div>
	<div class="box box3"></div>
	<div class="box box4"></div>

	<script>
		//var box1 = document.getElementById("boxId");  //html4传统的写法
		//var box1 = document.querySelector("div");    //通过标签选择。 html5通过querySelector筛选选择器。只能筛选出符合条件的第一个元素
		//var box1 = document.querySelector(".box1");  //通过类名选择， 只选择第一个符合条件的元素
		//var box1 = document.querySelector("#boxId");  //通过ID选择
		
		var boxs = document.querySelectorAll("div.box");  //获取符合条件的所有元素,返回数组类型。
		
		boxs[0].style.background="red";
	</script>
</body>
</html>




houyanhua1
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
querySelector、querySelectorAll、attribute的运用以及 click的使用
SLL_boy的博客
09-12 1329
<!DOCTYPE html> <html lang="en"> <!--不说了，继续表白林祤环--> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
querySelectorAll和querySelector用法
热门推荐
qq_45840993的博客
09-04 2万+
querySelectorAll和querySelector用法 找出所有标签 document.querySelectorAll("*") 找出head下所有的标签 document.head.querySelectorAll("*") 找出body标签下的第一个div标签 document.body.querySelectorAll(“div”)[0] document.body.querySelector(“div”) 找出所有class=box的标签 document.querySelector..
H5 中时间预约筛选 利用Vant 组件中picker
最新发布
m0_73035846的博客
04-30 166
今天要做一个上门洗衣预约时间的流程，就是用户在今天的日期可以进行选择某一刻时间段，但是如果说是现在上午10：30分 ，那么就不可以选10：30分之前的时间段和当前的时间段，都不可以进行选择，但是在当天看其他的日期，是可以选择任意时间段的，听着感觉简单，但是操作下来 还是听麻烦的，废话不多说，直接代码展示，大家可以赋值直接用的。
js获取DOM元素的选择器querySelector
weixin_33816821的博客
05-01 1692
工作中并没有用到什么高级操作，用到哪些学哪些呗:)<div id="content"></div> <div class="container"></div> <div class="container"></div>复制代码document.querySelector('#content').innerHTML = 'con...
原生js选择器或者选择元素或者选择方式
qq_42331499的博客
09-24 2296
第一种，已有元素，且元素id为01 var aa = document.getElementById("01"); 第二种，已有元素 var number01 = 3; var aa = document.getElementById(number01); 第三种，选择所有某一标签的所有元素，比如div var aa_array = document.querySelectorAll("div"); 第四种，选择带有某一类的所有元素元素比如类名为monster var aa_array =
js中的document.querySelector()方法
口袋的天空的博客
01-23 2850
document.querySelector()的使用
selectable:使用 HTML 元素轻松获取和设置文本选择
06-07
综上所述，通过JavaScript的`window.getSelection()`、`Range`对象、`setSelectionRange`方法以及`contenteditable`属性，我们可以轻松地获取和设置HTML元素中的文本选择。这些技术在现代Web开发中扮演着重要角色，...
浅谈JS获取元素的N种方法及其动静态讨论
10-19
在JavaScript中，获取元素是前端开发中的基础操作，主要用于对网页元素进行操作，如更改样式、内容或事件处理。本文将深入探讨几种常用的JS获取元素的方法及其在动态和静态环境中的应用。 首先，`getElementById()`...
JavaScript下拉框筛选可搜索
11-29
1. 下拉框（Dropdown）：在HTML中，下拉框通常由`<select>`元素创建，用户可以通过点击下拉箭头来查看和选择其中的选项。 2. 筛选（Filtering）：筛选是指在大量数据中通过某种条件快速定位到特定数据的过程，常见于...
Javascript获取相同CSS样式的元素
04-06
标题中的“Javascript获取相同CSS样式的元素”是一个关于JavaScript编程的话题，主要涉及到如何在JavaScript中检索和操作具有相同CSS样式的HTML元素。在Web开发中，JavaScript常常用于动态地改变页面样式，或者根据...
日志选择器HTML/css
10-10
例如，当用户点击筛选按钮时，我们可以监听`submit`事件，并阻止默认表单提交行为，转而使用JavaScript获取日期值并执行相应的日志过滤逻辑。 ```javascript document.querySelector('form').addEventListener('...
jquery on方法原理_jQuery 学习小结
weixin_39969611的博客
12-20 74
jQuery 学习小结相较于原生 JS，jQuery 通过 API 接口写更少的代码，做更多的事情。虽然这个元老级别的技术库的使用率已经渐渐在减少了，不过了解其原理和用法还是很有用的。jQuery 之选择元素let div = document.querySelector('#div') let $div = $('#div'); console.log('div:') console.log(d...
html5条件筛选jquery,jQuery实现多条件筛选
weixin_29798981的博客
06-09 1443
HTML首先，我们将查询条件分类，在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。上装：全部针织衫毛呢外套T恤羽绒服棉衣卫衣风衣裤装：全部牛仔裤小脚/铅笔裤休闲裤打底裤哈伦裤已选条件：暂时没有选择过滤条件布置好内容后，给页面内容加上css样式以及加载相关js。jQuery当用户点击任意条件时，标记当前选中状态，相邻条件取消选中状态，并且更新已选...
jQuery选择器基础
APieceOfBullshit
04-25 197
一、基础 1）支持CSS1、CSS2、CSS3不同版本的选择器 2）不用考虑浏览器兼容性问题 3）依然依靠j原生方法 4）如果jQuery选择器没有匹配元素，则会返回一个空的伪数组对象。、 Ps：$是jQuery的别名，如$()等效于jQuery()，将jQuery对象转换为DOM对象有两种方法，一是借助下标，二是借助jQuery方法如get（)方法 二、基本选择器 1、ID选择器 ...
querySelector用法改进
weixin_34314962的博客
11-08 130
原来选择器只支持一个上下文，并对IE8的BUG进行了规避 if (!flag_xml &amp;&amp; doc.querySelectorAll) {//FF,opera,chrome,safari的XML文档也实现了querySelectorAll接口，但不能用 var query = expr;//IE的getElementsByTagNa...
jQuery
D_tangerine的博客
12-27 413
jQuery的官方API文档地址是：http://api.jquery.com/**jQuery：**JavaScript和查询（Query），即是辅助JavaScript开发的库。其实就是这么一个一堆封装起来的函数的集合eg: 函数$() 函数$()：完全支持CSS选择器方法querySelector()，并且能够处理querySelector()方法能处理的所有参数类型。 **JavaScript中标识符的命名规则：**JavaScript标识符必须以字母、下划线或美元符号（）开始，后续字符可以是字母、
JS、Jquery选择器总结
天才来源于积累
09-03 734
--> Document //选择器 /* HTML DOM Document 对象 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对 在 HTML DOM （文档对象模型）中，每个部分都是节点： 文档本身是文档节点 所有 HTML 元素是元素节点(DIV,INPUT,UL等等) 所有 HTML
html选择器selector,HTML5中类jQuery选择器querySelector的高级使用
weixin_35683330的博客
06-03 592
var elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的d<div id="box"> //surface blogquerySelectorAll支持属性操作 这个用也比较多<div id="box" ><ul><li data-href='http://www.qq.c...
html多选择筛选标签,querySelector与querySelectorAll，选择标签的快捷方法
weixin_42103587的博客
06-05 3876
querySelector与querySelectorAllHTML5学堂：JS获取节点的方法很多，但真正常用的或许就是通过id和标签获取节点，用传统的几种方法想要快速的查找到某个标签，就意味着需要更多的id，命名多了自然就烦了，接下来给大家介绍的方法就能简化很多操作。常用的获取节点的方法JS中经常需要获取节点,下面四种是较为常见的。1、通过id获取节点：document.getElementBy...
在java script 中，根据Css选择器获取元素
05-25
在 JavaScript 中，可以通过使用 `querySelector` 或 `querySelectorAll` 方法来根据 CSS 选择器获取元素。 `querySelector` 方法返回文档中与指定选择器或选择器组匹配的第一个元素，如果找不到匹配的元素，则返回...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值