如何获取第一个 HTML 元素的文本答案

【问题标题】：How to get text of first HTML element如何获取第一个 HTML 元素的文本
【发布时间】：2019-11-17 09:40:57
【问题描述】：

如何遍历 HTML DOM 以递归方式获取每个元素的文本。我只需要获取 HTML 元素的文本而不需要子元素的文本。考虑是否存在嵌套的 HTML 元素，那么如何获取第一个元素的文本，消除嵌套的子元素和相应的文本。

我试过“elem.InnerHTML”、“elem.InnerTEXT”、“elem.TextContent”，但这些似乎都回来了来自所有嵌套元素的文本。

代码示例：我的 HTML 如下：

<HTML>
    <HEAD></HEAD>
    <BODY>
        <DIV> SOMEDIVTEXT 
            <TABLE>
              <TBODY>
               <TR><TD>COLUMN1</TD></TR>
               <TR><TD>COLUMN2</TD></TR>
              </TBODY>
            </TABLE>
        </DIV>
    </BODY>
</HTML>

我只需要在当前节点指针位于 DIV 时提取 SOMEDIVTEXT 而不获取嵌套子级的文本。

【问题讨论】：

提供minimal reproducible example，以便我们了解您的操作/方法以及出了什么问题
离题，但为什么你的tbody 元素在你的table 元素之外？
您尝试获取的文本存储在 DOM 中，是 div 内元素的一个单独节点，因此单独提取它应该不难。到目前为止，您尝试过什么？
@Spudley 这个 HTML 是在客户端生成的，不受我们控制。我们现在可以忽略 TBody，因为它并不总是这样。
所以，我的基本需求是遍历完整的 HTML DOM。我通过 TreeWalker 方法执行此操作，如下所示： var treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT );

标签： html dom traversal

【解决方案1】：

试试firstChild 属性。它获取文本节点。

例如：

document.body.firstElementChild.firstChild

适用于此代码示例。

【讨论】：

感谢您的指导。我试过了，但我需要遍历 HTML DOM 并获取所有元素的内部文本。通过您的代码，我将获得 TBODY 对象而不是 DIV。我的问题是，如果我的当前节点是 DIV，我想提取 DIV 内文（SOMEDIVTEXT）而不获取子内文。

【解决方案2】：

好的，假设 (1) 您正在浏览器中编写 Javascript，并且 (2) 您将元素作为对象（您在问题中提到了“elem”，所以我猜您有？），那么您可以使用elem.childNodes() 获取元素的子元素。

这将为您提供一个包含元素内每个节点的Nodelist 对象。对于您在问题中引用的 HTML，这将是两个节点；第一个是包含文本SOMEDIVTEXT 的文本节点，第二个是包含<TABLE> 元素的元素节点。

所以elem.childNodes[0] 会得到你试图提取的文本。

但是 DOM 非常灵活，因此还有其他属性和方法也可以获得相同的效果，包括另一个答案中提到的 'elem.firstChild'。

【讨论】：