HTML node相關(guān)的一些資料整理
更新時(shí)間：2010年01月01日 23:23:54 作者：
HTML node相關(guān)的一些資料整理
一、HTML DOM是一個(gè)樹型的對(duì)象
二、每個(gè)node都包含該節(jié)點(diǎn)的某些信息，分別是：
1. nodeName
nodeName 屬性含有某個(gè)節(jié)點(diǎn)的名稱。
* 元素節(jié)點(diǎn)的 nodeName 是標(biāo)簽名稱
* 屬性節(jié)點(diǎn)的 nodeName 是屬性名稱
* 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
* 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
注釋：nodeName 所包含的 XML 元素的標(biāo)簽名稱永遠(yuǎn)是大寫的
2. nodeValue
對(duì)于文本節(jié)點(diǎn)，nodeValue 屬性包含文本。
對(duì)于屬性節(jié)點(diǎn)，nodeValue 屬性包含屬性值。
nodeValue 屬性對(duì)于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)是不可用的。
3. nodeType
nodeType 屬性可返回節(jié)點(diǎn)的類型。
最重要的節(jié)點(diǎn)類型是：
三、修改節(jié)點(diǎn)
1. [newfathernode].appendChild([childnode])
此操作會(huì)更改newfathernode和childnode之間的關(guān)系為父子節(jié)點(diǎn)，并且會(huì)自動(dòng)導(dǎo)致childnode的oldfathernode不在擁有此childnode節(jié)點(diǎn).
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>
二、每個(gè)node都包含該節(jié)點(diǎn)的某些信息，分別是：
1. nodeName
nodeName 屬性含有某個(gè)節(jié)點(diǎn)的名稱。
* 元素節(jié)點(diǎn)的 nodeName 是標(biāo)簽名稱
* 屬性節(jié)點(diǎn)的 nodeName 是屬性名稱
* 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
* 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
注釋：nodeName 所包含的 XML 元素的標(biāo)簽名稱永遠(yuǎn)是大寫的
2. nodeValue
對(duì)于文本節(jié)點(diǎn)，nodeValue 屬性包含文本。
對(duì)于屬性節(jié)點(diǎn)，nodeValue 屬性包含屬性值。
nodeValue 屬性對(duì)于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)是不可用的。
3. nodeType
nodeType 屬性可返回節(jié)點(diǎn)的類型。
最重要的節(jié)點(diǎn)類型是：
| 元素類型 | 節(jié)點(diǎn)類型 |
|---|---|
| 元素 | 1 |
| 屬性 | 2 |
| 文本 | 3 |
| 注釋 | 8 |
| 文檔 | 9 |
1. [newfathernode].appendChild([childnode])
此操作會(huì)更改newfathernode和childnode之間的關(guān)系為父子節(jié)點(diǎn)，并且會(huì)自動(dòng)導(dǎo)致childnode的oldfathernode不在擁有此childnode節(jié)點(diǎn).
2. [newfathernode].removeChild([childnode])
四、程序示例
復(fù)制代碼 代碼如下:
<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ān)文章
在JavaScript中通過URL傳遞漢字的方法...2007-04-04
基于JavaScript實(shí)現(xiàn)屏幕滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)屏幕滾動(dòng)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
js實(shí)現(xiàn)兩個(gè)值相加alert出來(lái)精確到指定位
兩個(gè)值相加精確指定位數(shù)在alert出來(lái)，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
微信小程序綁定手機(jī)號(hào)獲取驗(yàn)證碼功能
這篇文章主要介紹了微信小程序綁定手機(jī)號(hào)獲取驗(yàn)證碼功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
正則表達(dá)式在我們?nèi)粘痰墓ぷ黜?xiàng)目中,應(yīng)該是一個(gè)經(jīng)常用到的技能,在做一些字符的匹配和處理的過程中,發(fā)揮了很大的作用,這篇文章主要給大家介紹了關(guān)于js正則表達(dá)式常用方法的相關(guān)資料,需要的朋友可以參考下2024-05-05
JSON 是 JavaScript 原生格式，這意味著 在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包,接下來(lái)由腳本之家小編給大家介紹在JavaScript中使用JSON數(shù)據(jù)的方法，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
JS庫(kù)之Three.js 簡(jiǎn)易入門教程(詳解之一)
three.js是一款webGL框架，由于其易用性被廣泛應(yīng)用。下面腳本之家小編通過案例給大家闡述three.js的基本配置方法，具體內(nèi)容詳情大家參考下本文吧2017-09-09
原生JS實(shí)現(xiàn)的放大鏡特效示例【測(cè)試可用】
這篇文章主要介紹了原生JS實(shí)現(xiàn)的放大鏡特效,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
本文給大家分享的是JS/Jquery判斷對(duì)象是不是空對(duì)象的方法，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-06-06
這篇文章主要給大家介紹了如何使用uniapp解決token值無(wú)法使用的問題,文中給大家詳細(xì)介紹了產(chǎn)生原因和解決方案,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10