孙尚香：2023年“能量觉醒”的全新视觉盛宴

核心概念DOM 属性的两类形式在操作前先分清两个易混概念避免踩坑HTML 原生属性标签上写的属性如idbox、srcimg.jpg、classcontentDOM 对象属性JS 获取 DOM 节点后节点对象自带的属性如node.id、node.src、node.className大部分场景下两者可以互通但部分属性有专属写法比如class对应className。

通用操作getAttribute/setAttribute/removeAttribute这是操作所有 HTML 属性的通用方法无论原生属性还是自定义属性都适用兼容性最好。

方法作用语法示例getAttribute(属性名)获取属性值box.getAttribute(id)setAttribute(属性名, 值)设置 / 新增属性box.setAttribute(title, 提示文字)removeAttribute(属性名)删除属性box.removeAttribute(class)代码示例通用方法操作属性html预览div idbox classcontainer data-index1测试div/div script const box document.getElementById(box); //

获取属性 console.log(box.getAttribute(id)); // 输出box console.log(box.getAttribute(class)); // 输出container console.log(box.getAttribute(data-index)); // 输出1自定义属性 //

设置/新增属性 box.setAttribute(title, 这是一个div); // 新增title属性 box.setAttribute(class, new-container); // 修改class属性 box.setAttribute(data-type, test); // 新增自定义data属性 //

删除属性 box.removeAttribute(data-index); // 删除data-index属性 // 查看修改后的HTMLdiv idbox classnew-container data-typetest title这是一个div测试div/div console.log(box.outerHTML); /script

快捷操作DOM 对象直接访问属性对于常用的原生属性如 id、src、href、type 等可以直接通过DOM节点.属性名操作比通用方法更简洁。

⚠️ 注意部分属性名和 HTML 标签里的写法不同核心差异HTML 里的class→ JS 里的className因为 class 是 JS 关键字HTML 里的forlabel 标签 → JS 里的htmlForHTML 里的readonly→ JS 里的readOnly驼峰命名。

代码示例快捷操作属性html预览img idimg srcold.jpg alt旧图片 input typetext idinput classform-input readonly label forinput idlabel输入框/label script const img document.getElementById(img); const input document.getElementById(input); const label document.getElementById(label); //

获取属性 console.log(img.src); // 输出完整的图片URL如http://xxx/old.jpg console.log(input.className); // 输出form-input对应class属性 console.log(label.htmlFor); // 输出input对应for属性 console.log(input.readOnly); // 输出true布尔值不是字符串 //

设置属性 img.src new.jpg; // 修改图片地址 img.alt 新图片; // 修改alt属性 input.className new-form-input; // 修改class input.readOnly false; // 取消只读 //

清空属性部分属性可直接赋值为空 img.alt ; /script

特殊属性处理

class 属性推荐用 classList操作样式类更灵活直接修改className会覆盖全部类而classList支持「添加、移除、切换、判断」单个类是操作样式类的最佳方式。

html预览div iddemo classbox测试样式/div script const demo document.getElementById(demo); //

添加类不会覆盖原有类 demo.classList.add(active, red); // 可同时加多个类 //

移除类 demo.classList.remove(box); //

切换类有则删无则加适合点击切换场景 demo.classList.toggle(active); //

判断是否包含某个类 console.log(demo.classList.contains(red)); // 输出true /script

data-* 自定义属性推荐用 datasetHTML5 新增的data-*自定义属性如data-id、data-name可以通过dataset快捷访问无需写getAttribute。

html预览div iduser data-id1001 data-user-name张三用户信息/div script const user document.getElementById(user); //

获取data属性自动转驼峰data-user-name → userName console.log(user.dataset.id); // 输出1001 console.log(user.dataset.userName); // 输出张三 //

设置data属性 user.dataset.age 20; // 新增data-age20 user.dataset.userName 李四; // 修改data-user-name李四 //

删除data属性赋值为null或delete delete user.dataset.age; /script

布尔属性如 checked、disabled、selected这类属性的特点是「只要存在就生效」JS 中对应的值是布尔类型true/false而非字符串。

html预览input typecheckbox idcheckbox checked button idbtn disabled禁用按钮/button script const checkbox document.getElementById(checkbox); const btn document.getElementById(btn); // 获取布尔属性 console.log(checkbox.checked); // 输出true console.log(btn.disabled); // 输出true // 修改布尔属性 checkbox.checked false; // 取消勾选 btn.disabled false; // 启用按钮 /script

常用场景示例示例 1点击按钮切换图片html预览img idbanner srcbanner

jpg alt轮播图1 button idchangeBtn切换图片/button script const banner document.getElementById(banner); const changeBtn document.getElementById(changeBtn); let isFirst true; changeBtn.addEventListener(click, function() { if (isFirst) { banner.src banner

jpg; banner.alt 轮播图2; } else { banner.src banner

jpg; banner.alt 轮播图1; } isFirst !isFirst; }); /script示例 2获取表单输入框的属性并修改html预览input typetext idusername placeholder请输入用户名 maxlength10 button idcheckBtn查看属性/button script const username document.getElementById(username); const checkBtn document.getElementById(checkBtn); checkBtn.addEventListener(click, function() { // 获取输入框属性 console.log(占位符, username.placeholder); console.log(最大长度, username.maxLength); console.log(当前值, username.value); // 修改属性 username.placeholder 请输入真实姓名; username.maxLength 15; }); /script

总结通用场景用getAttribute/setAttribute/removeAttribute操作所有属性包括自定义属性常用原生属性直接用DOM节点.属性名如img.src、input.className更简洁特殊属性class 用classListadd/remove/toggledata-* 自定义属性用dataset布尔属性checked/disabled赋值布尔值true/false。

九幺9.1免费版下载官方版-九幺9.1免费版下载官方版应用