文章目录一、 innerHTML二、 innerText 与 textContent2.1 innerText2.2 textContent2.3 对比与选择三、 表单元素的值操作获取和修改元素的内容是 DOM 操作中最常见的需求JavaScript 提供了多种方式来操作元素的内容。一、 innerHTMLinnerHTML属性用于获取或设置元素的 HTML 内容设置时会解析 HTML 标签。dividcontentp原始内容/p/divscriptconstcontentdocument.getElementById(content);// 获取HTML内容console.log(content.innerHTML);// 输出: \n p原始内容/p\n// 设置HTML内容会覆盖原有内容content.innerHTMLh2新标题/h2p新内容/p;// 追加HTML内容content.innerHTMLdiv追加的内容/div;// 清空内容content.innerHTML;/script控制台内容始终不变的原因是代码中console.log(content.innerHTML)是在所有 DOM 操作之前执行的它只会输出执行时的innerHTML值优点可以直接设置 HTML 结构方便快捷支持追加内容缺点设置内容时会重新解析 HTML可能影响性能会移除元素原有的事件监听器存在 XSS 安全风险当内容来自用户输入时安全使用建议当内容包含用户输入时应先进行转义处理functionescapeHtml(unsafe){returnunsafe.replace(//g,amp;).replace(//g,lt;).replace(//g,gt;).replace(//g,quot;).replace(//g,#039;);}// 用户输入constuserInputscriptalert(xss)/script;// 安全设置content.innerHTMLescapeHtml(userInput);代码解析未转义的风险如果直接执行content.innerHTML userInput浏览器会解析并执行script标签中的代码弹出 “xss” 提示这就是 XSS 攻击。转义后的效果escapeHtml会将用户输入的scriptalert(xss)/script转义为:lt;scriptgt;alert(quot;xssquot;)lt;/scriptgt;浏览器渲染时会显示为文本scriptalert(xss)/script但不会执行其中的脚本从而避免了 XSS 攻击。通过对用户输入的特殊字符进行转义确保任何包含 HTML 标签或脚本的内容都只会被当作纯文本显示而不会被浏览器解析为可执行的代码从而有效防范 XSS 攻击。这是 Web 开发中处理用户输入如评论、表单提交等时的必备安全措施。二、 innerText 与 textContentinnerText和textContent都用于操作元素的文本内容但它们有一些重要区别。2.1 innerTextinnerText获取或设置元素的可见文本内容受 CSS 样式影响。dividtextDemostyledisplay:none;隐藏的文本spanstylevisibility:hidden;不可见的文本/spanscriptconsole.log(脚本内容)/script/divscriptconstdemodocument.getElementById(textDemo);console.log(demo.innerText);// 输出空字符串因为元素被隐藏// 修改样式使元素可见demo.style.displayblock;console.log(demo.innerText);// 输出: 隐藏的文本忽略了隐藏的span和脚本内容// 设置文本内容demo.innerText新的文本br不会被解析;// br会被当作文本显示/script代码解析初始状态元素完全隐藏时innerText的特性只读取被display: none隐藏的元素内容。div 本身设置了display: none正常来说第17行代码输出内容应该为空字符串。innerText是 “用户可见文本”但在元素display: none时部分浏览器为了调试方便会 “放宽规则”把隐藏元素的文本也读出来也就是红色框出的部分。这属于浏览器对 innerText 在隐藏元素场景下的特殊处理不是标准里 “严格可见文本” 的表现。元素可见后当 div 可见后display: blockinnerText开始工作但有两个关键行为忽略visibility: hidden的内容span虽然占据空间但 innerText 不会读取其内容“不可见的文本” 被忽略。忽略script标签内容script中的代码console.log(脚本内容)属于标签内的程序代码innerText会跳过它不纳入文本读取范围。最终只读取到可见的直接文本 “隐藏的文本”。设置文本内容innerText设置内容时会把所有内容当作纯文本处理不会解析 HTML 标签。这里的br不会被当作换行标签而是直接显示为文本br最终页面会显示 新的文本br不会被解析 。特点只返回可见的文本受display: none、visibility: hidden等样式影响忽略script、style等标签中的内容设置内容时会自动转义 HTML 标签将转为lt;等读取时会触发重排影响性能2.2 textContenttextContent获取或设置元素的所有文本内容不受 CSS 样式影响。dividdemo外层文本divstylevisibility:hidden;visibility隐藏的文本/divdivstyledisplay:none;display隐藏的文本/divscriptconstmsg脚本内的文本;/script/divscriptconstdemodocument.getElementById(demo);// 1. 读取所有文本内容console.log(textContent 读取结果:);console.log(demo.textContent);/* 输出包含所有内容 外层文本 visibility隐藏的文本 display隐藏的文本 const msg 脚本内的文本; */// 2. 设置文本内容纯文本处理demo.textContent新内容br不会换行;console.log(设置后textContent: ,demo.textContent);// 输出新内容br不会换行br被当作文本/script代码解析特点返回所有文本内容包括隐藏元素中的文本会包含script、style中的内容设置内容时会自动转义 HTML 标签性能优于innerText读取时不会触发重排2.3 对比与选择特性innerTexttextContent受 CSS 影响是否包含隐藏文本否是读取script/style内容否是性能较低需计算可见性较高直接读取文本节点格式保留程度规范化格式保留原格式选择建议当需要获取用户可见的文本时使用innerText其他情况优先使用textContent性能更好行为更一致考虑兼容性时可使用以下兼容写法constgetTextelement{if(textContentinelement){returnelement.textContent;}else{returnelement.innerText;}};三、 表单元素的值操作表单元素如input、textarea、select等有一个特殊的value属性用于获取或设置其值。初始inputtypetextidusernamevalue默认值textareaiddescription/textareaselectidgenderoptionvaluemale男/optionoptionvaluefemale女/option/selectinputtypecheckboxidagreecheckedscript// 文本输入框constusernamedocument.getElementById(username);console.log(username.value);// 默认值// 文本域constdescriptiondocument.getElementById(description);description.value多行\n文本内容;// 下拉选择框constgenderdocument.getElementById(gender);console.log(gender.value);// male初始选中项的值// 复选框constagreedocument.getElementById(agree);console.log(agree.checked);// true是否选中/script修改属性值后inputtypetextidusernamevalue默认值textareaiddescription/textareaselectidgenderoptionvaluemale男/optionoptionvaluefemale女/option/selectinputtypecheckboxidagreecheckedscript// 文本输入框constusernamedocument.getElementById(username);console.log(username.value);//输出 默认值username.value新用户名;console.log(username.value);//输出 新用户名// 文本域constdescriptiondocument.getElementById(description);description.value多行\n文本内容;// 下拉选择框constgenderdocument.getElementById(gender);console.log(gender.value);//输出 male初始选中项的值gender.valuefemale;// 选中值为female的选项console.log(gender.value);//输出 male初始选中项的值// 复选框constagreedocument.getElementById(agree);console.log(agree.checked);//输出 true是否选中agree.checkedfalse;// 取消选中console.log(agree.checked);//输出 false是否选中/script注意textarea的value属性与innerHTML的区别value返回用户输入的实际内容包括换行innerHTML返回标签内的原始内容通常不包含用户输入的修改
【WEB】DOM （二）操作内容
文章目录一、 innerHTML二、 innerText 与 textContent2.1 innerText2.2 textContent2.3 对比与选择三、 表单元素的值操作获取和修改元素的内容是 DOM 操作中最常见的需求JavaScript 提供了多种方式来操作元素的内容。一、 innerHTMLinnerHTML属性用于获取或设置元素的 HTML 内容设置时会解析 HTML 标签。dividcontentp原始内容/p/divscriptconstcontentdocument.getElementById(content);// 获取HTML内容console.log(content.innerHTML);// 输出: \n p原始内容/p\n// 设置HTML内容会覆盖原有内容content.innerHTMLh2新标题/h2p新内容/p;// 追加HTML内容content.innerHTMLdiv追加的内容/div;// 清空内容content.innerHTML;/script控制台内容始终不变的原因是代码中console.log(content.innerHTML)是在所有 DOM 操作之前执行的它只会输出执行时的innerHTML值优点可以直接设置 HTML 结构方便快捷支持追加内容缺点设置内容时会重新解析 HTML可能影响性能会移除元素原有的事件监听器存在 XSS 安全风险当内容来自用户输入时安全使用建议当内容包含用户输入时应先进行转义处理functionescapeHtml(unsafe){returnunsafe.replace(//g,amp;).replace(//g,lt;).replace(//g,gt;).replace(//g,quot;).replace(//g,#039;);}// 用户输入constuserInputscriptalert(xss)/script;// 安全设置content.innerHTMLescapeHtml(userInput);代码解析未转义的风险如果直接执行content.innerHTML userInput浏览器会解析并执行script标签中的代码弹出 “xss” 提示这就是 XSS 攻击。转义后的效果escapeHtml会将用户输入的scriptalert(xss)/script转义为:lt;scriptgt;alert(quot;xssquot;)lt;/scriptgt;浏览器渲染时会显示为文本scriptalert(xss)/script但不会执行其中的脚本从而避免了 XSS 攻击。通过对用户输入的特殊字符进行转义确保任何包含 HTML 标签或脚本的内容都只会被当作纯文本显示而不会被浏览器解析为可执行的代码从而有效防范 XSS 攻击。这是 Web 开发中处理用户输入如评论、表单提交等时的必备安全措施。二、 innerText 与 textContentinnerText和textContent都用于操作元素的文本内容但它们有一些重要区别。2.1 innerTextinnerText获取或设置元素的可见文本内容受 CSS 样式影响。dividtextDemostyledisplay:none;隐藏的文本spanstylevisibility:hidden;不可见的文本/spanscriptconsole.log(脚本内容)/script/divscriptconstdemodocument.getElementById(textDemo);console.log(demo.innerText);// 输出空字符串因为元素被隐藏// 修改样式使元素可见demo.style.displayblock;console.log(demo.innerText);// 输出: 隐藏的文本忽略了隐藏的span和脚本内容// 设置文本内容demo.innerText新的文本br不会被解析;// br会被当作文本显示/script代码解析初始状态元素完全隐藏时innerText的特性只读取被display: none隐藏的元素内容。div 本身设置了display: none正常来说第17行代码输出内容应该为空字符串。innerText是 “用户可见文本”但在元素display: none时部分浏览器为了调试方便会 “放宽规则”把隐藏元素的文本也读出来也就是红色框出的部分。这属于浏览器对 innerText 在隐藏元素场景下的特殊处理不是标准里 “严格可见文本” 的表现。元素可见后当 div 可见后display: blockinnerText开始工作但有两个关键行为忽略visibility: hidden的内容span虽然占据空间但 innerText 不会读取其内容“不可见的文本” 被忽略。忽略script标签内容script中的代码console.log(脚本内容)属于标签内的程序代码innerText会跳过它不纳入文本读取范围。最终只读取到可见的直接文本 “隐藏的文本”。设置文本内容innerText设置内容时会把所有内容当作纯文本处理不会解析 HTML 标签。这里的br不会被当作换行标签而是直接显示为文本br最终页面会显示 新的文本br不会被解析 。特点只返回可见的文本受display: none、visibility: hidden等样式影响忽略script、style等标签中的内容设置内容时会自动转义 HTML 标签将转为lt;等读取时会触发重排影响性能2.2 textContenttextContent获取或设置元素的所有文本内容不受 CSS 样式影响。dividdemo外层文本divstylevisibility:hidden;visibility隐藏的文本/divdivstyledisplay:none;display隐藏的文本/divscriptconstmsg脚本内的文本;/script/divscriptconstdemodocument.getElementById(demo);// 1. 读取所有文本内容console.log(textContent 读取结果:);console.log(demo.textContent);/* 输出包含所有内容 外层文本 visibility隐藏的文本 display隐藏的文本 const msg 脚本内的文本; */// 2. 设置文本内容纯文本处理demo.textContent新内容br不会换行;console.log(设置后textContent: ,demo.textContent);// 输出新内容br不会换行br被当作文本/script代码解析特点返回所有文本内容包括隐藏元素中的文本会包含script、style中的内容设置内容时会自动转义 HTML 标签性能优于innerText读取时不会触发重排2.3 对比与选择特性innerTexttextContent受 CSS 影响是否包含隐藏文本否是读取script/style内容否是性能较低需计算可见性较高直接读取文本节点格式保留程度规范化格式保留原格式选择建议当需要获取用户可见的文本时使用innerText其他情况优先使用textContent性能更好行为更一致考虑兼容性时可使用以下兼容写法constgetTextelement{if(textContentinelement){returnelement.textContent;}else{returnelement.innerText;}};三、 表单元素的值操作表单元素如input、textarea、select等有一个特殊的value属性用于获取或设置其值。初始inputtypetextidusernamevalue默认值textareaiddescription/textareaselectidgenderoptionvaluemale男/optionoptionvaluefemale女/option/selectinputtypecheckboxidagreecheckedscript// 文本输入框constusernamedocument.getElementById(username);console.log(username.value);// 默认值// 文本域constdescriptiondocument.getElementById(description);description.value多行\n文本内容;// 下拉选择框constgenderdocument.getElementById(gender);console.log(gender.value);// male初始选中项的值// 复选框constagreedocument.getElementById(agree);console.log(agree.checked);// true是否选中/script修改属性值后inputtypetextidusernamevalue默认值textareaiddescription/textareaselectidgenderoptionvaluemale男/optionoptionvaluefemale女/option/selectinputtypecheckboxidagreecheckedscript// 文本输入框constusernamedocument.getElementById(username);console.log(username.value);//输出 默认值username.value新用户名;console.log(username.value);//输出 新用户名// 文本域constdescriptiondocument.getElementById(description);description.value多行\n文本内容;// 下拉选择框constgenderdocument.getElementById(gender);console.log(gender.value);//输出 male初始选中项的值gender.valuefemale;// 选中值为female的选项console.log(gender.value);//输出 male初始选中项的值// 复选框constagreedocument.getElementById(agree);console.log(agree.checked);//输出 true是否选中agree.checkedfalse;// 取消选中console.log(agree.checked);//输出 false是否选中/script注意textarea的value属性与innerHTML的区别value返回用户输入的实际内容包括换行innerHTML返回标签内的原始内容通常不包含用户输入的修改
