企业官网建设流程全解析

石家庄正规制作网站公司,网站建设建设意见,商务网站建设有哪几个步骤,网站页面引导怎么做文章目录一.修改纯文本内容( textContent / innerText )1.textContent(推荐)2.innerText二.修改 HTML 内容( innerHTML )三.修改表单元素的值( value )四.替换元素本身( outerHTML )关键注意事项总结在 JavaScript 中,修改 DOM 元素的内容是常见操作,主要分为 修改文本内容、 修…文章目录一.修改纯文本内容( textContent / innerText )1.textContent(推荐)2.innerText二.修改 HTML 内容( innerHTML )三.修改表单元素的值( value )四.替换元素本身( outerHTML )关键注意事项总结在 JavaScript 中,修改 DOM 元素的内容是常见操作,主要分为修改文本内容、修改 HTML 内容和修改表单元素的值三类,以下是详细的实现方式:一.修改纯文本内容( textContent / innerText )这两个属性用于操作元素的文本内容,区别在于处理空白和隐藏元素的方式不同.1.textContent(推荐)作用: 获取/设置元素的所有文本内容(包括子元素的文本,忽略 HTML 标签,保留空格和换行).特点: 性能更好,支持所有现代浏览器,会将 HTML 标签作为普通文本处理(避免 XSS 攻击).// HTML: div idboxHello spanWorld/span/divconstboxdocument.getElementById(box);// 获取文本内容: Hello Worldconsole.log(box.textContent);// 设置文本内容(覆盖原有内容)box.textContent你好,JavaScript;// 结果: div idbox你好,JavaScript/div// 也可追加文本(拼接原有内容)box.textContent;// 结果: div idbox你好,JavaScript/div2.innerText作用: 获取 / 设置元素的可见文本内容(受 CSS 样式影响,如隐藏元素的文本不会被获取,且会合并空白).特点: 兼容性好,但性能略低于textContent.// HTML: div idboxHello span styledisplay: none;隐藏文本/span World/divconstboxdocument.getElementById(box);// 获取可见文本: Hello World(忽略隐藏文本和多余空格)console.log(box.innerText);// 设置文本内容box.innerTextHello DOM;// 结果: div idboxHello DOM/div二.修改 HTML 内容( innerHTML )作用: 获取/设置元素的HTML 内容(包括标签),可直接插入 HTML 结构.注意: 使用innerHTML时需注意XSS 攻击风险(避免插入用户输入的未过滤内容).// HTML: div idbox初始内容/divconstboxdocument.getElementById(box);// 获取 HTML 内容: 初始内容console.log(box.innerHTML);// 设置 HTML 内容(覆盖原有内容)box.innerHTMLh3标题/h3p这是一段带标签的内容/p;// 结果: div idboxh3标题/h3p这是一段带标签的内容/p/div// 追加 HTML 内容(拼接原有内容)box.innerHTMLspan追加的内容/span;三.修改表单元素的值( value )对于input、textarea、select等表单元素,使用value属性修改其值.// 1. 单行输入框// HTML: input typetext idusername value初始值constusernamedocument.getElementById(username);username.value张三;// 设置值为张三// 2. 密码框// HTML: input typepassword idpwdconstpwddocument.getElementById(pwd);pwd.value123456;// 3. 文本域// HTML: textarea idcontent初始文本/textareaconstcontentdocument.getElementById(content);content.value这是文本域的新内容;// 4. 下拉选择框// HTML:// select idcity// option valuebeijing北京/option// option valueshanghai上海/option// /selectconstcitydocument.getElementById(city);city.valueshanghai;// 选中上海选项四.替换元素本身( outerHTML )作用: 获取/设置元素及其所有内容的 HTML 结构(包括元素自身标签).注意: 设置后原元素会被新的 HTML 结构替换.// HTML: div idbox旧内容/divconstboxdocument.getElementById(box);// 获取 outerHTML: div idbox旧内容/divconsole.log(box.outerHTML);// 替换元素本身box.outerHTMLp idnewBox新的p元素/p;// 结果: p idnewBox新的p元素/p(原div被替换)关键注意事项XSS 安全问题若内容包含用户输入,优先使用textContent/text()(会转义 HTML 标签),避免使用innerHTML/html()导致 XSS 攻击.示例: 用户输入scriptalert(攻击)/script,textContent会将其作为普通文本显示,而innerHTML会执行脚本.性能考量频繁修改innerHTML会导致浏览器反复解析 DOM,性能较低(可先拼接字符串再一次性设置).对于大量文本修改,textContent比innerText更快.元素存在性检查修改内容前建议检查元素是否存在,避免报错:constboxdocument.getElementById(box);if(box){// 检查元素是否存在box.textContent新内容;}表单元素的特殊情况对于input typefile,value属性只读,无法通过 JavaScript 修改(出于安全考虑).总结场景推荐方法修改纯文本内容textContent修改带标签的 HTML 内容innerHTML( 谨慎使用 )修改表单元素值value