尧图网站建设 
上一篇我们讲解了四种获取 DOM 元素的方法而找到元素只是 DOM 操作的第一步。想要实现修改图片地址、切换元素样式、动态更新页面文字、插入 HTML 片段等动态效果核心就在于操作元素的属性和读写元素的内容。本文系统讲解 DOM 属性的读写规则、两种内容操作方式的区别与适用场景每个知识点都配套可直接运行的实战代码。一、元素属性操作HTML 标签通过属性来定义元素的特征比如src、href、id、class等。对应的 DOM 元素对象也可以直接读写这些属性大部分属性和 HTML 里的写法一一对应只有少数特殊规则需要注意。1. 属性操作的基本规律核心窍门HTML 标签上有哪些标准属性DOM 元素对象就可以直接访问哪些属性。读取元素.属性名就能拿到对应的值修改元素.属性名 新值就能修改属性页面会实时更新示例修改图片地址和链接!DOCTYPE html html langzh-CN head meta charsetUTF-8 title属性基础操作/title /head body img idlogo srcold.png alt旧logo br a idlink hrefhttps://www.baidu.com百度一下/a br button idbtn修改属性/button script let btn document.getElementById(btn); let logo document.getElementById(logo); let link document.getElementById(link); btn.onclick function() { // 直接通过点语法修改属性 logo.src new.png; logo.alt 新logo; link.href https://www.google.com; link.innerText 谷歌搜索; }; /script /body /html点击按钮后图片的src、链接的href都会实时更新页面立刻生效。2. 特殊映射 1class属性对应className这是最常见的一个例外因为class是 JavaScript 的保留关键字所以 HTML 里的class属性在 DOM 对象中对应的是className属性。错误写法// 无效class是保留字不能直接用 div.class active;正确写法// 读取类名 console.log(div.className); // 修改类名会覆盖原来的所有类 div.className box highlight;实战示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleclassName演示/title style .active { color: red; font-weight: bold; } /style /head body p idtext classnormal普通文字/p button idbtn切换高亮/button script let btn document.getElementById(btn); let text document.getElementById(text); btn.onclick function() { // 通过className切换类 if (text.className normal) { text.className active; } else { text.className normal; } }; /script /body /html补充如果要添加 / 删除单个类而不覆盖其他类推荐使用classList.add()/classList.remove()方法比直接操作 className 更灵活。3. 特殊映射 2短横线属性 → 驼峰命名如果 HTML 属性名中带有短横线-在 DOM 对象中访问时要去掉短横线后面的首字母大写也就是转成小驼峰命名。最典型的场景是style属性里的样式比如background-color→backgroundColorfont-size→fontSizemargin-top→marginTop示例修改行内样式let box document.getElementById(box); // 正确驼峰写法 box.style.backgroundColor red; box.style.fontSize 20px; // 错误带短横线会失效 // box.style.background-color red;这个规则适用于所有带短横线的属性名本质是因为 JS 变量名不允许出现短横线所以统一转成驼峰格式。4. 通用属性方法getAttribute /setAttribute点语法虽然方便但只能操作标准属性遇到自定义属性、或者想获取属性原始字符串时推荐使用 DOM 提供的三个通用方法所有属性都能操作。表格方法作用语法getAttribute(属性名)获取属性的值返回属性值字符串不存在返回nullsetAttribute(属性名, 值)设置 / 修改属性新增或覆盖对应属性removeAttribute(属性名)删除属性移除整个属性特点不区分标准属性和自定义属性都能操作返回的永远是字符串类型写法和 HTML 里的属性名完全一致不需要转驼峰、不需要改 className实战示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 title通用属性方法/title /head body div idbox />二、元素内容操作获取元素之后最常用的操作就是修改元素内部的内容。DOM 提供了两个核心属性来读写元素内容innerHTML和innerText两者功能不同适用场景也不一样。1. innerHTML操作 HTML 内容innerHTML操作的是元素内部的HTML 源码写入时会解析 HTML 标签生成真实的 DOM 元素读取时会返回元素内部完整的 HTML 字符串。语法// 读取 let htmlStr 元素.innerHTML; // 写入 元素.innerHTML 包含HTML标签的字符串;特点可以识别并解析 HTML 标签写入的标签会变成真实的页面元素读取会拿到内部所有的 HTML 代码包括标签、注释、空格会替换元素内部原来的所有内容示例动态插入链接!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleinnerHTML演示/title /head body div idd1/div button idbtn插入链接/button script let odiv document.getElementById(d1); let btn document.getElementById(btn); btn.onclick function() { // 写入HTML字符串会被解析成a标签 odiv.innerHTML a hrefhttps://www.baidu.com target_blank百度一下/a; // 读取内部的HTML源码 console.log(odiv.innerHTML); }; /script /body /html点击按钮后div 里会出现一个真实可点击的超链接而不是显示字符串。2. innerText操作纯文本内容innerText只操作元素内部的纯文本内容写入时 HTML 标签会被当成普通文字显示不会被解析读取时只会返回可见的文本内容忽略 HTML 标签。语法// 读取纯文本 let text 元素.innerText; // 写入纯文本 元素.innerText 纯文本内容;特点不识别 HTML 标签所有内容都当成普通文字渲染读取时会自动忽略标签、注释只拿用户能看到的文字安全性更高不会注入 HTML 代码示例纯文本写入对比!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleinnerText演示/title /head body div idbox/div button idbtn写入文本/button script let box document.getElementById(box); let btn document.getElementById(btn); btn.onclick function() { // 标签会被当成文字显示不会解析 box.innerText a hrefhttps://www.baidu.com百度一下/a; }; /script /body /html点击按钮后页面上会完整显示a href...这串字符而不是生成链接。3. 核心区别对比对比维度innerHTMLinnerText解析 HTML可以识别并解析 HTML 标签不识别所有内容当纯文本读取内容返回完整 HTML 源码包含标签只返回可见文本忽略标签写入效果生成 DOM 元素生成普通文字安全性有 XSS 注入风险相对安全性能稍低需要解析 DOM稍高只处理文本4. 使用建议与安全提示纯文本内容优先用 innerText比如显示用户名、描述、数字等纯文本内容用innerText更安全避免意外解析标签。需要插入 HTML 结构时用 innerHTML比如动态渲染列表、插入模板片段时用innerHTML更方便。警惕 XSS 风险如果内容来自用户输入、接口返回等不可信来源绝对不要直接用innerHTML插入可能会被注入恶意脚本造成安全问题。这种场景优先用innerText或者先做转义处理。总结本文讲解了 DOM 元素的两大核心操作属性操作标准属性直接用点语法读写class对应className短横线属性转驼峰自定义属性推荐用getAttribute/setAttribute通用方法。内容操作innerHTML可以解析 HTML适合插入结构innerText只处理纯文本安全性更高。 Web前后端开发-DOM 进阶：元素属性操作与内容操作详解
上一篇我们讲解了四种获取 DOM 元素的方法而找到元素只是 DOM 操作的第一步。想要实现修改图片地址、切换元素样式、动态更新页面文字、插入 HTML 片段等动态效果核心就在于操作元素的属性和读写元素的内容。本文系统讲解 DOM 属性的读写规则、两种内容操作方式的区别与适用场景每个知识点都配套可直接运行的实战代码。一、元素属性操作HTML 标签通过属性来定义元素的特征比如src、href、id、class等。对应的 DOM 元素对象也可以直接读写这些属性大部分属性和 HTML 里的写法一一对应只有少数特殊规则需要注意。1. 属性操作的基本规律核心窍门HTML 标签上有哪些标准属性DOM 元素对象就可以直接访问哪些属性。读取元素.属性名就能拿到对应的值修改元素.属性名 新值就能修改属性页面会实时更新示例修改图片地址和链接!DOCTYPE html html langzh-CN head meta charsetUTF-8 title属性基础操作/title /head body img idlogo srcold.png alt旧logo br a idlink hrefhttps://www.baidu.com百度一下/a br button idbtn修改属性/button script let btn document.getElementById(btn); let logo document.getElementById(logo); let link document.getElementById(link); btn.onclick function() { // 直接通过点语法修改属性 logo.src new.png; logo.alt 新logo; link.href https://www.google.com; link.innerText 谷歌搜索; }; /script /body /html点击按钮后图片的src、链接的href都会实时更新页面立刻生效。2. 特殊映射 1class属性对应className这是最常见的一个例外因为class是 JavaScript 的保留关键字所以 HTML 里的class属性在 DOM 对象中对应的是className属性。错误写法// 无效class是保留字不能直接用 div.class active;正确写法// 读取类名 console.log(div.className); // 修改类名会覆盖原来的所有类 div.className box highlight;实战示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleclassName演示/title style .active { color: red; font-weight: bold; } /style /head body p idtext classnormal普通文字/p button idbtn切换高亮/button script let btn document.getElementById(btn); let text document.getElementById(text); btn.onclick function() { // 通过className切换类 if (text.className normal) { text.className active; } else { text.className normal; } }; /script /body /html补充如果要添加 / 删除单个类而不覆盖其他类推荐使用classList.add()/classList.remove()方法比直接操作 className 更灵活。3. 特殊映射 2短横线属性 → 驼峰命名如果 HTML 属性名中带有短横线-在 DOM 对象中访问时要去掉短横线后面的首字母大写也就是转成小驼峰命名。最典型的场景是style属性里的样式比如background-color→backgroundColorfont-size→fontSizemargin-top→marginTop示例修改行内样式let box document.getElementById(box); // 正确驼峰写法 box.style.backgroundColor red; box.style.fontSize 20px; // 错误带短横线会失效 // box.style.background-color red;这个规则适用于所有带短横线的属性名本质是因为 JS 变量名不允许出现短横线所以统一转成驼峰格式。4. 通用属性方法getAttribute /setAttribute点语法虽然方便但只能操作标准属性遇到自定义属性、或者想获取属性原始字符串时推荐使用 DOM 提供的三个通用方法所有属性都能操作。表格方法作用语法getAttribute(属性名)获取属性的值返回属性值字符串不存在返回nullsetAttribute(属性名, 值)设置 / 修改属性新增或覆盖对应属性removeAttribute(属性名)删除属性移除整个属性特点不区分标准属性和自定义属性都能操作返回的永远是字符串类型写法和 HTML 里的属性名完全一致不需要转驼峰、不需要改 className实战示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 title通用属性方法/title /head body div idbox />二、元素内容操作获取元素之后最常用的操作就是修改元素内部的内容。DOM 提供了两个核心属性来读写元素内容innerHTML和innerText两者功能不同适用场景也不一样。1. innerHTML操作 HTML 内容innerHTML操作的是元素内部的HTML 源码写入时会解析 HTML 标签生成真实的 DOM 元素读取时会返回元素内部完整的 HTML 字符串。语法// 读取 let htmlStr 元素.innerHTML; // 写入 元素.innerHTML 包含HTML标签的字符串;特点可以识别并解析 HTML 标签写入的标签会变成真实的页面元素读取会拿到内部所有的 HTML 代码包括标签、注释、空格会替换元素内部原来的所有内容示例动态插入链接!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleinnerHTML演示/title /head body div idd1/div button idbtn插入链接/button script let odiv document.getElementById(d1); let btn document.getElementById(btn); btn.onclick function() { // 写入HTML字符串会被解析成a标签 odiv.innerHTML a hrefhttps://www.baidu.com target_blank百度一下/a; // 读取内部的HTML源码 console.log(odiv.innerHTML); }; /script /body /html点击按钮后div 里会出现一个真实可点击的超链接而不是显示字符串。2. innerText操作纯文本内容innerText只操作元素内部的纯文本内容写入时 HTML 标签会被当成普通文字显示不会被解析读取时只会返回可见的文本内容忽略 HTML 标签。语法// 读取纯文本 let text 元素.innerText; // 写入纯文本 元素.innerText 纯文本内容;特点不识别 HTML 标签所有内容都当成普通文字渲染读取时会自动忽略标签、注释只拿用户能看到的文字安全性更高不会注入 HTML 代码示例纯文本写入对比!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleinnerText演示/title /head body div idbox/div button idbtn写入文本/button script let box document.getElementById(box); let btn document.getElementById(btn); btn.onclick function() { // 标签会被当成文字显示不会解析 box.innerText a hrefhttps://www.baidu.com百度一下/a; }; /script /body /html点击按钮后页面上会完整显示a href...这串字符而不是生成链接。3. 核心区别对比对比维度innerHTMLinnerText解析 HTML可以识别并解析 HTML 标签不识别所有内容当纯文本读取内容返回完整 HTML 源码包含标签只返回可见文本忽略标签写入效果生成 DOM 元素生成普通文字安全性有 XSS 注入风险相对安全性能稍低需要解析 DOM稍高只处理文本4. 使用建议与安全提示纯文本内容优先用 innerText比如显示用户名、描述、数字等纯文本内容用innerText更安全避免意外解析标签。需要插入 HTML 结构时用 innerHTML比如动态渲染列表、插入模板片段时用innerHTML更方便。警惕 XSS 风险如果内容来自用户输入、接口返回等不可信来源绝对不要直接用innerHTML插入可能会被注入恶意脚本造成安全问题。这种场景优先用innerText或者先做转义处理。总结本文讲解了 DOM 元素的两大核心操作属性操作标准属性直接用点语法读写class对应className短横线属性转驼峰自定义属性推荐用getAttribute/setAttribute通用方法。内容操作innerHTML可以解析 HTML适合插入结构innerText只处理纯文本安全性更高。