HTML 如何使用javascript获取DIV的内部文本

在本文中，我们将介绍如何使用javascript获取一个DIV元素的内部文本。通过使用javascript，我们可以轻松地获取和操作HTML页面中的元素。下面是一些示例和详细说明。

阅读更多：HTML 教程

使用innerHTML属性获取DIV的内部文本

javascript提供了一个内置属性innerHTML，可以用来获取一个元素的内部HTML内容。通过获取DIV元素的innerHTML属性，我们可以获得该DIV元素的所有子元素和文本内容。

<div id="myDiv">
  这是一个DIV元素的示例文本。
  <p>这是一个段落。</p>
</div>

<script>
var divText = document.getElementById("myDiv").innerHTML;
console.log(divText);
</script>

以上代码会将DIV元素的内部HTML内容打印到浏览器的控制台中。在这个例子中，divText的值将是包含DIV内部所有文本和子元素的字符串。

使用textContent属性获取DIV的内部文本

除了innerHTML，javascript还提供了textContent属性用于获取元素的文本内容。与innerHTML不同，textContent属性只包含元素的纯文本内容，而不包含任何HTML标记。

<div id="myDiv">
  这是一个DIV元素的示例文本。
  <p>这是一个段落。</p>
</div>

<script>
var divText = document.getElementById("myDiv").textContent;
console.log(divText);
</script>

上面的代码将以纯文本形式打印DIV元素的内容，不包含任何HTML标签。在这个例子中，divText的值将是”这是一个DIV元素的示例文本。\n这是一个段落。”。

使用innerText属性获取DIV的内部文本

innerText属性类似于textContent属性，可以获取元素的文本内容。与textContent不同的是，innerText会考虑CSS样式的影响，只返回可见的文本内容。

<div id="myDiv" style="display:none;">
  这是一个DIV元素的示例文本。
</div>

<script>
var divText = document.getElementById("myDiv").innerText;
console.log(divText);
</script>

在这个例子中，DIV元素被设置为不可见（display:none;），所以innerText属性将返回空字符串。

使用innerText属性获取可编辑DIV的内部文本

如果DIV元素设置为contenteditable属性为true，那么它的内容将是可编辑的。在这种情况下，我们可以使用innerText属性获取并修改DIV元素的文本内容。

<div id="myDiv" contenteditable="true">
  这是一个可编辑的DIV元素。
</div>

<button onclick="getDivText()">获取DIV的文本</button>
<button onclick="setDivText()">修改DIV的文本</button>

<script>
function getDivText() {
  var divText = document.getElementById("myDiv").innerText;
  console.log(divText);
}

function setDivText() {
  document.getElementById("myDiv").innerText = "修改后的文本内容。";
}
</script>

在上面的示例中，点击”获取DIV的文本”按钮将会将DIV元素的文本内容打印到控制台中。点击”修改DIV的文本”按钮将会修改DIV元素的文本内容为”修改后的文本内容”。

总结

通过使用javascript，我们可以方便地获取DIV元素的内部文本，并进行相应的操作。innerHTML属性返回包含子元素和文本的HTML内容，textContent属性返回纯文本内容，而innerText属性返回可见的文本内容。根据实际需求，我们可以选择合适的属性来获取和操作DIV元素的文本内容。