为什么header元素中的内容可以用.text访问，p元素中的内容可以用innerHTML访问?

Why content within a header element can be accessed with .text and content within a p element with innerHTML in JavaScript

本文关键字：访问 元素 innerHTML text 为什么 header      更新时间：2023-09-26

如果我有以下html 

<h2 id="myheader">some content</h2>
<p id="myp">some content </p>

要获取标题的内容，我可以执行

document.getElementById('myheader').text

但后来我尝试了相同的逻辑与段落元素，但我不得不使用innerHTML

这种差异背后有某种逻辑吗?

同样在控制台中，我喜欢这样一个事实:我可以写一些像window这样的东西，然后我可以钻取window之后我可以使用的所有可用方法。例如，这就是我如何发现什么window.document是相同的document。是否有一种方法可以为document.getElementById('myheader')这样的事情做同样的事情，一种方法来调查点document.getElementById('myheader').HERE之后可用的方法，只是通过实验来学习

编辑:我意识到我错了关于.text。我的代码一定有问题(即使我看不见)，抱歉造成任何混乱，如果你认为应该编辑，不要误导任何人，请做

谢谢

textContent可用于两个元素(H1和p)。

你可以像这样检查一个HTMLElement:

var elem = document.getElementById(some_id),
    s = [],
    key;
for (key in elem) {
    s.push(key + ': ' + elem[key]);
}
s = s.join(''n');
console.log(s);

许多控制台还通过记录元素来创建元素结构树:

console.log(document.getElementById(some_id));

你真的可以做document.getElementById('myheader').text吗?因为在我看来，除非你使用jQuery的.text()方法。

在任何情况下，您都可以在您的两个元素上使用innerText和textContent等方法。

window.document与document相同的原因是document是全局作用域中的一个变量，而是window作用域的。

另外，为了研究控制台中可用的方法，您可以将元素分配给一个变量，然后您可以看到自动完成，至少在Chrome开发人员工具中是这样的。

var el = document.getElementById('myheader')

然后开始在控制台中输入el. …

根据MDN，在HTMLHeadingElement上没有.text属性。我已经在Chrome上测试了这个，只是为了确定:

> document.createElement('h2').text
  undefined

要可靠地从任何元素获取文本内容，您可以使用以下结构:

var text = element.textContent || element.innerText || '';

这里，.textContent被大多数浏览器理解，而.innerText是特定于IE的，''是备用值。

相关文章：