js怎么根据自定义属性的值来查找元素

最新推荐文章于 2022-06-12 20:41:41 发布
最新推荐文章于 2022-06-12 20:41:41 发布
阅读量1.7w 收藏 16
点赞数 10
分类专栏： 大前端爬坑之路 web移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerryqpw/article/details/103558324
版权
本文介绍如何利用JavaScript根据自定义属性dataid的值来定位DOM元素，以找到dataid为222的标签。
摘要由CSDN通过智能技术生成

js怎么根据自定义属性的值来查找元素

 

例如有个自定义属性dataid，我现在要定位到dataid为222的标签，js怎么实现？

<div dataid="111">a</div>
<div dataid="222">b</div>
<div dataid="333">c</div>
<div dataid="444">d</div>

解决方法：

原生js
document.querySelector("div[dataid='222']")
jquery
$("div[dataid='222']")

 

 

慕容屠苏
关注
  • 10
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
js根据属性查找元素代码
-==GIVING & SHARING==-
09-16 2049
 function getElementByAttribute(aAttribute,aValue,aInElement)  ...{      var ElementVerifier;        var Elements=new Array();      function SearchElement(aElement)        ...{           if(aEleme
js中获取自定义元素的方法
qq_41624138的博客
08-24 3444
console.log(this.dataset.type); //原生js第一种方法 console.log(this.dataset['type']); //原生js第二种 console.log($(this).data('type')); //jquery console.log($(this).attr("data-type")); //jquery 原生js中获取自定义属性的方法： jQuery: 1.1....
关于JS元素自定义属性的获取方式
weixin_69742797的博客
05-08 1184
关于JS元素自定义属性的获取方式
js获取元素
qq_52395816的博客
06-12 7249
js获取元素
js通过'data-xxx'自定义属性获取dom元素
weixin_39889465的博客
01-10 2万+
当我们需要改变某一个元素的内容时，首先要获取该dom元素。其次，通过dom.innerHtml等改变dom的内容。但是针对一些没有class、id同时页面的元素还是动态渲染的场景，我们又该如何做呢？ 例如，下图中的div没有class，id，只有data-fieldmark自定义属性，且其值只有‘field’部分不变，数值部分根据不同的页面值不同，针对这样的场景我们又该怎么获取到dom呢？ wi...
原生JS获取含有自定义属性的元素节点
08-06 1万+
jQuery有data()方法可以获取到自定义的元素节点，而原生JS获取则要用到querySelector以及querySelectorAll这两个方法。 用代码写一下。   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport"
js 点击a标签 获取a的自定义属性方法
11-26
在JavaScript编程中，有时我们需要获取HTML元素的特定属性，尤其是自定义属性，以便在用户交互时进行处理。本文将详细讲解如何在JavaScript中点击`<a>`标签并获取其自定义属性的方法，以及如何解决在jQuery环境下...
用jquery获取自定义的标签属性的值简单实例
10-21
接下来，我们将学习如何使用jQuery来获取这些自定义属性的值。jQuery的`attr()`方法是获取或设置元素属性值的主要手段。但在本例中，我们更倾向于使用CSS选择器来定位具有特定属性的元素，然后使用`html()`或`text()...
初步认识css自定义属性
09-22
通过`window.getComputedStyle()`方法，你可以获取元素的自定义属性值，通过`element.style.setProperty()`可以设置这些值。 总的来说，CSS自定义属性是CSS模块化和可维护性的强大工具。它们提高了开发效率，使得...
javascript基础之查找元素的详细介绍(访问节点)
10-27
虽然jQuery提供了丰富的选择器，但原生JavaScript同样提供了多种方法来查找元素，包括`getElementById()`、`getElementsByTagName()`、`getElementsByName()`以及自定义的`getByClass()`方法。 1. `getElementById...
浅谈JS读取DOM对象(标签)的自定义属性
10-21
下面小编就为大家带来一篇浅谈JS读取DOM对象(标签)的自定义属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
遍历DOM对象内的元素属性示例代码
09-04
在DOM元素对象中，这些属性包括如`id`、`className`、`innerHTML`等标准属性，也可能包含自定义属性。以下是使用`for...in`循环遍历`objBtn`元素属性的代码： ```javascript function showBtn() { var tmp = ""; ...
JS获取元素属性和自定义属性
热门推荐
马优晨
09-14 16万+
昨天有同事问我，怎么获取自定义元素的属性，我意识到这个确实是个 问题，所有总结一下自己的心得。 获取元素的属性分为两种类型：1-获取元素常见的属性（class,id,type,value……）2-获取自定义的元素的属性（data-value,data-mess…….）获取元素的属性，设置元素的属性： 1-原生JS** 设置属性 .setAttribute("属性","值")
根据自定义属性获取元素
Rainman_的博客
05-13 1568
<div data-id="example"></div> <script> var element = querySelector('div[data-id=example]'); </script>
用javascript获取自定义属性
weixin_48047636的博客
04-27 4074
<body> <div id="demo" index="zhu" class="nav"></div> <script> //先获取属性值 var div_js=document.querySelector("div"); //用element获取div里面的元素属性id 直接console element.属性 //语法:element.属性 console.l
2021-03-09js学习-data(),元素操作方法
weixin_44767679的博客
03-09 309
问题: data()方法原理? Data()的使用方法? 使用data()方法来获取自定义属性怎么写?有什么特点 jQuery中对普通元素操作,获取操作,修改内容操作? jQuery中获取普通元素文本内容方法? jQuery中设置表单值方法? JQuery隐式迭代与普通遍历的区别 JQuery中遍历方法是什么? jQuery中创建元素的方法 JQuery 中添加元素的方法 jQuery 中删除元素方法? 回答: data()方法原理? a) Data() 这里面的数据是存放在元素的内存里面的 D
js 获取指定属性的所有dom元素
weixin_41463944的博客
08-14 1290
let dataCodeList = [] let obj = document.querySelectorAll('[data-code]') for (let i = 0; i < obj.length; i++) { dataCodeList.push(obj[i].dataset.code) }
div如何实现横向滚动
kerryqpw的博客
12-26 3万+
实现多个div在容器内横向排列， 利用white-space这个属性防止父容器内容换行， 同时将容器内元素设置为行内块 display：inline-block来实现。         实现代码： &lt;div style="width: 100%;margin-top: 10px;margin-bottom: 30px; white-space: nowrap;overf...
vue3 根据自定义属性查找dom
最新发布
05-10
Vue3 中提供了两种方式用于根据自定义属性查找DOM。 第一种方式是通过使用 `ref` 和 `$refs`。我们可以在模板中使用 `ref` 定义一个引用名，然后在对应的Vue实例中通过 `$refs` 访问该引用名。通过 `$refs` 可以直接获取到对应的DOM元素，然后就可以查找自定义属性了。例如，在模板中定义一个自定义属性`data-id`，代码如下： ```html <template> <div ref="myDiv"> <div data-id="123">...</div> </div> </template> ``` 然后在Vue实例中可以通过 `$refs` 获取到 `myDiv` 这个引用名对应的DOM元素，并在其中查找自定义属性为 `data-id` 的DOM元素，代码如下： ```javascript export default { mounted() { const myDiv = this.$refs.myDiv; // 获取引用名为`myDiv`对应的DOM元素 const myEle = myDiv.querySelector('[data-id="123"]'); // 查找自定义属性为`data-id`、值为`123`的DOM元素 // 其他逻辑... }, }; ``` 第二种方式是使用 `querySelector` 或 `querySelectorAll` 方法直接在DOM上进行查找。这种方式需要在Vue实例中手动访问DOM元素，并在其中查找自定义属性。例如，在Vue实例中通过`querySelector`方式查找自定义属性为 `data-id` 的DOM元素，代码如下： ```javascript export default { mounted() { const myEle = document.querySelector('[data-id="123"]'); // 查找自定义属性为`data-id`、值为`123`的DOM元素 // 其他逻辑... }, }; ``` 需要注意的是，这种方式需要在Vue组件中手动处理DOM相关的逻辑，可能会引发其他问题，所以使用时需要谨慎。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值