HTML 获取 Span 文本值

在本文中，我们将介绍如何使用 HTML 获取 Span 元素的文本值。

阅读更多：HTML 教程

什么是 Span 元素？

Span 元素是 HTML 中的一个行内元素，通常用于向文档中添加一些行内样式或者对特定的文本进行标记。Span 元素本身并没有任何默认样式，并且不会改变文档的结构或者语义。

获取 Span 文本值的方法

要获取 Span 元素的文本值，我们可以采用以下几种方法。

方法1：使用 innerHTML 属性

Span 元素的 innerHTML 属性可以返回该元素内的所有 HTML 代码。因此，我们可以通过获取 innerHTML 属性的值来获取 Span 元素的文本值。

<span id="mySpan">Hello World!</span>

<script>
    var span = document.getElementById("mySpan");
    var text = span.innerHTML;
    console.log(text);  // 输出：Hello World!
</script>

在上面的例子中，我们首先通过 document.getElementById 方法获取到了 ID 为 “mySpan” 的 Span 元素，然后使用 innerHTML 属性获取到了该元素的文本值，并将其输出到控制台。

需要注意的是，使用 innerHTML 属性会获取元素中的所有 HTML 内容。如果 Span 元素中包含了其他 HTML 标签，那么这些标签也会被包含在内。

方法2：使用 textContent 属性

Span 元素的 textContent 属性可以返回该元素内的文本内容，而不包括任何 HTML 标签。因此，我们可以通过获取 textContent 属性的值来获取 Span 元素的文本值。

<span id="mySpan">Hello World!</span>

<script>
    var span = document.getElementById("mySpan");
    var text = span.textContent;
    console.log(text);  // 输出：Hello World!
</script>

上面的例子中，我们使用了和方法1相似的步骤，但是在获取文本值时使用了 textContent 属性。与 innerHTML 不同，textContent 属性只返回元素内的纯文本内容，不包括任何 HTML 标签。

方法3：使用 innerText 属性

Span 元素的 innerText 属性与 textContent 类似，也可以返回该元素内的纯文本内容。但是，与 textContent 不同的是，innerText 会受到 CSS 样式的影响，如果某段文字被 CSS 隐藏了，那么使用 innerText 获取到的内容也会被隐藏。

<span id="mySpan" style="display: none;">Hello World!</span>

<script>
    var span = document.getElementById("mySpan");
    var text = span.innerText;
    console.log(text);  // 输出：（空字符串）
</script>

在上面的示例中，我们的 Span 元素添加了一个内联样式 display: none;，将其隐藏起来。通过使用 innerText 属性获取文本值时，得到的是一个空字符串，说明该内容被隐藏了。

注意事项

在使用上述方法获取 Span 元素的文本值时，需要注意以下几点：

如果 Span 元素没有包含任何文本内容，那么无论是使用 innerHTML、textContent 还是 innerText 属性，都会返回一个空字符串。
如果 Span 元素被 CSS 隐藏了，使用 innerText 获取到的文本值也会被隐藏。

所以，在获取 Span 元素的文本值之前，务必要确认该元素是可见的，并且包含了所需的文本内容。

示例

下面是一个示例，展示了如何获取多个 Span 元素的文本值，并将其显示在一个列表中。

<!DOCTYPE html>
<html>

<head>
    <title>示例</title>
</head>

<body>
    <span class="mySpan">HTML</span>
    <span class="mySpan">CSS</span>
    <span class="mySpan">JavaScript</span>

    <ul id="myList"></ul>

    <script>
        var spanList = document.getElementsByClassName("mySpan");
        var ul = document.getElementById("myList");

        for (var i = 0; i < spanList.length; i++) {
            var text = spanList[i].textContent;

            var li = document.createElement("li");
            li.appendChild(document.createTextNode(text));
            ul.appendChild(li);
        }
    </script>
</body>

</html>

在上面的示例中，我们首先使用 getElementsByClassName 方法获取到了所有类名为 “mySpan” 的 Span 元素，然后遍历这个列表，并通过 textContent 属性获取到了每个 Span 元素的文本值。