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却没有，仅显示了人类可读的< / strong>元素。

innerText知道样式，不会返回 hidden 元素的文本，而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 是一个属性，代表节点及其后代的“渲染”文本内容。作为一种吸气剂，它近似于用户使用光标突出显示元素的内容然后将其复制到剪贴板时将获得的文本。

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

有趣的是，document.getElementsByTagName('title')['0'].innerText 确实返回<title>元素的内容。做了一些阅读，explained in the spec：

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

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

Answer 3

@ user9218974，位于主体下的所有事物都假定要呈现为网页，而HEAD所包含的任何内容都只是用于呈现的信息和资源。

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

现在，如果您想要title的文本，则需要使用“ document.title”

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

3 个答案: