Javascript入門(mén)學(xué)習(xí)第七篇 js dom實(shí)例操作第1/2頁(yè)
更新時(shí)間：2008年07月06日 10:02:12 作者：
上篇文章我們講了 用dom方式 創(chuàng)建節(jié)點(diǎn)，復(fù)制節(jié)點(diǎn)，插入節(jié)點(diǎn)。
今天我們將講 刪除節(jié)點(diǎn)，替換節(jié)點(diǎn)，查找節(jié)點(diǎn)等。
直接從方法說(shuō)起：
1， 刪除節(jié)點(diǎn)。removeChild():
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var msg = document.getElementById("cssrain");
var b = document.getElementById("b");
msg.removeChild(b);
</script>
如果不知道要?jiǎng)h除的節(jié)點(diǎn)的父節(jié)點(diǎn)是什么？可以使用parentNode屬性。
比如：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var b = document.getElementById("b");
var c = b.parentNode;
c.removeChild(b);
</script>
2， 替換節(jié)點(diǎn)。repalceChild()
element.repalceChild( newNode , oldNode ); // 新節(jié)點(diǎn)是客人，肯定先服務(wù)他咯。。oldNode必須是Element的一個(gè)子節(jié)點(diǎn)。
例子：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var cssrain = document.getElementById("cssrain");
var msg = document.getElementById("b");
var para = document.createElement("p");
cssrain.replaceChild( para , msg );
</script>
3，查找節(jié)點(diǎn)
相對(duì)上面的方法，查找節(jié)點(diǎn)是比較簡(jiǎn)單的。
因?yàn)楹芏嗳硕加眠^(guò)。(記得我認(rèn)識(shí)js的第一句就是getElementById();)
getElementById();
返回一個(gè)對(duì)象， 對(duì)象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。
getElementsByTagName() 查找標(biāo)簽名的所有元素。
返回一個(gè)集合，可以用循環(huán)取出每個(gè)對(duì)象，對(duì)象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。
例子：
var ps = document.getElementsByTagName(“p”);
for(var i=0 ; i< ps.length ; i++){
ps[i].setAttribute(“title”,”hello”);
//也可以使用: ps.item(i).setAttribute("title","hello");
}
1， 刪除節(jié)點(diǎn)。removeChild():
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var msg = document.getElementById("cssrain");
var b = document.getElementById("b");
msg.removeChild(b);
</script>
如果不知道要?jiǎng)h除的節(jié)點(diǎn)的父節(jié)點(diǎn)是什么？可以使用parentNode屬性。
比如：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var b = document.getElementById("b");
var c = b.parentNode;
c.removeChild(b);
</script>
2， 替換節(jié)點(diǎn)。repalceChild()
element.repalceChild( newNode , oldNode ); // 新節(jié)點(diǎn)是客人，肯定先服務(wù)他咯。。oldNode必須是Element的一個(gè)子節(jié)點(diǎn)。
例子：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var cssrain = document.getElementById("cssrain");
var msg = document.getElementById("b");
var para = document.createElement("p");
cssrain.replaceChild( para , msg );
</script>
3，查找節(jié)點(diǎn)
相對(duì)上面的方法，查找節(jié)點(diǎn)是比較簡(jiǎn)單的。
因?yàn)楹芏嗳硕加眠^(guò)。(記得我認(rèn)識(shí)js的第一句就是getElementById();)
getElementById();
返回一個(gè)對(duì)象， 對(duì)象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。
getElementsByTagName() 查找標(biāo)簽名的所有元素。
返回一個(gè)集合，可以用循環(huán)取出每個(gè)對(duì)象，對(duì)象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。
例子：
var ps = document.getElementsByTagName(“p”);
for(var i=0 ; i< ps.length ; i++){
ps[i].setAttribute(“title”,”hello”);
//也可以使用: ps.item(i).setAttribute("title","hello");
}
您可能感興趣的文章:
- Javascript標(biāo)準(zhǔn)DOM Range操作全集
- Javascript里使用Dom操作Xml
- JavaScript 節(jié)點(diǎn)操作 以及DOMDocument屬性和方法
- javascript dom 操作詳解 js加強(qiáng)
- javascript dom操作之cloneNode文本節(jié)點(diǎn)克隆使用技巧
- JS DOM 操作實(shí)現(xiàn)代碼
- JavaScript 高級(jí)篇之DOM文檔,簡(jiǎn)單封裝及調(diào)用、動(dòng)態(tài)添加、刪除樣式（六）
- js和jquery對(duì)dom節(jié)點(diǎn)的操作(創(chuàng)建/追加)
- javascript將DOM節(jié)點(diǎn)添加到文檔的方法實(shí)例分析
- JavaScript利用HTML DOM進(jìn)行文檔操作的方法
相關(guān)文章
本文詳細(xì)介紹javascript的繼承等各方面相關(guān)知識(shí)2012-11-11
JavaScript中的勻速運(yùn)動(dòng)和變速(緩沖)運(yùn)動(dòng)詳細(xì)介紹
一個(gè)div的運(yùn)動(dòng)其實(shí)就是它與瀏覽器邊框的距離在變動(dòng)。如果他變化的速率一定，那就是勻速運(yùn)動(dòng)；如果變化的速率不一定，那么就是變速運(yùn)動(dòng)2012-11-11
document.getElementBy("id")與$("#id")有什么區(qū)
有朋友問(wèn)document.getElementBy("id")與$("#id")的區(qū)別，其實(shí)第一個(gè)就是js中獲取對(duì)象的方法， 第二個(gè)是通過(guò)自定義函數(shù)方便調(diào)用，而第三個(gè)是jquery中獲取id對(duì)象的方法2013-09-09
淺談Javascript中勻速運(yùn)動(dòng)的停止條件
這篇文章主要給我們探討了Javascript中勻速運(yùn)動(dòng)的停止條件的原理及其與緩沖運(yùn)動(dòng)的區(qū)別,需要的朋友可以參考下2014-12-12
讓我們一起來(lái)學(xué)習(xí)一下什么是javascript的閉包
這篇文章主要為大家詳細(xì)介紹了javascript的閉包，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
Javascript中常見(jiàn)的校驗(yàn)如域名、手機(jī)、郵箱等等
Javascript中常見(jiàn)的校驗(yàn)如：驗(yàn)證一般域名校驗(yàn),手機(jī)校驗(yàn),郵箱校驗(yàn)等等,下面是具體的實(shí)現(xiàn),感興趣的朋友可以參考下2014-01-01
簡(jiǎn)介JavaScript中的unshift()方法的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中的unshift()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
javaScript array(數(shù)組)使用字符串作為數(shù)組下標(biāo)的方法
這篇文章主要介紹了javaScript array(數(shù)組)使用字符串作為數(shù)組下標(biāo)的方法,大家可以測(cè)試一下看看2013-11-11
這篇文章主要介紹了JSON的語(yǔ)法與規(guī)則詳解,Web?API可以接收J(rèn)SON格式的數(shù)據(jù)，也可以返回JSON格式的數(shù)據(jù)。在接收J(rèn)SON?數(shù)據(jù)時(shí)，需要使用相應(yīng)的庫(kù)或框架來(lái)解析JSON數(shù)據(jù)，在返回JSON數(shù)據(jù)時(shí)，可以使用相應(yīng)的庫(kù)或框架將數(shù)據(jù)轉(zhuǎn)換為JSON格式2023-07-07
