为什么html元素的innerText属性只显示body元素的innerText？

Question

 console.log(document.getElementsByTagName('html')['0'].textContent); console.log(document.getElementsByTagName('html')['0'].innerText);

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>innnerHtml of paragraph</p> </body> </html>

textContent属性打印html元素中除标签之外的所有文本内容。 它还可以打印所有空白区域和新线条。 因此，为了获得没有空格和新行的文本，我使用了innerText属性，但它没有在title元素中打印文本，只是在p元素中打印了文本。 为什么innerText属性不像我预期的那样工作？

Answer 1

您的下面的代码按照预期的行为工作。 我觉得你对它们感到困惑。 看看MDN吧

他们几个：

虽然textContent获取所有元素的内容，包括<script>和<style>元素，但innerText不会，只显示人类可读的元素。
innerText知道样式，不会返回隐藏元素的文本，而textContent则会。

要删除空格和换行符，可以使用正则表达式替换。

 // remove new-line and white space with replace console.log(document.getElementsByTagName('html')['0'].textContent.replace(/[\\n\\r]+|[\\s]{2,}/g, ' '));

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>innnerHtml of paragraph</p> </body> </html>

Answer 2

据MDN称：

Node.innerText是一个属性，表示节点及其后代的“呈现”文本内容。 作为一个getter，它近似于用户使用光标突出显示元素内容然后复制到剪贴板时将获得的文本。

<title>元素的内容不会呈现为文本内容，当然也无法突出显示或复制到剪贴板。 因此， Node.innerText不会返回Node.innerText 。

有趣的是， document.getElementsByTagName('title')['0'].innerText 确实返回<title>元素的内容。 对此进行了一些阅读，并在规范中进行了解释：

如果未呈现此元素，或者用户代理是非CSS用户代理，则返回与此元素上的textContent IDL属性相同的值。

此步骤可能会产生令人惊讶的结果，因为在未呈现的元素上访问innerText属性时，将返回其文本内容，但是在正在呈现的元素上访问时，所有未呈现的子项都具有其文本内容被忽略了

Answer 3

@ user9218974，身体下的每一件东西，都假设是渲染为网页，而HEAD包含的只是渲染的信息和资源。

所以在这里，在您的代码中，HEAD包含meta和title ，它们只是页面的信息/元。 所以或多或少你可以说你的工作区域是body的内容。

现在，如果你想要你的title文本，你需要使用'document.title'

为什么html元素的innerText属性只显示body元素的innerText？

问题描述

3 个解决方案

解决方案1
5 已采纳 2018-10-21 05:45:21

解决方案2
2 2018-10-21 05:50:57

解决方案3
1 2018-10-21 05:53:15

为什么html元素的innerText属性只显示body元素的innerText？

问题描述

3 个解决方案

解决方案1 5 已采纳 2018-10-21 05:45:21

解决方案2 2 2018-10-21 05:50:57

解决方案3 1 2018-10-21 05:53:15

解决方案1
5 已采纳 2018-10-21 05:45:21

解决方案2
2 2018-10-21 05:50:57

解决方案3
1 2018-10-21 05:53:15