迹忆客 专注技术分享

div 元素本质上是非交互式的。Javascript 通过使其具有交互性来为其注入活力。我们可能需要改写由 div 显示的文本。例如，在实现编辑功能时，我们可能会重复使用为开发添加功能而设计的屏幕。只是措辞需要改变。至于添加功能，我们可能需要将按钮的添加关键字改写为更新等等。让我们看看几种可以动态更改 div 文本的方法。

使用 innerHTML 属性更改 div 文本

与其他编程语言不同，我们不使用 getter 和 setter 方法将文本设置为 HTML 元素。div 的 HTML 元素对象有一个名为 innerHTML 的属性。我们可以使用它来获取和设置 HTML 对象的内容。此处 HTML 对象将处于活动状态。也就是说，它反映了刷新时浏览器中元素属性的任何更改。

以下是使用 innerHTML 的语法。

var text = htmlElement.innerHTML;
htmlElement.innerHTML = 'New Text';

在上面的代码片段中，我们使用 htmlElement.innerHTML 获取 HTML div 元素的内容。此处，htmlElement 是实际的 HTML 对象。类似地，我们可以使用相同的属性，即元素的 innerHTML，将内容设置为 div。我们只是将文本内容分配给 innerHTML。

• 用法：

<div id="div-element">Hey there!!</div>

window.onload = function() {
  document.getElementById('div-element').innerHTML = 'Hello World!!';
  console.log(document.getElementById('div-element').innerHTML);
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!';
  console.log(document.getElementById('div-element').innerHTML);
}

输出：

Hello World!!
Hello bunny!!

在我们应用 .innerHTML 之前，我们需要选择 HTML 元素。我们可以通过各种方式做到这一点。Javascript 有许多函数可以用来从 DOM 中查询元素。以下是一些最常用的方法。

• getElementById()：document 接口的这个函数用于使用 HTML 中指定的 id 从 DOM 中选择一个元素。该函数返回对应于所选元素的 HTML 对象。
• getElementsByClassName：我们可以使用 getElementsByClassName 函数根据 css class name 查询元素。此 javascript 方法将多个元素作为 HTML 对象数组返回。
• getElementsByName：还有另一种方法可以选择具有 name 属性的元素。我们在 HTML 中为节点指定 name 属性。此方法返回一个 HTML 对象数组。我们可以使用它，特别是如果我们有兴趣选择具有特定样式、CSS 类的多个元素并一次性对它们进行操作。
• getElementsByTagName：我们还可以使用 getElementsByTagName() 函数根据 HTML 标签选择元素。例如，我们可以对 DOM 等部分中的所有 div 元素执行一些操作。顾名思义，该函数返回一个 HTML 对象数组。
• querySelector：Javascript querySelector 函数更通用，可用于通过 css query 选择 HTML 元素。该函数返回满足在其参数中传递的条件的第一个元素。
• querySelectorAll：这个类似于 querySelector，唯一的区别是它会返回多个满足作为参数传递给它的 css query 格式的元素。

使用 textContent 节点属性更改 Div 的内容

尽管我们经常使用 innerHTML，但使用它存在安全风险。它与 innerHTML 如何替换 HTML 元素的内容有关。innerHTML 属性在一个镜头中删除所有子 HTML 节点，并添加其中指定的新内容。

安全风险来自于 innerHTML 属性允许我们插入任何一段 HTML 代码，即使它是有害的代码。我们将在下一节讨论这个方面。MDN 建议使用 node.textContent 来更改元素的文本。它用我们在 textContent 参数中分配的 text 替换 HTML 中的子节点。参考以下代码了解用法。

<div id="div-element">Hey there!!</div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent = 'Hello bunny!!'
}

输出：

Hello bunny!!

在这里，我们在更改文本之前选择 HTML 元素 div。我们使用 getElementById() 函数从 DOM 中查询元素。然后我们使用 textContent 来更改 div 的文本。屏幕加载时不会区分此更改。一旦浏览器加载网页，window.onload 函数就会被执行，并且文本会发生变化。因此，最终用户始终会看到较新的文本。在屏幕加载时，旧文本到新文本的变化并不明显。我们还可以在 setTimeOut 方法中使用 textContent 来查看更改。

内部 HTML 与 textcontent 安全方面

innerHTML 属性与 textContent 不同。这两个属性都以文本作为输入，但是，这里的安全漏洞是什么？在 innerHTML 中，可以添加恶意代码。请参阅以下代码片段。在这里，更改反映出来，并且将执行 innerHTML 代码。如以下代码片段所示，单击浅绿色 HTML div 元素时，屏幕上会弹出一个不需要的 alert。

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.innerHTML =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

如果我们在 textContent 中为 div 元素分配相同的内容，它不会将其呈现为 HTML 元素。Javascript 将内容呈现为屏幕上的文本。所以我们可以从字面上看到 <div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')"> 在网页中显示为文本。这方面使代码更加安全可靠。因此，如果我们打算更改 HTML 元素的文本，Javascript 最佳实践（由 MDN 支持）建议使用 textContent 而不是 innerHTML 属性。

<div id="div-element"></div>

window.onload = function() {
  var el = document.getElementById('div-element');
  el.textContent =
      `<div style="height: 20px; background: lightgreen" onclick="alert('Danger!!!')">`;
}

使用 :after 伪元素更改 div 文本

如果文本更改微不足道，我们可以使用 CSS 来更改 div 文本。我们使用 :after 伪 HTML 元素，在其中添加我们希望在 content 属性中显示的文本。它不适用于像 <img> 这样的 HTML 元素，其中浏览器将内容替换为加载的图像。下面的代码详细说明了用法。

<div class="pvw-title"><span>Facts</span></div>

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}