javascript - 如何访问 DOM 中未包含在 HTML 标记中的文本

Question

使用 JavaScript，如何访问位于 DOM 中但未单独包装在标签中的文本。

例如:

<div class="container">
  <a href="home.html">Home</a> |
  <a href="abou.html">About</a> |
  <a href="cont.html">Contact</a> |
  <a href="misc.html">Misc.</a>
  CopyrightNot @ 2016
</div>

如何选择“CopyrightNot @ 2016”？

Answer 1

如果您要使用 JavaScript 访问的文本始终位于所有标记之后，也包含在 div.container 标记中，则使用以下内容:

document.querySelector('div.container').lastChild.textContent.trim()

使用querySelector方法访问div.container元素，然后访问lastChild该元素上的属性，它为您提供您正在寻找的 textNode。现在只需使用 textContent 属性获取该元素上的文本，最后使用 trim 方法去除前导空格和尾随空格以及换行符。

JSBin example.

<小时/>

同样，如果它位于所有其他标签之前，请使用 firstChild :

document.querySelector('div.container').firstChild.textContent.trim()

您可以使用 childNodes 访问 div.container 元素中的所有子节点、标签和文本。数组。

// for loop
var con = document.querySelector('div.container');
for ( ii = 0, len = con.childNodes.length; ii < len; ii += 1 ) {
  console.log(con.childNodes[ii].textContent.trim());
}

如果您知道文本在标签内的位置，例如第三个位置，那么它的索引将为2，您可以通过以下方式访问文本:

document.querySelector('div.container').childNodes[2].textContent.trim()