在JavaScript中，获取span标签内的值是一个常见的前端操作。以下介绍了五种高效的方法来获取span标签的内容。

一、使用document.getElementById

这种方法通过元素的ID属性来获取元素。它是最直接和最简单的方法，但要求每个元素都有唯一的ID。

示例代码：

<html>
<head>
<title>获取span值示例</title>
</head>
<body>
<span id="mySpan">Hello, World!</span>
<script>
var spanValue = document.getElementById("mySpan").innerText;
console.log(spanValue); // 输出 "Hello, World!"
</script>
</body>
</html>

二、使用document.getElementsByClassName

当页面中有多个span元素，且这些元素共享同一个类名时，可以使用document.getElementsByClassName。

示例代码：

<html>
<head>
<title>获取span值示例</title>
</head>
<body>
<span class="myClass">Hello, World!</span>
<script>
var spanValue = document.getElementsByClassName("myClass")[0].innerText;
console.log(spanValue); // 输出 "Hello, World!"
</script>
</body>
</html>

三、使用document.querySelector

document.querySelector方法可以通过CSS选择器来选择元素，它比getElementById和getElementsByClassName更灵活。

示例代码：

<html>
<head>
<title>获取span值示例</title>
</head>
<body>
<span class="myClass">Hello, World!</span>
<script>
var spanValue = document.querySelector(".myClass").innerText;
console.log(spanValue); // 输出 "Hello, World!"
</script>
</body>
</html>

四、使用document.querySelectorAll

如果你想获取页面中所有的span标签，可以使用document.querySelectorAll。

示例代码：

<html>
<head>
<title>获取span值示例</title>
</head>
<body>
<span class="myClass">Hello, World!</span>
<script>
var spans = document.querySelectorAll(\'span\');
spans.forEach(function(span) {
    console.log(span.innerText); // 输出每个span的文本内容
});
</script>
</body>
</html>

五、使用jQuery

如果你使用jQuery，获取span标签的内容也非常简单。

示例代码：

<html>
<head>
<title>获取span值示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<span class="myClass">Hello, World!</span>
<script>
$(".myClass").text(); // 输出 "Hello, World!"
</script>
</body>
</html>

以上五种方法都是获取span标签内容的有效方式，你可以根据具体的需求选择最合适的方法。