Javascript入門(mén)學(xué)習(xí)第六篇 js DOM編程第1/2頁(yè)
更新時(shí)間:2008年07月06日 10:01:30 作者:
上篇文章納悶的問(wèn)題,將在這章和以后的幾章里,慢慢搞定。
從今天起,開(kāi)始學(xué)習(xí)DOM編程 讓我們慢慢稱(chēng)為一名初級(jí)的js程序員。
然后往js匠人方向發(fā)展。
學(xué)習(xí)英文:
Dom:文檔對(duì)象模型。Document object model
Bom:瀏覽器對(duì)象模型。
注:也可以叫窗口對(duì)象模型。(window object model.)
API:應(yīng)用編程接口。
注:DOM其實(shí)可以看作一種API。
Node:節(jié)點(diǎn)。
注:節(jié)點(diǎn)分為:元素節(jié)點(diǎn),屬性節(jié)點(diǎn),文本節(jié)點(diǎn)。
元素節(jié)點(diǎn) 包含 屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)。
Dom樹(shù):
下面我們直接看 到底怎么操作DOM。
1, 創(chuàng)建元素節(jié)點(diǎn)。createElement():
<SCRIPT LANGUAGE="JavaScript">
var a = document.createElement("p");
alert( "節(jié)點(diǎn)類(lèi)型是 : " +a.nodeType + " , 節(jié)點(diǎn)名稱(chēng)是: " + a.nodeName);
</SCRIPT>
輸出 ; nodeType 是 1 . a.nodeName 是 p ;
所以它創(chuàng)建的是一個(gè)元素節(jié)點(diǎn) ….你也許會(huì)想 為什么文檔中沒(méi)發(fā)現(xiàn) 節(jié)點(diǎn) p呢?
我們看下面例子:
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var a = document.createElement("p");
document.body.appendChild(a);
</SCRIPT>
用firebug查看下,發(fā)現(xiàn)文檔中已經(jīng) 有我們需要的結(jié)果了。
原來(lái)createElement()方法創(chuàng)建出來(lái)的新元素節(jié)點(diǎn)不會(huì)被自動(dòng)添加到文檔里,既然沒(méi)添加到文檔里,說(shuō)明它還是一個(gè)游離的狀態(tài)。如果想把它添加到文檔里,可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法(后面介紹)。
2,創(chuàng)建文本節(jié)點(diǎn)。createTextNode():
var b = document.createTextNode("my demo");
alert( "節(jié)點(diǎn)類(lèi)型是 : " +b.nodeType + " , 節(jié)點(diǎn)名稱(chēng)是: " + b.nodeName);
輸出 ; nodeType 是 3 . a.nodeName 是 #text ;
所以它創(chuàng)建的是一個(gè)文本節(jié)點(diǎn) ….你也許又會(huì)想 為什么文檔中沒(méi)發(fā)現(xiàn) 這個(gè)文本節(jié)點(diǎn) 呢?難道也和createElement()一樣,需要使用appendChild()添加到文檔里。
對(duì)的,你的想法非常對(duì)。
我們看下面例子:
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);//先把文本節(jié)點(diǎn)添加到 元素節(jié)點(diǎn)
document.body.appendChild(container);//再把元素節(jié)點(diǎn)添加到 文檔里
</SCRIPT>
3, 復(fù)制節(jié)點(diǎn)。cloneNode(boolean) :一個(gè)參數(shù):
看一個(gè)例子:
<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的區(qū)別
document.body.appendChild(newpara );
var newpara = container.cloneNode(false);//true和false的區(qū)別
document.body.appendChild(newpara );
</SCRIPT>
看下firebug下的結(jié)果:
相關(guān)文章
簡(jiǎn)介JavaScript中的italics()方法的使用
這篇文章主要介紹了JavaScript中的italics()方法使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
JavaScript DOM學(xué)習(xí)第八章 表單錯(cuò)誤提示
這一章詳細(xì)介紹的表單錯(cuò)誤提示的方法比那種大多數(shù)使用警告框的方法要好的多。2010-02-02
Javascript獲取窗口(容器)的大小及位置參數(shù)列舉及簡(jiǎn)要說(shuō)明
Javascript獲取窗口(容器)的大小及位置一系列的東西比較多,容易混淆,在這里列舉及簡(jiǎn)要說(shuō)明下,需要的朋友可以參考下2012-12-12

