为什么 innerHTML 和 textContent 给出不同的结果？

Question

我知道这两个属性的工作方式不同。根据规范，innerHTML 适用于 html 标签，而 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。为什么会这样？

Answer 1

问题 -

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

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 在这种情况下 innerHTML 将将其解析为空内容，将不显示任何内容

为什么 innerHTML 和 textContent 给出不同的结果？

Why do innerHTML and textContent give different results?

html

javascript

innerhtml