文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载本篇文章围绕 javascript.info 教程中获取自定义属性Get the attribute这一经典练习展开演示如何通过属性选择器选中带有data-widget-name的元素并分别用elem.dataset.widgetName与elem.getAttribute(data-widget-name)读取其值。读完本文你将掌握 DOM 属性property与 HTML 属性attribute的本质区别、四个属性操作 API、data-*自定义数据的正确打开方式以及何时该用getAttribute而非直接访问 DOM 属性。任务背景从 HTML 中提取组件自定义数据该练习出自 2-ui/1-document/06-dom-attributes-and-properties 章节属于 DOM 属性与 HTML 属性专题下的第一道动手题。题目要求见 task.md非常简单直白编写代码从文档中选中带有data-widget-name属性的元素并读取它的值。给定的起始 HTML 如下!DOCTYPE html html body div>!DOCTYPE html html body div>document.querySelectorAll([data-widget-name]).forEach(elem { console.log(elem.dataset.widgetName); });属性选择器还可以做更精确的匹配例如[data-widget-namemenu]只匹配值恰为menu的元素[data-widget-name^m]匹配值以m开头的元素。这些语法在 CSS 与querySelector/querySelectorAll中完全通用。第二步读取属性值两种方式参考答案给出了两种等价读取方式方式代码适用场景datasetelem.dataset.widgetName读取data-*前缀的自定义属性最推荐getAttributeelem.getAttribute(data-widget-name)读取任意属性含非data-*属性的原始字符串值elem.dataset.widgetName走的是dataset属性——所有data-*属性都会被浏览器自动收集进elem.dataset对象属性名去掉data-前缀连字符写法自动转为小驼峰data-widget-name→widgetName。elem.getAttribute(data-widget-name)则是通用属性 API传入完整属性名返回 HTML 中原样书写的字符串值。深入原理DOM 属性与 HTML 属性的区别为什么同一份数据会有dataset和getAttribute两种读法因为浏览器解析 HTML 时对元素节点做了两套记录HTML 属性attributeHTML 源码中写的东西例如div>body idtest somethingnon-standard script alert(document.body.id); // test // non-standard attribute does not yield a property alert(document.body.something); // undefined /script /body两者的核心差异可以总结为下表维度DOM 属性PropertiesHTML 属性Attributes本质DOM 对象上的 JavaScript 属性HTML 中书写的内容类型任意值标准属性有规范定义的类型永远是字符串名称区分大小写不区分大小写由于属性名不区分大小写getAttribute(About)与getAttribute(about)效果相同而属性值永远被转成字符串例如setAttribute(Test, 123)会把数值123存储为字符串123。完整的属性操作 API任务只涉及读取但实际开发中常配套使用其余三个 API。它们是操作 HTML 属性的四个基本方法方法作用elem.hasAttribute(name)检查元素是否拥有该属性elem.getAttribute(name)获取属性值字符串elem.setAttribute(name, value)设置属性值elem.removeAttribute(name)移除属性此外elem.attributes是一个可迭代集合包含元素上所有属性标准的和非标准的每个元素是Attr对象带name和value属性for (let attr of elem.attributes) { console.log(${attr.name} ${attr.value}); }属性与 DOM 属性的同步机制对标准属性两者通常自动双向同步修改id属性elem.id属性随之更新反向亦然。但有例外——input.value只同步属性 → 属性反向不成立input script let input document.querySelector(input); input.setAttribute(value, text); alert(input.value); // text属性同步到了 property input.value newValue; alert(input.getAttribute(value)); // textproperty 没有同步回 attribute /script这正是读原始值用getAttribute这一建议的根源用户操作会改变value等 DOM 属性而 HTML 中原本写的是什么仍保存在属性里。同理href的 DOM 属性永远是完整解析后的 URL即使源码里只写了#helloa.href也会是http://site.com/page#hello要拿到原样书写的值必须用a.getAttribute(href)。这道题的姊妹练习 Make external links orange 正是利用了这一区别判断外链时使用link.getAttribute(href)而非link.href因为需要的是 HTML 中的原始值。为什么推荐>style .order[data-order-statenew] { color: green; } .order[data-order-statepending] { color: blue; } .order[data-order-statecanceled] { color: red; } /style div idorder classorder>赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐从 DOM 读取>从 DOM 读取 data widget name 自定义属性getAttribute 与 dataset 完整指南 在现代 JavaScript 教程Mo文档/教程前端FASTElementDefinition.attributes 属性详解microsoft/fast-element 自定义元素属性元数据的内幕FASTElementDefinition.attributes 属性详解microsoft/fast element 自定义元素属性元数据的内幕 导读 F前端UI组件terraform-provider-aws 数据源详解使用 aws_bedrock_custom_model 读取 Amazon Bedrock 自定义模型属性terraform provider aws 数据源详解使用 aws_bedrock_custom_model 读取 Amazon Bedrock 自定义模型IaC云原生基础设施创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考