HTML node相關的一些資料整理
更新時間：2010年01月01日 23:23:54 作者：
HTML node相關的一些資料整理
一、HTML DOM是一個樹型的對象
二、每個node都包含該節(jié)點的某些信息，分別是：
1. nodeName
nodeName 屬性含有某個節(jié)點的名稱。
* 元素節(jié)點的 nodeName 是標簽名稱
* 屬性節(jié)點的 nodeName 是屬性名稱
* 文本節(jié)點的 nodeName 永遠是 #text
* 文檔節(jié)點的 nodeName 永遠是 #document
注釋：nodeName 所包含的 XML 元素的標簽名稱永遠是大寫的
2. nodeValue
對于文本節(jié)點，nodeValue 屬性包含文本。
對于屬性節(jié)點，nodeValue 屬性包含屬性值。
nodeValue 屬性對于文檔節(jié)點和元素節(jié)點是不可用的。
3. nodeType
nodeType 屬性可返回節(jié)點的類型。
最重要的節(jié)點類型是：
三、修改節(jié)點
1. [newfathernode].appendChild([childnode])
此操作會更改newfathernode和childnode之間的關系為父子節(jié)點，并且會自動導致childnode的oldfathernode不在擁有此childnode節(jié)點.
2. [newfathernode].removeChild([childnode])
四、程序示例
<html>
<body>
<div id="div1">
<div id="div3">
</div>
</div>
<div id="div2">
</div>
<script>
function $id(id){
return document.getElementById(id);
}
function CountNodes(arr){
var len = arr.length;
var i = 0;
while(len--){
(arr[len].nodeType==1) && i++;
}
return i;
}
window.onload = function(){
alert(CountNodes($id("div2").childNodes));
$id("div2").appendChild($id("div3"));
alert(CountNodes($id("div1").childNodes));
alert(CountNodes($id("div2").childNodes));
}
</script>
</body>
</html>
二、每個node都包含該節(jié)點的某些信息，分別是：
1. nodeName
nodeName 屬性含有某個節(jié)點的名稱。
* 元素節(jié)點的 nodeName 是標簽名稱
* 屬性節(jié)點的 nodeName 是屬性名稱
* 文本節(jié)點的 nodeName 永遠是 #text
* 文檔節(jié)點的 nodeName 永遠是 #document
注釋：nodeName 所包含的 XML 元素的標簽名稱永遠是大寫的
2. nodeValue
對于文本節(jié)點，nodeValue 屬性包含文本。
對于屬性節(jié)點，nodeValue 屬性包含屬性值。
nodeValue 屬性對于文檔節(jié)點和元素節(jié)點是不可用的。
3. nodeType
nodeType 屬性可返回節(jié)點的類型。
最重要的節(jié)點類型是：
| 元素類型 | 節(jié)點類型 |
|---|---|
| 元素 | 1 |
| 屬性 | 2 |
| 文本 | 3 |
| 注釋 | 8 |
| 文檔 | 9 |
1. [newfathernode].appendChild([childnode])
此操作會更改newfathernode和childnode之間的關系為父子節(jié)點，并且會自動導致childnode的oldfathernode不在擁有此childnode節(jié)點.
2. [newfathernode].removeChild([childnode])
四、程序示例
復制代碼 代碼如下:
<html>
<body>
<div id="div1">
<div id="div3">
</div>
</div>
<div id="div2">
</div>
<script>
function $id(id){
return document.getElementById(id);
}
function CountNodes(arr){
var len = arr.length;
var i = 0;
while(len--){
(arr[len].nodeType==1) && i++;
}
return i;
}
window.onload = function(){
alert(CountNodes($id("div2").childNodes));
$id("div2").appendChild($id("div3"));
alert(CountNodes($id("div1").childNodes));
alert(CountNodes($id("div2").childNodes));
}
</script>
</body>
</html>
相關文章
下面小編就為大家?guī)硪黄猨s從外部獲取圖片的實現方法。小編覺得挺不錯的， 現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
fullcalendar作為一個功能完善的日歷插件使用非常廣泛，在web開發(fā)開發(fā)過程 中非常流行。它與ext js 中的calendar非常類似，但考慮到extjs 比較“復雜龐大”，所以我在開發(fā)開發(fā)過程中都會優(yōu)先考慮fullcalendar2015-12-12
本文主要分享了原生js開發(fā)的日歷插件的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JS如何把字符串轉換成json,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了JS document form表單元素操作,結合完整實例形式詳細分析了JavaScript form表單元素獲取、輸出、遍歷等相關操作技巧,需要的朋友可以參考下2020-01-01
arcgis for js 修改infowindow樣式的方法
下面小編就為大家?guī)硪黄猘rcgis for js 修改infowindow樣式的方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
js實現響應按鈕點擊彈出可拖拽的非模態(tài)對話框完整實例【測試可用】
這篇文章主要介紹了js實現響應按鈕點擊彈出可拖拽的非模態(tài)對話框,結合完整實例形式分析了原生JavaScript實現的可拖拽非模態(tài)對話框實現技巧與使用方法,需要的朋友可以參考下2023-04-04
今天小編就為大家分享一篇解決Layui數據表格的寬高問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了怎樣控制input輸入框中提示信息的顯示和隱藏 ,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了紅米手機搶購時返回的js代碼，制作紅米搶購軟件時可以用到，,需要的朋友可以參考下2014-03-03