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. 的字串
<!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> 執行結果如下:
此例是利用 document 的 getElementById() 方法 (method) 取得 <article> 元素，然後再以 createElement() 新建一個 <div> 元素物件，並將 <div> 物件的 innerHTML 屬性 (attribute) 設定為 "There is no spoon." ，最後利用 <article> 元素物件的 appendChild() 方法將 <div> 加進 <article> 內，預設會接在 <article> 所有子代物件的最後，因此會顯示在 RUN 的下方。
我們也可以反過來，把 There is no spoon. 放在 RUN 的上方，例如
<!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>
這個例子是利用元素物件的 parentNode 屬性取得親代 <section> 物件，然後將新建的 <article> 插入 RUN 的 <article> 之前。
利用文件樹便可輕易的操作 HTML 網頁的元素，相關內容可參考本站的《HTML DOM 快速導覽》。Reference : http://pydoing.blogspot.tw/2012/01/html-5-domtree.html
沒有留言:
張貼留言