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