document.querySelectorAll根据元素属性值选择元素

已于 2023-05-04 13:49:30 修改
阅读量3k 收藏
点赞数 2
文章标签： html css 前端
于 2023-05-04 12:03:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42611074/article/details/130484059
版权
文章讲述了如何使用JavaScript的querySelectorAll和CSS选择器来选取具有特定οnmοuseοver事件属性的text元素，并用forEach进行遍历，将这些元素的display样式设置为none，从而实现隐藏。另外，也提到了使用jQuery的相同操作，即$.find()方法配合hide()函数来达成相同目的。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求

需要选择所有拥有 οnmοuseοver=“top.ShowTip_YC(evt)” 属性的 text 元素，即根据dom元素上的事件名来查找dom并隐藏

const elements = document.querySelectorAll('text[οnmοuseοver="top.ShowTip_YC(evt)"]');
elements.forEach(element => {
  element.style.display = 'none';
});

使用document.querySelectorAll选择器来选择指定的 HTML 元素，然后对其应用样式或操作。
在这个选择器中，我们使用了属性选择器 [attribute=value]，其中 attribute 是 HTML 元素的属性名称，value 是属性值。所以这个选择器的意思是选择所有拥有 οnmοuseοver=“top.ShowTip_YC(evt)” 属性的 text 元素。

jquery的写法

$('text[οnmοuseοver="top.ShowTip_YC(evt)"]').hide()
关于获取DOM节点js方法document.querySelectorAll与常规获取的区别
majiang8823的博客
11-10 2328
document.querySelectorAll与常规获取的区别一、document.querySelectorAll获取节点方法二、常规获取DOM节点方法2.分析区别总结 <!--body里面的代码--> <ul> <li>洪山区</li> <li id="wuchang">武昌区</li> <li>汉阳区</li>
document.querySelector(),document.querySelectorAll()
qq2071114140的博客
08-14 4178
document.querySelector(),document.querySelectorAll() 除了使用DOM的对象结点之间的关系选择一个元素结点外，还可以通过CSS的选择器选择元素结点。 document对象中，有两个方法querySelector()和querySelectorAll()。 这两个方法的参数相同，都是一个CSS选择器表达式（字符串形式），通过这个选择器表达式，选择元素。 举例： <script type="text/javascript"> window.
document.querySelector()与document.querySelectorAll()
weixin_33786077的博客
07-01 922
  document.querySelector()与document.querySelectorAll() CreationTime--2018年7月1日10点49分 Author:Marydon 1.说明 　　他俩是H5提供的选择器，都可以直接获取页面元素并进行操作。 2.区别 　　用法与jQuery里的$()选择器相似； 　　querySelector只能选择第一个匹配的...
JavaScript querySelector()、querySelectorAll() CSS选择器解析（DOM元素选择）（DOM查询）
最新发布
Dontla的博客
02-24 1162
返回匹配的第一个元素返回NodeList集合参数接受标准CSS选择器语法支持在任意Element节点上调用。
js中的document.querySelector()方法
withkai44的博客
11-29 1万+
ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。位于元素之前，元素将会被设置指定的背景颜色，总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
document.querySelectorAll
FuDesign2008的专栏
05-26 2533
<br />Summary<br />Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList .SyntaxelementList = document.querySelec
Document.querySelectorAll
stefan321的专栏
02-20 352
Document.querySelectorAll Summary Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. ...
document.querySelectorAll和getElementById的区别
05-07
而document.querySelectorAll接受一个CSS选择器作为参数，可以根据选择器的规则来查找元素。 3. 兼容性：getElementById是DOM标准中定义的方法，几乎所有浏览器都支持。而document.querySelectorAll是在较新的...
document.querySelectorAll和document.querySelector
05-24
`document.querySelectorAll` 方法返回文档中所有匹配指定选择器的元素，如果找不到匹配的元素，则返回空的 NodeList 对象。 例如： ```javascript const elements = document.querySelectorAll('.example'); ``` ...
document.querySelectorAll中怎么过虑node的属性
09-03
通过在选择器中使用属性选择器，可以根据node元素的属性值来选择匹配的元素。 属性选择器有以下几种形式： 1. selector[attribute]：选择具有attribute属性的元素。 2. selector[attribute=value]：选择属性...
js document.querySelectorAll
10-09
document.querySelectorAll是JavaScript中的一个方法，用于获取匹配指定选择器的所有元素。 使用document.querySelectorAll方法时，需要传入一个选择器作为参数。选择器可以是CSS选择器，用于匹配元素的特定样式或...
document.querySelectorAll 添加样式
08-25
要给通过 `document.querySelectorAll` 选择的元素添加样式，你可以使用 `forEach` 循环遍历每个选中的元素，并使用 `style` 属性来设置样式。以下是一个示例代码： ```javascript const elements = document....
document.querySelector用法
qq_46312886的博客
04-08 1582
是一个DOM方法，它接受一个CSS选择符参数，返回文档中第一个匹配该选择符的元素。如果没有匹配的元素，则返回null。只会返回一个匹配的元素，如果需要返回所有匹配的元素，可以使用。也支持传递多个选择器并返回匹配的第一个元素。除了返回第一个匹配的元素，
document.querySelector和querySelectorAll方法
严文文 Chris
12-20 4949
特点: querySelector纸皮片返回第一个元素,如果没有匹配项,返回null querySelectorAll 返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组) 返回的结果是静态的,之后对document结构的改变不会影响到之前取到结果 她们可以接受三种类型的参数:id(#),class(.),标签 var obj = document.querySelec...
javascript：document.querySelectorAll函数
听海边涛声
06-12 608
javascript：document.querySelectorAll函数
document.querySelector()方法
热门推荐
qq_44885775的博客
04-26 7万+
javascript dom 查找匹配
选择器 document.querySelector()
蒲公英芽的博客
01-03 1万+
获取页面中的元素可以通过以下几种途径： 通过 id 名 通过 标签名 通过 class 名 通过 name 的值 querySelector 对应的方法为： document.getElementById("")，根据id获取元素，只能获取唯一一个，只能使用document获取。 document.getElementById(""); //根据id获取元素，只能获取唯一一个 //只能使用...
js根据自定义的属性来查找节点
︶￣城南花已开
12-27 2040
js 操作节点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值