为啥 innerHTML 和 textContent 给出不同的结果?

Posted

技术标签:

【中文标题】为啥 innerHTML 和 textContent 给出不同的结果?【英文标题】:Why do innerHTML and textContent give different results?为什么 innerHTML 和 textContent 给出不同的结果? 【发布时间】:2021-12-07 11:43:03 【问题描述】:

我知道这两个属性的工作方式不同。根据规范,innerhtml 适用于 html-tags,而textContent 适用于文本。但我不明白他们为什么在这里工作。

//textContent
function func1() 
    let a3 = [[1, 2, 3], [3, 4, 5], [6, [7, 'my']]];
    document.querySelector('.out-1').textContent = a3[2][0][1];

document.querySelector('.b-1').onclick = func1;

//innerHTML
function func2() 
    let a3 = [[1, 2, 3], [3, 4, 5], [6, [7, 'my']]];
    document.querySelector('.out-2').innerHTML = a3[2][0][1];
    return a3[2][1][1];

document.querySelector('.b-2').onclick = func2;
.wrapper 
  margin-bottom: 50px;
 <!-- textContent -->
 <div class='wrapper'>
   <div>textContent</div>
   <button class="b-1">PUSH</button>
   <div class="out-1"></div>
 </div>
 
 <!-- innerHTML -->
<div class='wrapper'>
   <div>innerHTML</div>
   <button class="b-2">PUSH</button>
   <div class="out-2"></div>
</div>
 

我会尝试提取不存在的元素。 textContent 什么都没有,而innerHTML 却没有undefined。为什么会这样?

【问题讨论】:

这能回答你的问题吗? ***.com/questions/35213147/… "textContent 设置器的步骤是,如果给定值为 null,则将其视为空字符串..."我> @Andreas 这不是null。这是undefined @Ivan 在 DOM 中没有 undefined 这样的东西。我非常有信心 undefined 在到达 DOM 时被视为“null”。 【参考方案1】:

问题-

a3[2][0][1];返回未定义,因为没有这样的元素。 innerHTML 显示 undefined 但 textContent 将 undefined 视为空字符串

const o = document.getElementById('1');
const s = document.getElementById('2');

o.textContent = undefined;
s.innerHTML = undefined;

console.log(typeof o.textContent);
// this means undefined is treated as an empty string
<div id="1"></div>
<div id="2"></div>

注意:

根据我的测试,innerHTML 接受来自对象、数组、字符串、数字、布尔值、未定义等的任何内容,它会显示 [object Object]、[Array] 等,但 null 在这种情况下会解析它内容为空,不会显示任何内容

【讨论】:

textContent 仅适用于字符串。这是可以理解的。但是为什么innerHTML 可以处理 JS 数据类型呢?我的意思是,它应该适用于 html-tags 或者在我看来 textContent 可以在 2 个 html 标记之间插入一个文本。虽然innerHTML 能够在 2 个 html 标记之间插入任何内容(其他 html 标记、JS 数据类型、字符串...)。我说的对吗? yup @Ivan 除了 null tho,如果你传入 null,它将解析为空内容 我试图在 Chrome 的控制台中运行您的代码,但我不能。它只是抛出一个异常 Uncaught TypeError: Cannot set properties of null (setting 'textContent') 为什么它会抛出这个异常? 因为在这种情况下,我为 sn-p 创建了自己的 html 内容和适当的 javascript,请确保您使用了相同的 html 标签/id

以上是关于为啥 innerHTML 和 textContent 给出不同的结果?的主要内容,如果未能解决你的问题,请参考以下文章

While 循环和 innerHTML - 为啥它会反向显示数字?

为啥随着 innerHTML 变大,替换 innerHTML 会变慢?

为啥我的 javascript 一直引用相同的 innerHTML?

为啥 removeChild 比 innerHTML = ' ' 快?

为啥 innerHtml 不起作用

为啥 DOM 更改后,IE 会丢弃 DOM 元素的 innerHTML/children?