基于DRNN神经网络的自适应PID控制算法：原理、实现与工程落地
2026/9/30 12:40:42
上一篇我们讲解了四种获取 DOM 元素的方法，而找到元素只是 DOM 操作的第一步。想要实现修改图片地址、切换元素样式、动态更新页面文字、插入 HTML 片段等动态效果，核心就在于操作元素的属性和读写元素的内容。本文系统讲解 DOM 属性的读写规则、两种内容操作方式的区别与适用场景，每个知识点都配套可直接运行的实战代码。
一、元素属性操作
HTML 标签通过属性来定义元素的特征，比如src、href、id、class等。对应的 DOM 元素对象也可以直接读写这些属性，大部分属性和 HTML 里的写法一一对应，只有少数特殊规则需要注意。
1. 属性操作的基本规律
核心窍门：HTML 标签上有哪些标准属性，DOM 元素对象就可以直接访问哪些属性。
读取：
元素.属性名就能拿到对应的值修改：
元素.属性名 = 新值就能修改属性，页面会实时更新
示例：修改图片地址和链接
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>属性基础操作</title> </head> <body> <img id="logo" src="old.png" alt="旧logo"> <br> <a id="link" href="https://www.baidu.com">百度一下</a> <br> <button id="btn">修改属性</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. 特殊映射 1：class属性对应className
这是最常见的一个例外：因为class是 JavaScript 的保留关键字，所以 HTML 里的class属性，在 DOM 对象中对应的是className属性。
错误写法
// 无效，class是保留字，不能直接用 div.class = "active";
正确写法
// 读取类名 console.log(div.className); // 修改类名（会覆盖原来的所有类） div.className = "box highlight";
实战示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>className演示</title> <style> .active { color: red; font-weight: bold; } </style> </head> <body> <p id="text" class="normal">普通文字</p> <button id="btn">切换高亮</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("属性名") | 获取属性的值 | 返回属性值字符串，不存在返回null |
setAttribute("属性名", "值") | 设置 / 修改属性 | 新增或覆盖对应属性 |
removeAttribute("属性名") | 删除属性 | 移除整个属性 |
特点
不区分标准属性和自定义属性，都能操作
返回的永远是字符串类型
写法和 HTML 里的属性名完全一致，不需要转驼峰、不需要改 className
实战示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>通用属性方法</title> </head> <body> <div id="box" />
二、元素内容操作
获取元素之后，最常用的操作就是修改元素内部的内容。DOM 提供了两个核心属性来读写元素内容：
innerHTML和innerText，两者功能不同，适用场景也不一样。1. innerHTML：操作 HTML 内容
innerHTML操作的是元素内部的HTML 源码，写入时会解析 HTML 标签，生成真实的 DOM 元素；读取时会返回元素内部完整的 HTML 字符串。语法
// 读取 let htmlStr = 元素.innerHTML; // 写入 元素.innerHTML = "包含HTML标签的字符串";特点
可以识别并解析 HTML 标签，写入的标签会变成真实的页面元素
读取会拿到内部所有的 HTML 代码，包括标签、注释、空格
会替换元素内部原来的所有内容
示例：动态插入链接
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>innerHTML演示</title> </head> <body> <div id="d1"></div> <button id="btn">插入链接</button> <script> let odiv = document.getElementById("d1"); let btn = document.getElementById("btn"); btn.onclick = function() { // 写入HTML字符串，会被解析成a标签 odiv.innerHTML = "<a href='https://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 lang="zh-CN"> <head> <meta charset="UTF-8"> <title>innerText演示</title> </head> <body> <div id="box"></div> <button id="btn">写入文本</button> <script> let box = document.getElementById("box"); let btn = document.getElementById("btn"); btn.onclick = function() { // 标签会被当成文字显示，不会解析 box.innerText = "<a href='https://www.baidu.com'>百度一下</a>"; }; </script> </body> </html>点击按钮后，页面上会完整显示
<a href=...>这串字符，而不是生成链接。
3. 核心区别对比
对比维度 innerHTML innerText 解析 HTML 可以识别并解析 HTML 标签 不识别，所有内容当纯文本 读取内容 返回完整 HTML 源码，包含标签 只返回可见文本，忽略标签 写入效果 生成 DOM 元素 生成普通文字 安全性 有 XSS 注入风险 相对安全 性能 稍低，需要解析 DOM 稍高，只处理文本 4. 使用建议与安全提示
纯文本内容优先用 innerText：比如显示用户名、描述、数字等纯文本内容，用
innerText更安全，避免意外解析标签。需要插入 HTML 结构时用 innerHTML：比如动态渲染列表、插入模板片段时，用
innerHTML更方便。警惕 XSS 风险：如果内容来自用户输入、接口返回等不可信来源，绝对不要直接用
innerHTML插入，可能会被注入恶意脚本，造成安全问题。这种场景优先用innerText，或者先做转义处理。总结
本文讲解了 DOM 元素的两大核心操作：
属性操作：标准属性直接用点语法读写；
class对应className；短横线属性转驼峰；自定义属性推荐用getAttribute/setAttribute通用方法。内容操作：
innerHTML可以解析 HTML，适合插入结构；innerText只处理纯文本，安全性更高。