JavaScript/Runtime document manipulation

运行时文档操作

JavaScript可以使用标准 DOM（文档对象模型）操作已加载到浏览器中的 HTML 文档。让我们看一个例子：

<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
function displayMessage() {
  var divObj = document.getElementById("messageText");
  if (divObj) {
    divObj.innerHTML="<b>This is the new Message from Javascript</b>";
  }
}
</script>
</head>
  <body>
      <input type="button" value="Display Message" onclick="displayMessage();" />
      <div id="messageText" style="width:400px; height:200px; color:#00FF00"></div>
  </body>
</html>

当这个 html 文档加载到浏览器中时，浏览器会显示一个“显示消息”按钮。当我们单击此按钮时，文本“This is the new Message from Javascript”以粗体文本显示在 messageText div 容器中。

请注意，JavaScript 函数 displayMessage() 通过添加文本和提供粗体样式更改了 html 文档的内容。

  
var divObj = document.getElementById("messageText");

这个document对象是加载的 HTML 的表示。通过使用它的getElementById() 方法，并通过传递 HTML 元素的 id/name，我们可以点击元素的 DOM 表示（在本例中为 div 标签）并将新的 HTML 元素添加到当前的 HTML 文档使用 innerHTML 属性。