Javascript入門學習第六篇 js DOM編程第1/2頁

2019-11-21 01:42:02

字體：大中小

來源：轉載

供稿：網友

學習英文：
Dom：文檔對象模型。Document object model
Bom：瀏覽器對象模型。
注：也可以叫窗口對象模型。（window object model.）
API：應用編程接口。
注：DOM其實可以看作一種API。
Node：節點。
注：節點分為：元素節點，屬性節點，文本節點。
元素節點包含屬性節點和文本節點。

Dom樹：

下面我們直接看到底怎么操作DOM。
1，    創建元素節點。createElement():
<SCRIPT LANGUAGE="JavaScript">
var a  = document.createElement("p");
alert( "節點類型是  ： " +a.nodeType   +  " , 節點名稱是： "  +  a.nodeName);
</SCRIPT>
輸出  ;     nodeType 是  1   .    a.nodeName 是  p ;
所以它創建的是一個元素節點 ….你也許會想  為什么文檔中沒發現節點 p呢？
我們看下面例子：
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var a  = document.createElement("p");
document.body.appendChild(a);
</SCRIPT>
用firebug查看下，發現文檔中已經有我們需要的結果了。

原來createElement()方法創建出來的新元素節點不會被自動添加到文檔里，既然沒添加到文檔里，說明它還是一個游離的狀態。如果想把它添加到文檔里，可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法（后面介紹）。

2，創建文本節點。createTextNode():
var b = document.createTextNode("my demo");
alert( "節點類型是  ： " +b.nodeType   +  " , 節點名稱是： "  +  b.nodeName);
輸出  ;     nodeType 是  3   .    a.nodeName 是  ＃text ;
所以它創建的是一個文本節點 ….你也許又會想  為什么文檔中沒發現這個文本節點呢？難道也和createElement()一樣，需要使用appendChild（）添加到文檔里。

對的，你的想法非常對。
我們看下面例子：
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);//先把文本節點添加到元素節點
document.body.appendChild(container);//再把元素節點添加到文檔里
</SCRIPT>

3，    復制節點。cloneNode(boolean) :一個參數：
看一個例子：
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);
document.body.appendChild(container);
var newpara = container.cloneNode(true);//true和false的區別
document.body.appendChild(newpara );

var newpara = container.cloneNode(false);//true和false的區別
document.body.appendChild(newpara );
</SCRIPT>
看下firebug下的結果：

12 下一頁閱讀全文

上一篇：Javascript入門學習第七篇 js dom實例操作第1/2頁

下一篇：Javascript入門學習第五篇 js函數第1/2頁