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

秒速五厘米 2022-05-17 04:04 556阅读 0赞

### jQuery有data()方法可以获取到自定义的元素节点，而原生JS获取则要用到querySelector以及querySelectorAll这两个方法。 ###

### 用代码写一下。 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>js获取自定义属性的元素</title>
    	</head>
    	<body>
    		<div data-id='123'>123</div>
    		<div data-id='123'>456</div>
    		<div data-id='123'>789</div>
    		<div data-id='123'>1000</div>
    	</body>
    </html>
    <script type="text/javascript">
    	
    	//querySelector只能获取到第一个匹配的元素
    	let ele=document.querySelector('[data-id="123"]');
    	console.log(ele.length);
    	console.log(ele.innerHTML);
    	
    	//querySelectorAll可以获取到多个匹配的值,如果只有一个,可以通过下标[0]来取值
    	let elelist = document.querySelectorAll('[data-id="123"]');
    	console.log(elelist.length);
    	console.log(elelist[0].innerHTML);
    	console.log(elelist[1].innerHTML);
    	console.log(elelist[2].innerHTML);
    	console.log(elelist[3].innerHTML);
    	
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，556人围观）

还没有评论，来说两句吧...

相关阅读

相关 flowable自定义节点属性

1、模板定义xml中增加如下内容（节点标签下extensionElements增加自定义属性(标签)）： ![20200310085028858.png][] 2、自定义任

灰太狼/ 2023年07月12日 14:41/ 0 赞/ 17 阅读

相关 Vue 获取dom元素中的自定义属性值

[https://www.jianshu.com/p/969285fc7729][https_www.jianshu.com_p_969285fc7729] 推荐

向右看齐/ 2023年02月13日 14:41/ 0 赞/ 22 阅读

相关【js】原生JS获取元素和修改元素属性

原生js获取标签可以使用内置对象document，获取到标签之后可以直接获取或修改属性 1.document获取标签 getElementById() 根据id

ゝ一世哀愁。/ 2022年11月26日 12:00/ 0 赞/ 235 阅读

相关 JS_js设置自定义属性，js获取自定义属性,setAttribute,getAttribute

setAttribute,getAttribute setAttribute(“属性名”,“属性值”) 设置自定义属性： document.getElemen

﹏ヽ暗。殇╰゛Y/ 2022年11月21日 14:58/ 0 赞/ 225 阅读

相关 java编写节点自定义属性,Activiti 任务节点自定义扩展属性

很多时候因为自己的业务需求需要修改节点的属性例如需要在用户任务节点添加部门与岗位属性首先修改stencilset.json 在propertyPackages下添加岗

以你之姓@/ 2022年11月18日 01:38/ 0 赞/ 323 阅读

相关 javascript根据元素自定义属性获取元素，操作元素

转自[javascript根据元素自定义属性获取元素，操作元素][javascript] function getElementByAttr(tag,attr,val

妖狐艹你老母/ 2022年06月16日 06:29/ 0 赞/ 820 阅读

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

jQuery有data()方法可以获取到自定义的元素节点，而原生JS获取则要用到querySelector以及querySelectorAll这两个方法。用代码写一下

秒速五厘米/ 2022年05月17日 04:04/ 0 赞/ 557 阅读

相关 GooFlow获取节点/线信息和自定义节点属性

使用bootstrap 和 gooflow 完成demo 参考 [Jquery版API文档][Jquery_API] 用到最主要的两个数据结构定义 1、描述单个节点

柔情只为你懂/ 2022年02月28日 05:22/ 0 赞/ 525 阅读

相关 JavaScript DOM查询，原生js实现元素子节点的获取

在网页网页开发中，经常会需要获取某个网页元素的子元素，然后对其进行时间绑定、或样式修改等网页行为。这些操作对于jquery来说很容易，但是对于原生js会稍微麻烦一些。一、c

快来打我*/ 2021年11月09日 21:48/ 0 赞/ 807 阅读

相关原生js获取元素样式

原生js获取元素样式最终版： function getStyle(ele) { var style = null;

红太狼/ 2020年06月22日 16:08/ 0 赞/ 897 阅读