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