跳转到内容

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 属性。