跳至內容

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