尧图网站建设 
文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载本文以《现代 JavaScript 教程中文版》中「特性和属性Attributes and properties」章节及其练习题「获取特性Get user attribute」为核心讲解 HTML 特性attribute与 DOM 属性property的区别、四类特性操作方法getAttribute/setAttribute/hasAttribute/removeAttribute以及专为自定义数据设计的data-*特性与dataset属性。读完本文你将能熟练地从文档中选取带data-widget-name等自定义特性的元素并读取其值也能理解为什么读取原始 HTML 值时应该使用getAttribute而非 DOM 属性。从一道练习题说起获取data-widget-name在本仓库的 1-get-user-attribute/task.md 中有一道重要度为 5最高的练习题编写代码从文档中获取带有data-widget-name特性的元素并读取它的值。题目给出的 HTML 骨架如下div>!DOCTYPE html html body div>body idtest somethingnon-standard script alert(document.body.id); // test alert(document.body.something); // undefined —— 非标准特性没有对应属性 /script /body还要注意「标准」是相对于元素类型而言的type对inputHTMLInputElement是标准特性因此input.type返回text但type对bodyHTMLBodyElement并非标准特性所以body.type是undefined。既然非标准特性没有对应的 DOM 属性如何访问它们答案就是本章介绍的四类特性操作 API。特性操作的四个方法get / set / has / remove所有特性都可以通过以下四个方法访问它们操作的实际上是 HTML 中的内容elem.hasAttribute(name)—— 检查特性是否存在elem.getAttribute(name)—— 获取特性值elem.setAttribute(name, value)—— 设置特性值elem.removeAttribute(name)—— 移除特性。此外elem.attributes返回一个内建Attr类的可迭代对象集合其中每个条目都有name和value属性包含元素的所有特性标准与非标准。文章中的扩展示例展示了这些 API 的完整行为body div idelem aboutElephant/div script alert( elem.getAttribute(About) ); // (1) Elephant读取特性名大小写不敏感 elem.setAttribute(Test, 123); // (2) 写入值会被转为字符串 123 alert( elem.outerHTML ); // (3) 特性在 HTML 中可见 for (let attr of elem.attributes) { // (4) 列出所有特性 alert( ${attr.name} ${attr.value} ); } /script /body需要记住的四个行为特征getAttribute(About)能读到aboutElephant的值因为特性名大小写不敏感任何值赋给特性后都会变成字符串所以123变成123通过setAttribute设置的特性会真实反映在outerHTML中attributes集合是可迭代的for...of即可遍历全部特性。属性—特性同步大多数情况双向value是例外当一个标准特性被改变对应的属性会自动更新反过来属性改变时特性通常也会同步除少数特例。本章用id演示了这种双向同步input script let input document.querySelector(input); // 特性 属性 input.setAttribute(id, id); alert(input.id); // id属性被更新了 // 属性 特性 input.id newId; alert(input.getAttribute(id)); // newId特性被更新了 /script但input.value是著名的例外它只能从特性同步到属性反向不行。input script let input document.querySelector(input); input.setAttribute(value, text); alert(input.value); // text特性 属性生效 input.value newValue; alert(input.getAttribute(value)); // text属性 特性不生效 /script这个「不对称」在实际开发中非常有用当用户修改了输入框内容导致value属性变化之后我们仍可从value特性中恢复 HTML 里写的「原始值」用于表单重置或脏值比对等场景。DOM 属性的多类型特征与href特例与特性「永远是字符串」不同DOM 属性的类型更丰富布尔型input.checked是布尔值。对input idinput typecheckbox checkedinput.getAttribute(checked)返回空字符串特性只表示「存在」而input.checked是true对象型style特性是字符串color:red;font-size:120%而style属性是CSSStyleDeclaration对象div.style.color返回red字符串但经过加工href属性始终返回完整的 URL即使特性里写的是相对路径或#hasha ida href#hellolink/a script alert(a.getAttribute(href)); // #helloHTML 中原始写法 alert(a.href); // http://site.com/page#hello完整 URL /script这就是本仓库配套练习题 2-yellow-links/solution.md 特意强调「用link.getAttribute(href)而不是link.href」的原因——外部链接判断需要的是 HTML 中写下的原始值。该题在 solution.view/index.html 中给出了可直接运行的完整页面。非标准特性与data-*为什么自定义数据要用dataset非标准特性的典型用途是把自定义数据从 HTML 传递到 JavaScript或为元素打上「标记」。本章展示了两种场景场景一标记元素并填充数据!-- 标记这个 div 以在这显示 name -- div show-infoname/div !-- 标记这个 div 以在这显示 age -- div show-infoage/div script let user { name: Pete, age: 25 }; for(let div of document.querySelectorAll([show-info])) { let field div.getAttribute(show-info); div.innerHTML user[field]; // 先显示 Pete再显示 25 } /script场景二用特性值驱动样式。与写死多个样式类.order-state-new、.order-state-pending、.order-state-canceled相比用特性管理状态更简单——只需一行div.setAttribute(order-state, canceled)即可切换状态无需增删类名。然而随意使用自定义特性存在风险HTML 语言在持续演进你今天用的非标准特性未来可能被标准采用并赋予新的含义从而产生意料之外的影响。为避免冲突规范保留了data-*特性专供程序员使用并配套提供dataset属性所有以data-开头的特性均被保留供程序员使用它们可以在dataset属性中访问。映射规则简单而直观data-about→elem.dataset.about多词特性data-order-state→ 驼峰式elem.dataset.orderState连字符被移除后续单词首字母大写。本章用订单状态示例演示了完整读写闭环style .order[data-order-statenew] { color: green; } .order[data-order-statepending] { color: blue; } .order[data-order-statecanceled] { color: red; } /style div idorder classorder>let links document.querySelectorAll(a); for (let link of links) { let href link.getAttribute(href); // 必须用 getAttribute而不是 link.href if (!href) continue; // 没有特性 if (!href.includes(://)) continue; // 没有协议 if (href.startsWith(http://internal.com)) continue; // 内部链接 link.style.color orange; }方案二纯 CSS 选择器一步到位let selector a[href*://]:not([href^http://internal.com]); let links document.querySelectorAll(selector); links.forEach(link link.style.color orange);方案一强调link.getAttribute(href)与link.href的差异前者返回 HTML 原文后者返回完整 URL方案二展示了特性选择器[href*://]包含匹配、:not([href^...])排除匹配与querySelectorAll的组合威力。两题放在一起正好覆盖了「定位带特定特性的元素」与「读取/修改特性值」这两大主题。总结何时该用属性何时该用特性本章article.md给出的最终结论非常明确特性attribute—— 写在 HTML 中的内容名字大小写不敏感值永远是字符串属性property—— DOM 对象中的内容名字大小写敏感值类型任意。在大多数情况下优先使用 DOM 属性。只有以下两类需求才回头使用特性需要非标准的特性——但如果它以data-开头应改用dataset属性想读取 HTML 中「所写」的原始值——因为对应 DOM 属性可能已被加工比如href属性永远是完整 URL而getAttribute(href)返回 HTML 原文。开头的练习题虽然只有几行代码却浓缩了本章的精华querySelector([data-widget-name])定位元素、dataset.widgetName/getAttribute(data-widget-name)读取值一套组合拳即可安全、可靠地完成「HTML 传数据给 JavaScript」的任务。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐从 DOM 读取>从 DOM 读取 data widget name 自定义属性getAttribute 与 dataset 完整指南 在现代 JavaScript 教程Mo文档/教程前端一文读懂Taiwan-LLM-7B-v2.1-chat的训练超参数学习率5e-05如何影响模型表现一文读懂Taiwan LLM 7B v2.1 chat的训练超参数学习率5e 05如何影响模型表现 Taiwan LLM 7B v2.1 chat作为一款专为使用>使用 data 属性与 dataset 读取元素自定义数据get user attribute 实战详解 本篇文章围绕 javascript.info 教程中文档/教程前端上一篇如何快速实现Firefox透明主题打造玻璃质感界面的完整指南下一篇SVGOMG浏览器兼容性终极指南跨平台适配解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 基于 DOM 特性与属性教程：用 getAttribute 与 dataset 获取 data-* 自定义特性
文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载本文以《现代 JavaScript 教程中文版》中「特性和属性Attributes and properties」章节及其练习题「获取特性Get user attribute」为核心讲解 HTML 特性attribute与 DOM 属性property的区别、四类特性操作方法getAttribute/setAttribute/hasAttribute/removeAttribute以及专为自定义数据设计的data-*特性与dataset属性。读完本文你将能熟练地从文档中选取带data-widget-name等自定义特性的元素并读取其值也能理解为什么读取原始 HTML 值时应该使用getAttribute而非 DOM 属性。从一道练习题说起获取data-widget-name在本仓库的 1-get-user-attribute/task.md 中有一道重要度为 5最高的练习题编写代码从文档中获取带有data-widget-name特性的元素并读取它的值。题目给出的 HTML 骨架如下div>!DOCTYPE html html body div>body idtest somethingnon-standard script alert(document.body.id); // test alert(document.body.something); // undefined —— 非标准特性没有对应属性 /script /body还要注意「标准」是相对于元素类型而言的type对inputHTMLInputElement是标准特性因此input.type返回text但type对bodyHTMLBodyElement并非标准特性所以body.type是undefined。既然非标准特性没有对应的 DOM 属性如何访问它们答案就是本章介绍的四类特性操作 API。特性操作的四个方法get / set / has / remove所有特性都可以通过以下四个方法访问它们操作的实际上是 HTML 中的内容elem.hasAttribute(name)—— 检查特性是否存在elem.getAttribute(name)—— 获取特性值elem.setAttribute(name, value)—— 设置特性值elem.removeAttribute(name)—— 移除特性。此外elem.attributes返回一个内建Attr类的可迭代对象集合其中每个条目都有name和value属性包含元素的所有特性标准与非标准。文章中的扩展示例展示了这些 API 的完整行为body div idelem aboutElephant/div script alert( elem.getAttribute(About) ); // (1) Elephant读取特性名大小写不敏感 elem.setAttribute(Test, 123); // (2) 写入值会被转为字符串 123 alert( elem.outerHTML ); // (3) 特性在 HTML 中可见 for (let attr of elem.attributes) { // (4) 列出所有特性 alert( ${attr.name} ${attr.value} ); } /script /body需要记住的四个行为特征getAttribute(About)能读到aboutElephant的值因为特性名大小写不敏感任何值赋给特性后都会变成字符串所以123变成123通过setAttribute设置的特性会真实反映在outerHTML中attributes集合是可迭代的for...of即可遍历全部特性。属性—特性同步大多数情况双向value是例外当一个标准特性被改变对应的属性会自动更新反过来属性改变时特性通常也会同步除少数特例。本章用id演示了这种双向同步input script let input document.querySelector(input); // 特性 属性 input.setAttribute(id, id); alert(input.id); // id属性被更新了 // 属性 特性 input.id newId; alert(input.getAttribute(id)); // newId特性被更新了 /script但input.value是著名的例外它只能从特性同步到属性反向不行。input script let input document.querySelector(input); input.setAttribute(value, text); alert(input.value); // text特性 属性生效 input.value newValue; alert(input.getAttribute(value)); // text属性 特性不生效 /script这个「不对称」在实际开发中非常有用当用户修改了输入框内容导致value属性变化之后我们仍可从value特性中恢复 HTML 里写的「原始值」用于表单重置或脏值比对等场景。DOM 属性的多类型特征与href特例与特性「永远是字符串」不同DOM 属性的类型更丰富布尔型input.checked是布尔值。对input idinput typecheckbox checkedinput.getAttribute(checked)返回空字符串特性只表示「存在」而input.checked是true对象型style特性是字符串color:red;font-size:120%而style属性是CSSStyleDeclaration对象div.style.color返回red字符串但经过加工href属性始终返回完整的 URL即使特性里写的是相对路径或#hasha ida href#hellolink/a script alert(a.getAttribute(href)); // #helloHTML 中原始写法 alert(a.href); // http://site.com/page#hello完整 URL /script这就是本仓库配套练习题 2-yellow-links/solution.md 特意强调「用link.getAttribute(href)而不是link.href」的原因——外部链接判断需要的是 HTML 中写下的原始值。该题在 solution.view/index.html 中给出了可直接运行的完整页面。非标准特性与data-*为什么自定义数据要用dataset非标准特性的典型用途是把自定义数据从 HTML 传递到 JavaScript或为元素打上「标记」。本章展示了两种场景场景一标记元素并填充数据!-- 标记这个 div 以在这显示 name -- div show-infoname/div !-- 标记这个 div 以在这显示 age -- div show-infoage/div script let user { name: Pete, age: 25 }; for(let div of document.querySelectorAll([show-info])) { let field div.getAttribute(show-info); div.innerHTML user[field]; // 先显示 Pete再显示 25 } /script场景二用特性值驱动样式。与写死多个样式类.order-state-new、.order-state-pending、.order-state-canceled相比用特性管理状态更简单——只需一行div.setAttribute(order-state, canceled)即可切换状态无需增删类名。然而随意使用自定义特性存在风险HTML 语言在持续演进你今天用的非标准特性未来可能被标准采用并赋予新的含义从而产生意料之外的影响。为避免冲突规范保留了data-*特性专供程序员使用并配套提供dataset属性所有以data-开头的特性均被保留供程序员使用它们可以在dataset属性中访问。映射规则简单而直观data-about→elem.dataset.about多词特性data-order-state→ 驼峰式elem.dataset.orderState连字符被移除后续单词首字母大写。本章用订单状态示例演示了完整读写闭环style .order[data-order-statenew] { color: green; } .order[data-order-statepending] { color: blue; } .order[data-order-statecanceled] { color: red; } /style div idorder classorder>let links document.querySelectorAll(a); for (let link of links) { let href link.getAttribute(href); // 必须用 getAttribute而不是 link.href if (!href) continue; // 没有特性 if (!href.includes(://)) continue; // 没有协议 if (href.startsWith(http://internal.com)) continue; // 内部链接 link.style.color orange; }方案二纯 CSS 选择器一步到位let selector a[href*://]:not([href^http://internal.com]); let links document.querySelectorAll(selector); links.forEach(link link.style.color orange);方案一强调link.getAttribute(href)与link.href的差异前者返回 HTML 原文后者返回完整 URL方案二展示了特性选择器[href*://]包含匹配、:not([href^...])排除匹配与querySelectorAll的组合威力。两题放在一起正好覆盖了「定位带特定特性的元素」与「读取/修改特性值」这两大主题。总结何时该用属性何时该用特性本章article.md给出的最终结论非常明确特性attribute—— 写在 HTML 中的内容名字大小写不敏感值永远是字符串属性property—— DOM 对象中的内容名字大小写敏感值类型任意。在大多数情况下优先使用 DOM 属性。只有以下两类需求才回头使用特性需要非标准的特性——但如果它以data-开头应改用dataset属性想读取 HTML 中「所写」的原始值——因为对应 DOM 属性可能已被加工比如href属性永远是完整 URL而getAttribute(href)返回 HTML 原文。开头的练习题虽然只有几行代码却浓缩了本章的精华querySelector([data-widget-name])定位元素、dataset.widgetName/getAttribute(data-widget-name)读取值一套组合拳即可安全、可靠地完成「HTML 传数据给 JavaScript」的任务。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐从 DOM 读取>从 DOM 读取 data widget name 自定义属性getAttribute 与 dataset 完整指南 在现代 JavaScript 教程Mo文档/教程前端一文读懂Taiwan-LLM-7B-v2.1-chat的训练超参数学习率5e-05如何影响模型表现一文读懂Taiwan LLM 7B v2.1 chat的训练超参数学习率5e 05如何影响模型表现 Taiwan LLM 7B v2.1 chat作为一款专为使用>使用 data 属性与 dataset 读取元素自定义数据get user attribute 实战详解 本篇文章围绕 javascript.info 教程中文档/教程前端上一篇如何快速实现Firefox透明主题打造玻璃质感界面的完整指南下一篇SVGOMG浏览器兼容性终极指南跨平台适配解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考