JS获取div文本内容|极客笔记

JS获取div文本内容

在网页开发中，经常会需要通过JavaScript来操作DOM元素，其中一个常见的需求就是获取某个元素的文本内容。本文将详细介绍如何使用JavaScript来获取一个div元素的文本内容，并给出相应的示例代码。

基本方法

要获取一个div元素的文本内容，可以使用JavaScript中的innerText或textContent属性。这两个属性分别用于获取元素的可视文本内容和所有文本内容，包括隐藏的文本。下面分别介绍这两种方法。

innerText

innerText属性返回一个元素及其后代元素的纯文本内容，不包含任何HTML标签。例如，如果有一个div元素如下：

<div id="myDiv">
    Hello, world!
</div>

可以通过JavaScript来获取这个div的文本内容：

var div = document.getElementById("myDiv");
var text = div.innerText;
console.log(text); // 输出 "Hello, world!"

textContent

textContent属性返回一个元素及其后代元素的所有文本内容，包括隐藏的文本。在上面的示例中，使用textContent属性也可以获取相同的文本内容：

var div = document.getElementById("myDiv");
var text = div.textContent;
console.log(text); // 输出 "Hello, world!"

注意事项

在使用innerText和textContent属性时，需要注意一些细微的差别：

innerText会忽略隐藏的元素和脚本样式的影响，而textContent会显示所有文本内容。
innerText在设置时会连同HTML标签一起输出，而textContent只会输出纯文本内容。

实际应用

下面通过一个实际的示例来演示如何使用JavaScript获取一个div元素的文本内容。假设有以下HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myDiv">
        This is a div element.
        <p>This is a paragraph.</p>
        <span>This is a span.</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

然后，在script.js文件中编写JavaScript代码获取这个div的文本内容：

var div = document.getElementById("myDiv");
var text = div.innerText;
console.log(text);

将以上代码添加到script.js文件中，并在浏览器中打开HTML文件，可以看到控制台输出了div元素的文本内容：

This is a div element.
This is a paragraph.
This is a span.

结论

通过以上的介绍和示例，我们了解了如何使用JavaScript来获取一个div元素的文本内容，以及在实际应用中的使用方法和注意事项。

JS获取div文本内容