HTML 5 快速導覽 - 文件樹

HTML 文件就是一個 Document 型態的物件 (object) document ， <html> 為 document 的子代元素 (element) ，而 <head> 與 <body> 分別是 <html> 的子代元素， <head> 與 <body> 其內的元素都是所屬的子代元素




因此整份 HTML 文件就是一個文件樹 (DOM tree) ，我們可以利用 JavaScript 對文件進行處理，例如下面的網頁檔案設置一個 RUN 按鈕，按下 RUN 之後，在 RUN 的下方會新增一個 <div> 元素，其內為 There is no spoon. 的字串
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html> 
<html> 
  <head> 
     <title>HTML 5 DEMO</title>
     <style>
       article {
         display: block;
       }
     </style>
     <script>
       function run() {
         var d = document.getElementById("demo");
         var n = document.createElement("div");
         n.innerHTML = "There is no spoon.";
         d.appendChild(n);
       }
     </script>
  </head> 
  <body>
    <section>
      <article id="demo">
        <div><input type="button" value="RUN" onclick="run();"></div>
      </article>
    </section> 
  </body> 
</html> 
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：domtest1.html
     功能：示範 HTML 5 標記語言
     作者：張凱慶
     時間：西元 2011 年 12 月 -->


Firefox 開啟，按 RUN 後的結果如下



此例是利用 document 的 getElementById() 方法 (method) 取得 <article> 元素，然後再以 createElement() 新建一個 <div> 元素物件，並將 <div> 物件的 innerHTML 屬性 (attribute) 設定為 "There is no spoon." ，最後利用 <article> 元素物件的 appendChild() 方法將 <div> 加進 <article> 內，預設會接在 <article> 所有子代物件的最後，因此會顯示在 RUN 的下方。


我們也可以反過來，把 There is no spoon. 放在 RUN 的上方，例如
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html> 
<html> 
  <head> 
     <title>HTML 5 DEMO</title>
     <style>
       article {
         display: block;
       }
     </style>
     <script>
       function run() {
         var d = document.getElementById("demo");
         var p = d.parentNode;
         var n = document.createElement("article");
         n.innerHTML = "There is no spoon.";
         p.insertBefore(n, d);
       }
     </script>
  </head> 
  <body>
    <section>
      <article id="demo">
        <div><input type="button" value="RUN" onclick="run();"></div>
      </article>
    </section> 
  </body> 
</html> 
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：domtest2.html
     功能：示範 HTML 5 標記語言
     作者：張凱慶
     時間：西元 2011 年 12 月 -->


Firefox 開啟，按 RUN 後的結果如下



這個例子是利用元素物件的 parentNode 屬性取得親代 <section> 物件，然後將新建的 <article> 插入 RUN 的 <article> 之前。


利用文件樹便可輕易的操作 HTML 網頁的元素，相關內容可參考本站的《HTML DOM 快速導覽》。


中英文術語對照
物件object
元素element
方法method
屬性attribute
瀏覽器broswer


您可以繼續參考
基本概念


相關目錄
HTML 5 快速導覽
HTML, CSS 教材
首頁


參考資料
http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#dom-trees
http://www.w3.org/TR/2011/WD-html5-20110525/infrastructure.html#dom-trees
http://en.wikipedia.org/wiki/DOM_tree
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)