WEB:DOM (二)核心操作 —— 内容

文章目录

  • 一、 innerHTML
  • 二、 innerText 与 textContent
    • 2.1 innerText
    • 2.2 textContent
    • 2.3 对比与选择
  • 三、 表单元素的值操作

获取和修改元素的内容是 DOM 操作中最常见的需求,JavaScript 提供了多种方式来操作元素的内容。

一、 innerHTML

innerHTML属性用于获取或设置元素的 HTML 内容,设置时会解析 HTML 标签。

<div id="content">
  <p>原始内容p>
div>

<script>
  const content = document.getElementById('content');
  
  // 获取HTML内容
  console.log(content.innerHTML); 
  // 输出: "\n  

原始内容

\n"
// 设置HTML内容(会覆盖原有内容) content.innerHTML = '

新标题

新内容

'
; // 追加HTML内容 content.innerHTML += '
追加的内容
'
; // 清空内容 content.innerHTML = '';
script>

WEB:DOM (二)核心操作 —— 内容_第1张图片
控制台内容始终不变的原因是:代码中 console.log(content.innerHTML) 是在所有 DOM 操作之前执行的,它只会输出执行时的innerHTML值

  • 优点:
    • 可以直接设置 HTML 结构,方便快捷
    • 支持追加内容
  • 缺点:
    • 设置内容时会重新解析 HTML,可能影响性能
    • 会移除元素原有的事件监听器
    • 存在 XSS 安全风险(当内容来自用户输入时)
  • 安全使用建议:当内容包含用户输入时,应先进行转义处理:
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(/</g, "<")
    .replace(/>/g, ">")
    .replace(/"/g, """)
    .replace(/'/g, "'");
}

// 用户输入
const userInput = '';
// 安全设置
content.innerHTML = escapeHtml(userInput);

代码解析:

  • 未转义的风险:如果直接执行 content.innerHTML = userInput,浏览器会解析并执行 转义为:
    <script>alert("xss")</script>;浏览器渲染时会显示为文本 ,但不会执行其中的脚本,从而避免了 XSS 攻击。

通过对用户输入的特殊字符进行转义,确保任何包含 HTML 标签或脚本的内容都只会被当作纯文本显示,而不会被浏览器解析为可执行的代码,从而有效防范 XSS 攻击。这是 Web 开发中处理用户输入(如评论、表单提交等)时的必备安全措施。

二、 innerText 与 textContent

innerTexttextContent都用于操作元素的文本内容,但它们有一些重要区别。

2.1 innerText

innerText获取或设置元素的可见文本内容(受 CSS 样式影响)。

<div id="textDemo" style="display: none;">
  隐藏的文本
  <span style="visibility: hidden;">不可见的文本span>
  <script>console.log('脚本内容')script>
div>

<script>
  const demo = document.getElementById('textDemo');
  console.log(demo.innerText); // 输出空字符串(因为元素被隐藏)
  
  // 修改样式使元素可见
  demo.style.display = 'block';
  console.log(demo.innerText); 
  // 输出: "隐藏的文本"(忽略了隐藏的span和脚本内容)
  
  // 设置文本内容
  demo.innerText = '新的文本
不会被解析'
; //
会被当作文本显示
script>

代码解析:
WEB:DOM (二)核心操作 —— 内容_第2张图片

WEB:DOM (二)核心操作 —— 内容_第3张图片

  1. 初始状态:元素完全隐藏时
  • innerText 的特性:只读取被 display: none 隐藏的元素内容。
  • div 本身设置了 display: none,正常来说,第17行代码输出内容应该为空字符串innerText 是 “用户可见文本”,但在元素 display: none 时,部分浏览器为了调试方便,会 “放宽规则”,把隐藏元素的文本也读出来(也就是红色框出的部分)。这属于浏览器对 innerText 在隐藏元素场景下的特殊处理,不是标准里 “严格可见文本” 的表现。
  1. 元素可见后:
  • 当 div 可见后(display: block),innerText 开始工作,但有两个关键行为:
    • 忽略 visibility: hidden 的内容:span 虽然占据空间,但 innerText 不会读取其内容(“不可见的文本” 被忽略)。
    • 忽略

你可能感兴趣的:(WEB:DOM (二)核心操作 —— 内容)