Question

如果我有以下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。我的代码肯定有问题（即使我看不到它），对不起任何混淆，如果您认为应编辑不误导任何人，请

谢谢

Answer 1

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));

Answer 2

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

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

window.document与document相同的原因是因为document是global scope中的变量， window 1}}范围。

此外，要调查控制台中可用的方法，您可以将元素分配给变量，然后您可以看到自动填充，至少在Chrome开发人员工具中。

var el = document.getElementById('myheader')

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

Answer 3

根据MDN，HTMLHeadingElement上没有.text属性。我已经在Chrome上对此进行了测试，只是为了确定：

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

要从任何元素可靠地获取文本内容，您可以使用此构造：

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

此处，大多数浏览器都理解.textContent，而.innerText特定于IE，''是后备值。

为什么可以使用JavaScript中的innerHTML在p元素中使用.text和内容访问header元素中的内容

3 个答案: