DOM-操作元素之自定义属性值的提取

原创 已于 2022-09-30 16:31:27 修改 · 331 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

于 2022-09-30 16:28:26 首次发布
本文介绍了如何在JavaScript中获取HTML元素的内置属性和自定义属性。element.属性用于获取元素的基本属性，而element.getAttribute('属性')则用于获取开发者自定义的属性值，帮助开发者更好地操控网页元素。

一、获取属性值

element.属性  获取属性值  【获取内置属性值，即元素本身自带的属性】

element.getAttribute('属性') 【获取自定义的属性，也就是我们程序员自定义的属性】

二、例子

 

DOM（一）：获取页面元素、操作元素、自定义属性
weixin_53912712的博客
12-23 2143
获取页面元素、操作元素
在Vue中获取自定义属性方法:data-id的实例
10-14
`data-id`就是一个自定义属性，通常用于标识或区分不同的元素。本篇将详细解释如何在Vue中使用`data-id`以及与之相关的其他知识点。 1. **获取自定义属性**： 在Vue中，我们通常使用事件监听器配合`v-on`指令...
12获取dom元素
qq_47670443的博客
05-10 845
1什么是DOM（Document Object Model-文档对象模型）是用来呈现以及与仁义HTML或XML文档交互的API，DOM是浏览器提供的一套专门用来操作网页内容的功能。 DOM对象：浏览器
【自学javascript笔记】DOM对象获取元素以及Date()对象的应用——单击按钮显示时间
qq_51843898的博客
01-24 1327
我们在学习了html与CSS之后一定会产生这样的疑问：我们在平时上网过程中常见的交互效果，比如说“单击按钮显示内容”，这个是怎么做出来的呢？今天我们就来探讨一下，如何实现事件的触发。以上便是如何用js实现一些用户交互事件的方法，主要讲述了什么是事件的三要素，如何获取事件对象（重要），以及如何定义事件执行程序，并给出了应用模版。
DOM常用几种获取元素属性方式
m0_68331352的博客
07-30 7148
DOM常用几种获取元素属性方式
uniapp点击事件后，拿到当前dom自定义属性data的值
游九尘的博客
06-02 1601
【代码】uniapp点击事件后，拿到当前dom自定义属性data的值。
js 点击a标签 获取a的自定义属性方法
10-21
在本篇教程中，我们将探索如何在点击事件发生时，获取一个a标签上的自定义属性值。 首先，我们必须理解自定义属性的概念。在HTML中，我们可以通过在元素上使用data-前缀来创建自定义属性。这些自定义属性通常用于...
n-dynamic-input 自定义操作按钮
最新发布
09-04
但是，用户特别提到了“自定义操作按钮”，我们可能需要为动态输入数组中的每一项添加自定义的操作按钮（比如除了默认的删除按钮外，增加一个自定义按钮）。 根据Naive UI的文档，`n-dynamic-input`组件可以通过...
Chrome-Custom-DOM:Chrome 扩展允许使用谓词来匹配 DOM 节点并将它们传递给自定义函数
06-30
在 Chrome-Custom-DOM 的上下文中，谓词是一个函数，用于判断一个 DOM 节点是否符合某些条件，例如节点的标签名、属性值等。 3. **Chrome 扩展**：Chrome 扩展是使用 Web 技术（HTML、CSS 和 JavaScript）构建的...
用jquery获取自定义的标签属性的值简单实例
10-21
jQuery的`attr()`方法是获取或设置元素属性值的主要手段。但在本例中，我们更倾向于使用CSS选择器来定位具有特定属性的元素，然后使用`html()`或`text()`方法获取其内容。 以下是实例代码的详细解析： 1. 首先，...
js获取DOM元素的方法
weixin_40923558的博客
02-02 331
js获取dom元素的方法 通过ID获取 (getElementById) 通过name属性 (getElementByTagName) 通过类名 (getelementsByClassName) 通过选择器获取一个元素 (querySelector) 通过选择器获取一组元素 (querySelectorAll) 获取HTML的方法 (document.documentElement) ...
简述data-属性的用法(如何设置，如何获取),有何优势？
m0_51958500的博客
02-22 4175
简述data-属性的用法(如何设置，如何获取),有何优势？
js通过'data-xxx'自定义属性获取dom元素
weixin_39889465的博客
01-10 2万+
当我们需要改变某一个元素的内容时，首先要获取该dom元素。其次，通过dom.innerHtml等改变dom的内容。但是针对一些没有class、id同时页面的元素还是动态渲染的场景，我们又该如何做呢？ 例如，下图中的div没有class，id，只有data-fieldmark自定义属性，且其值只有‘field’部分不变，数值部分根据不同的页面值不同，针对这样的场景我们又该怎么获取到dom呢？ wi...
js--dom元素自定义属性
weixin_44892520的博客
08-02 1230
1)设置自定义属性：setAttribute 2)获取自定义属性：getAttribute 3)移出自定义属性：removeAttribute
DOM：获取自定义属性的两种方法，及自定义属性的规范
weixin_46682277的博客
03-20 5024
使用自定义属性的目的，是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中，使用起来会比较方便。 但有些自定义属性我们会不容易判断，不知道到底是内置属性还是自定义属性。 因此，在H5中给我们新增了自定义属性： H5规定自定义属性以data-开头作为属性名并赋值。 <div data-index = 1></div> 或者也可以使用JS设置一个自定义属性： element.setAttribute("data-index",0); <div data-index
DOM--自定义属性的操作
JJ_Smilewang的博客
06-15 2736
DOM元素属性分为内置属性和自定义属性，比如我们常见的class、id、src、input等属性，都是内置属性，简单理解就是元素自带的属性。而自定义属性就是程序员为了方便使用而自己给元素设置的属性。① element.属性 获取属性值。 ② element.getAttribute('属性');区别： (1) element.属性 获取内置属性值（元素本身自带的属性），如img..src (2) element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性;
Vue 获取dom元素中的自定义属性值
Stars_in_rain的博客
08-12 3728
方法一：通过绑定函数传参直接获取DOM元素自定义的值 <div id="app"> <button @click="getData($event,'100')"></button> </div> methods : { getData(e,num) { console.log(num); // 100 } } 方法二：通过$ref属性获取 <div id="app"> <button dat
js——如何获取data-id中的值
热门推荐
肖的博客
08-17 3万+
转载出处：https://blog.youkuaiyun.com/ke3863834/article/details/76944265 一般data-id用于一些菜单栏的匹配，例如下面这个： 12 //一级菜单 &amp;amp;lt;div class=&amp;quot;wrap&amp;quot; id=&amp;quot;test&amp;quot;&amp;amp;gt; &amp;amp;lt;
DOM操作-----获取自定义属性值
weixin_43188011的博客
09-18 509
DOM操作-----获取自定义属性值 element.getAttribute(‘属性’)：主要获得自定义的属性，我们程序员自定义的属性，而element.属性是获取内置属性值，即元素本身自带的属性。 【设置元素的属性值】 1：element.属性 = '值' 2：element.setAttribute('属性','值'); 【移除属性值】 1：removeAttribute(属性) ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值