js 如何获取span的内容

要在JavaScript中获取元素的内容，可以使用document.querySelector()、document.getElementById()、innerText、innerHTML等方法。使用document.querySelector()选择元素、使用innerText获取文本内容、使用innerHTML获取HTML内容。接下来，我将详细解释如何使用这些方法来获取元素的内容，并提供一些示例代码。

一、使用document.querySelector()选择元素

1.1 使用document.querySelector()方法

document.querySelector()方法返回文档中匹配指定选择器的第一个元素。你可以使用CSS选择器来选择特定的元素。

// 选择第一个class为example的span元素
let spanElement = document.querySelector('.example');

1.2 使用document.querySelectorAll()方法

document.querySelectorAll()方法返回文档中匹配指定选择器的所有元素的静态NodeList（节点列表）。你可以使用此方法来选择多个元素。

// 选择所有class为example的span元素
let spanElements = document.querySelectorAll('.example');

二、使用document.getElementById()选择元素

如果你的元素有一个唯一的ID，你可以使用document.getElementById()方法来选择它。

// 选择ID为example的span元素
let spanElement = document.getElementById('example');

三、获取元素的文本内容

3.1 使用innerText

innerText属性获取或设置指定元素的文本内容（不包括HTML标签）。

// 获取span元素的文本内容
let spanText = spanElement.innerText;
console.log(spanText);

3.2 使用textContent

textContent属性获取或设置指定节点及其后代的文本内容（包括所有文本节点）。

// 获取span元素的文本内容
let spanText = spanElement.textContent;
console.log(spanText);

四、获取元素的HTML内容

4.1 使用innerHTML

innerHTML属性获取或设置指定元素的HTML内容（包括HTML标签）。

// 获取span元素的HTML内容
let spanHTML = spanElement.innerHTML;
console.log(spanHTML);

4.2 使用outerHTML

outerHTML属性获取或设置指定元素及其后代的HTML内容（包括元素自身的HTML标签）。

// 获取span元素的HTML内容，包括span标签
let spanOuterHTML = spanElement.outerHTML;
console.log(spanOuterHTML);

五、示例代码

下面是一个完整的示例代码，展示如何使用上述方法来获取元素的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Span Content</title>
</head>
<body>
    <span id="example">Hello, <strong>World!</strong></span>
    <span class="example">This is a <em>test</em>.</span>
    <script>
        // 使用document.getElementById()
        let spanElementById = document.getElementById('example');
        console.log('Using getElementById:');
        console.log('innerText:', spanElementById.innerText);
        console.log('textContent:', spanElementById.textContent);
        console.log('innerHTML:', spanElementById.innerHTML);
        console.log('outerHTML:', spanElementById.outerHTML);
        // 使用document.querySelector()
        let spanElementByClass = document.querySelector('.example');
        console.log('Using querySelector:');
        console.log('innerText:', spanElementByClass.innerText);
        console.log('textContent:', spanElementByClass.textContent);
        console.log('innerHTML:', spanElementByClass.innerHTML);
        console.log('outerHTML:', spanElementByClass.outerHTML);
        // 使用document.querySelectorAll()
        let spanElementsByClass = document.querySelectorAll('.example');
        console.log('Using querySelectorAll:');
        spanElementsByClass.forEach((element, index) => {
            console.log(`Element ${index + 1}:`);
            console.log('innerText:', element.innerText);
            console.log('textContent:', element.textContent);
            console.log('innerHTML:', element.innerHTML);
            console.log('outerHTML:', element.outerHTML);
        });
    </script>
</body>
</html>

通过这些方法，你可以轻松获取任何元素的内容。了解和掌握这些技术可以帮助你更有效地操作和管理DOM元素，从而提高你的前端开发技能。