DOM基本操作

Javascript最廣泛的使用是在網頁頁面物件的操作，網頁頁面物件是由Document Object Model (DOM)所構成，整個網頁就是個document物件，document裡的物件統稱為元素(element)。javascript可以利用document物件來操作頁面上的元素。document是個物件，在javascript裡，利用「.」來使用物件裡的方法或屬性。這個物件裡有很多內建方法可以使用，其中一個方法是getElementById()，會取得對應id的元素。

底下的寫法就是找到id為demo的元素。

document.getElementById("demo")

當我們要去改變html的內容的時候，可以使用getElementById，在html裡找到特定id的元素，再去異動元素中的屬性，例如，innerHTML屬性就是這個元素的html內容，我們就可以利用「=」直接指定屬性來改變html的內容。

document.getElementById("demo").innerHTML = "<h1>Hello World!</h1>";

完整的程式碼

<!DOCTYPE html>
<html>
  <body>
  <p id="demo"></p> 
  </body>
  <script>
    document.getElementById("demo").innerHTML = "<h1>Hello World!</h1>";
  </script>
</html>

可是，這樣寫有點沒意義，因為可以直接把靜態內容寫在html裡面。所以，通常不會這樣用的。例如，我們可能要顯示現在的時間。在javascript裡，要取得現在的時間利用Date物件，當我們產生一個空的Date物件，物件內容就會是產生時的時間:

new Date();

我們把產生出來的Date物件設定為demo的內容。記得，script要放在html body的後面，否則，因為執行時還沒產生html body，會因為無法取得demo，無法執行這個動作，而看不到內容。

這裡用到另一個元素的innerText屬性就是這個元素的文字內容，跟innerHTML屬性不一樣的是，如果內容有HTML，會被視為文字，而非HTML。

<!DOCTYPE html>
<html>
  <body>
    <h1 id="demo"></h1>
  </body>
  <script>
    document.getElementById("demo").innerText = new Date();
  </script>
</html>

元件及事件

網頁的互動模式跟傳統的程序式互動模式不太一樣，前面介紹javascript時，採用的是程序式互動模式，所以，我們會透過prompt去收集資訊，處理後，利用alert回應給使用者，但是，網頁的互動模式是一些基本圖型化的使用介面(Graphic User Interface, GUI)元件去跟使用者互動，而且，採取的是事件驅動的處理方式。