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

最新推荐文章于 2025-04-28 01:00:00 发布

慕容屠苏

最新推荐文章于 2025-04-28 01:00:00 发布

阅读量1.9w

点赞数 12

CC 4.0 BY-SA版权

分类专栏：大前端爬坑之路 web移动端

本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/103558324

大前端爬坑之路同时被 2 个专栏收录

188 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

web移动端

67 篇文章

订阅专栏

本文介绍如何利用JavaScript根据自定义属性dataid的值来定位DOM元素，以找到dataid为222的标签。

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']")

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

慕容屠苏

关注关注

12
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

JavaScript中获取自定义元素的方法】——深入解析自定义元素的获取途径

TechNovaX的博客

09-19

334

getElementById()函数是JavaScript中最常用的获取元素的方法之一。要获取自定义元素，您可以通过在元素的id属性前添加"#"符号来指定元素的id，并使用该函数进行获取。在JavaScript中获取自定义元素是Web开发中常见的需求之一。本文将详细介绍如何通过多种方法获取自定义元素，并提供相应的代码示例和详细描述，助您轻松解决相关问题。方法一：使用getElementById()函数获取自定义元素。方法二：使用querySelector()函数获取自定义元素。

Fabric.js 保存自定义属性

weixin_39415598的博客

10-11

1613

theme: smartblue 本文简介点赞 + 关注 + 收藏 = 学会了之前有些工友留言：在 fabric.js 中怎么保存元素的自定义属性？比如，创建一个矩形，这个矩形有自己的 ID 属性，在执行序列化操作出来的结果却看不到 ID 属性了。如何在序列化时输出自定义属性？其实答案都写在文档里。本文会用真实代码演示一下如何在序列化时输出自定义属性。动手试试...

2 条评论您还未登录，请先登录后发表或查看评论

js中获取自定义元素的方法

qq_41624138的博客

08-24

3633

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

1327

关于JS元素自定义属性的获取方式

JS 中常见的七种获取元素的方法

nana_lala的博客

03-22

2040

本文列举了 JS 中常见的七种获取元素的方法和一些应用场景：getElementById()、getElementsByTagName()、getElementsByClassName()、querySelector() 和 querySelectorAll()、getElementsByName()、document.title 和 document.body 等等。

js获取元素

qq_52395816的博客

06-12

7558

js获取元素

原生JS获取含有自定义属性的元素节点

08-06

1万+

jQuery有data()方法可以获取到自定义的元素节点，而原生JS获取则要用到querySelector以及querySelectorAll这两个方法。用代码写一下。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport"

JS实现获取自定义属性data值的方法示例

10-17

在前端开发中，通过JavaScript来操作DOM是...这样的自定义属性可以用来存储对JavaScript来说必要的信息，但不会对页面的外观或者功能产生影响。示例代码中使用了自定义属性data-leaves和data-plant-height： ```html ...

js 点击a标签获取a的自定义属性方法

11-26

在JavaScript编程中，有时我们需要获取HTML元素的特定属性，尤其是自定义属性，以便在用户交互时进行处理。本文将详细讲解如何在JavaScript中点击`<a>`标签并获取其自定义属性的方法，以及如何解决在jQuery环境下...

jquery遍历标签中自定义的属性方法

10-21

除了遍历，我们还可以根据已知的`sortid`来查找对应的元素，并获取其属性值。例如，若想获取`sortid`为`'nav_1'`的元素的HTML内容和`name`属性，可以使用如下代码： ```javascript $("[sortid='nav_1']").attr(...

浅谈JS读取DOM对象(标签)的自定义属性

10-21

下面小编就为大家带来一篇浅谈JS读取DOM对象(标签)的自定义属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

js根据属性查找元素代码

-==GIVING & SHARING==-

09-16

2152

function getElementByAttribute(aAttribute,aValue,aInElement) ...{ var ElementVerifier; var Elements=new Array(); function SearchElement(aElement) ...{ if(aEleme

js通过'data-xxx'自定义属性获取dom元素

weixin_39889465的博客

01-10

2万+

当我们需要改变某一个元素的内容时，首先要获取该dom元素。其次，通过dom.innerHtml等改变dom的内容。但是针对一些没有class、id同时页面的元素还是动态渲染的场景，我们又该如何做呢？例如，下图中的div没有class，id，只有data-fieldmark自定义属性，且其值只有‘field’部分不变，数值部分根据不同的页面值不同，针对这样的场景我们又该怎么获取到dom呢？ wi...

JS获取元素属性和自定义属性

最新发布

让学习成为一种习惯 ( 韩曙亮の技术博客 )

04-28

1616

一、JavaScript 自定义属性操作 1、获取属性值 2、设置属性值 3、移除属性 4、完整代码示例二、TAB 栏示例 1、需求说明 2、TAB 按钮设置 3、TAB 按钮设置 4、自定义属性保存选中索引值 5、完整代码示例 6、执行结果

根据自定义属性获取元素

Rainman_的博客

05-13

1680

<div data-id="example"></div> <script> var element = querySelector('div[data-id=example]'); </script>

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相关的逻辑，可能会引发其他问题，所以使用时需要谨慎。