js 获取span标签的内容|极客笔记

js 获取span标签的内容

在网页开发中，经常需要获取页面中的特定元素的内容，而其中一个常见的需求就是获取标签中的文本内容。在JavaScript中，我们可以通过几种不同的方法来实现这个目标，本文将详细介绍这些方法。

方法一：使用document.getElementById()

如果我们已经知道了标签的id属性值，那么可以直接使用document.getElementById()方法来获取该元素，并获取其中的文本内容。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Get Span Content</title>
</head>
<body>
    <span id="mySpan">This is a span element.</span>

    <script>
        var spanContent = document.getElementById('mySpan').innerText;
        console.log(spanContent);
    </script>
</body>
</html>

上面的代码中，我们首先在标签中添加了一个id属性值为mySpan，然后在JavaScript代码中使用document.getElementById('mySpan').innerText来获取该元素的内部文本内容。最终我们将获取到的内容打印输出到了控制台中。

运行上面的代码后，你将看到控制台输出了This is a span element.，这就是标签中的文本内容。

方法二：使用querySelector()

如果我们知道了标签的CSS选择器，或者需要获取页面中的第一个标签的内容，我们可以使用document.querySelector()方法来获取该元素。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Get First Span Content</title>
</head>
<body>
    <span>This is the first span element.</span>
    <span>This is the second span element.</span>

    <script>
        var firstSpanContent = document.querySelector('span').innerText;
        console.log(firstSpanContent);
    </script>
</body>
</html>

在上面的代码中，我们使用了document.querySelector('span')来获取页面中第一个标签的内容，并将其输出到控制台中。

运行上面的代码后，你将看到控制台输出了This is the first span element.，这就是页面中第一个标签的文本内容。

方法三：使用getElementsByTagName()

如果页面中有多个标签，而我们需要获取所有这些标签的内容，那么可以使用document.getElementsByTagName()方法来获取所有符合条件的元素。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Get All Span Contents</title>
</head>
<body>
    <span>This is the first span element.</span>
    <span>This is the second span element.</span>

    <script>
        var allSpans = document.getElementsByTagName('span');
        for (var i = 0; i < allSpans.length; i++) {
            console.log(allSpans[i].innerText);
        }
    </script>
</body>
</html>

在上面的代码中，我们使用了document.getElementsByTagName('span')来获取页面中所有的标签，并通过循环遍历输出它们的文本内容。

运行上面的代码后，你将看到控制台输出了以下内容：

This is the first span element.
This is the second span element.

这就是页面中所有标签的文本内容。

总的来说，通过上面介绍的三种方法，我们可以方便地在JavaScript中获取标签的内容，从而满足页面开发中对于元素内容获取的需求。当然，在实际开发中还可以根据具体情况来选择最适合的方法。

js 获取span标签的内容