詳細(xì)講解JS節(jié)點(diǎn)知識
注意大小寫一定不能弄錯(cuò).
屬性:
Attributes 存儲(chǔ)節(jié)點(diǎn)的屬性列表(只讀)
childNodes 存儲(chǔ)節(jié)點(diǎn)的子節(jié)點(diǎn)列表(只讀)
dataType 返回此節(jié)點(diǎn)的數(shù)據(jù)類型
Definition 以DTD或XML模式給出的節(jié)點(diǎn)的定義(只讀)
Doctype 指定文檔類型節(jié)點(diǎn)(只讀)
documentElement 返回文檔的根元素(可讀寫)
firstChild 返回當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)(只讀)
Implementation 返回XMLDOMImplementation對象
lastChild 返回當(dāng)前節(jié)點(diǎn)最后一個(gè)子節(jié)點(diǎn)(只讀)
nextSibling 返回當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)(只讀)
nodeName 返回節(jié)點(diǎn)的名字(只讀)
nodeType 返回節(jié)點(diǎn)的類型(只讀)
nodeTypedValue 存儲(chǔ)節(jié)點(diǎn)值(可讀寫)
nodeValue 返回節(jié)點(diǎn)的文本(可讀寫)
ownerDocument 返回包含此節(jié)點(diǎn)的根文檔(只讀)
parentNode 返回父節(jié)點(diǎn)(只讀)
Parsed 返回此節(jié)點(diǎn)及其子節(jié)點(diǎn)是否已經(jīng)被解析(只讀)
Prefix 返回名稱空間前綴(只讀)
preserveWhiteSpace 指定是否保留空白(可讀寫)
previousSibling 返回此節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)(只讀)
Text 返回此節(jié)點(diǎn)及其后代的文本內(nèi)容(可讀寫)
url 返回最近載入的XML文檔的URL(只讀)
Xml 返回節(jié)點(diǎn)及其后代的XML表示(只讀)
方法:
appendChild 為當(dāng)前節(jié)點(diǎn)添加一個(gè)新的子節(jié)點(diǎn),放在最后的子節(jié)點(diǎn)后
cloneNode 返回當(dāng)前節(jié)點(diǎn)的拷貝
createAttribute 創(chuàng)建新的屬性
createCDATASection 創(chuàng)建包括給定數(shù)據(jù)的CDATA段
createComment 創(chuàng)建一個(gè)注釋節(jié)點(diǎn)
createDocumentFragment 創(chuàng)建DocumentFragment對象
createElement 創(chuàng)建一個(gè)元素節(jié)點(diǎn)
createEntityReference 創(chuàng)建EntityReference對象
createNode 創(chuàng)建給定類型,名字和命名空間的節(jié)點(diǎn)
createPorcessingInstruction 創(chuàng)建操作指令節(jié)點(diǎn)
createTextNode 創(chuàng)建包括給定數(shù)據(jù)的文本節(jié)點(diǎn)
getElementsByTagName 返回指定名字的元素集合
hasChildNodes 返回當(dāng)前節(jié)點(diǎn)是否有子節(jié)點(diǎn)
insertBefore 在指定節(jié)點(diǎn)前插入子節(jié)點(diǎn)
Load 導(dǎo)入指定位置的XML文檔
loadXML 導(dǎo)入指定字符串的XML文檔
removeChild 從子結(jié)點(diǎn)列表中刪除指定的子節(jié)點(diǎn)
replaceChild 從子節(jié)點(diǎn)列表中替換指定的子節(jié)點(diǎn)
Save 把XML文件存到指定節(jié)點(diǎn)
selectNodes 對節(jié)點(diǎn)進(jìn)行指定的匹配,并返回匹配節(jié)點(diǎn)列表
selectSingleNode 對節(jié)點(diǎn)進(jìn)行指定的匹配,并返回第一個(gè)匹配節(jié)點(diǎn)
transformNode 使用指定的樣式表對節(jié)點(diǎn)及其后代進(jìn)行轉(zhuǎn)換
transformNodeToObject 使用指定的樣式表將節(jié)點(diǎn)及其后代轉(zhuǎn)換為對象
DOM(文檔對象模型)
DOM(文檔對象模型)概念的推出,這個(gè)API使HTML如虎添翼,但是有些學(xué)DHTML的朋友還是有些困撓,只是因?yàn)槟壳暗氖謨缘臅鴮懖惶茖W(xué),是按字母
來分的,不便查閱.其實(shí)DOM中最關(guān)鍵是要掌握節(jié)點(diǎn)與節(jié)點(diǎn)之間的關(guān)系(between node andnode),想學(xué)習(xí)DHTML中的DOM千萬不要從頭到尾地看遍所
有的屬性和方法,你有三國時(shí)張松的"過目不忘"的本領(lǐng)嗎?沒有吧,那就聽我分析一下:
其實(shí)DOM教給我們的就是一個(gè)層次結(jié)構(gòu),你可以理解為一個(gè)樹形結(jié)構(gòu),就像我們的目錄一樣,一個(gè)根目錄,根目錄下有子目錄,子目錄下還有子
目錄……
根節(jié)點(diǎn):
DOM把層次中的每一個(gè)對象都稱之為節(jié)點(diǎn)(NODE),以HTML超文本標(biāo)記語言為例:整個(gè)文檔的一個(gè)根就是<html>,在DOM中可以使用
document.documentElement來訪問它,它就是整個(gè)節(jié)點(diǎn)樹的根節(jié)點(diǎn)(ROOT)
子節(jié)點(diǎn):
一般意義上的節(jié)點(diǎn),根節(jié)點(diǎn)以下最大子節(jié)點(diǎn)就是主文檔區(qū)<body>了,要訪問到body標(biāo)簽,在腳本中應(yīng)該寫:
document.body
body區(qū)以內(nèi)所有的文本及HTML標(biāo)簽都是文檔的節(jié)點(diǎn),分別稱為文本節(jié)點(diǎn)、元素節(jié)點(diǎn)(或者叫標(biāo)簽節(jié)點(diǎn)),大家知道HTML說到底只是文本而矣,
不論怎么樣的網(wǎng)頁必然由這兩個(gè)節(jié)點(diǎn)組成,也只能由這兩個(gè)節(jié)點(diǎn)組成
節(jié)點(diǎn)之間的關(guān)系:
節(jié)點(diǎn)之間的關(guān)系也是DOM中最重要的一個(gè)關(guān)節(jié),如何正確地引用到節(jié)點(diǎn)對象,一定要清楚節(jié)點(diǎn)樹各個(gè)節(jié)點(diǎn)的相互描述方式,在DHTML里,
Javascript腳本就用了各個(gè)節(jié)點(diǎn)對象的一整套方法和屬性去描述另外的節(jié)點(diǎn)對象。
節(jié)點(diǎn)的絕對引用:
返回文檔的根節(jié)點(diǎn)
document.documentElement
返回當(dāng)前文檔中被擊活的標(biāo)簽節(jié)點(diǎn)
document.activeElement
返回鼠標(biāo)移出的源節(jié)點(diǎn)
event.fromElement
返回鼠標(biāo)移入的源節(jié)點(diǎn)
event.toElement
返回激活事件的源節(jié)點(diǎn)
event.srcElement
節(jié)點(diǎn)的相對引用:(設(shè)當(dāng)前對節(jié)點(diǎn)為node)
返回父節(jié)點(diǎn)
node.parentNode
node.parentElement
返回子節(jié)點(diǎn)集合(包含文本節(jié)點(diǎn)及標(biāo)簽節(jié)點(diǎn))
node.childNodes
返回子標(biāo)簽節(jié)點(diǎn)集合
node.children
返回子文本節(jié)點(diǎn)集合
node.textNodes
返回第一個(gè)子節(jié)點(diǎn)
node.firstChild
返回最后一個(gè)子節(jié)點(diǎn)
node.lastChild
返回同屬下一個(gè)節(jié)點(diǎn)
node.nextSibling
返回同屬上一個(gè)節(jié)點(diǎn)
node.previousSibling
節(jié)點(diǎn)的各種操作:(設(shè)當(dāng)前的節(jié)點(diǎn)為node)
新增標(biāo)簽節(jié)點(diǎn)句柄:
document.createElement(sNode) //參數(shù)為要新添的節(jié)點(diǎn)標(biāo)簽名,例:newnode=document.createElement("div");
、添加節(jié)點(diǎn):
追加子節(jié)點(diǎn):
node.appendChild(oNode) //oNode為生新增的節(jié)點(diǎn)句柄,例:node.appendChild(newnode)
應(yīng)用標(biāo)簽節(jié)點(diǎn)
node.applyElment(oNode,sWhere)//oNode為生新增的節(jié)點(diǎn)句柄,sWhere有兩個(gè)值:outside / inside,加在當(dāng)前節(jié)點(diǎn)外面還是里面
插入節(jié)點(diǎn)
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
、修改節(jié)點(diǎn):
刪除節(jié)點(diǎn)
node.remove()
node.removeChild()
node.removeNode()
替換節(jié)點(diǎn)
node.replaceChild()
node.replaceNode()
node.swapNode()
、復(fù)制節(jié)點(diǎn):
返回復(fù)制復(fù)制節(jié)點(diǎn)引用
node.cloneNode(bAll)//bAll為布爾值,true / false 是否克隆該節(jié)點(diǎn)所有子節(jié)點(diǎn)
、節(jié)點(diǎn)信息
是否包含某節(jié)點(diǎn)
node.contains()
是否有子節(jié)點(diǎn)
node.hasChildNodes()
*******************************************************
下面為javascript操作xml
<script language="JavaScript">
<!--
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
//加載文檔
//doc.load("b.xml");
//創(chuàng)建文件頭
var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'");
//添加文件頭
doc.appendChild(p);
//用于直接加載時(shí)獲得根接點(diǎn)
//var root = doc.documentElement;
//兩種方式創(chuàng)建根接點(diǎn)
// var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//創(chuàng)建子接點(diǎn)
var n = doc.createNode(1,"ttyp","");
//指定子接點(diǎn)文本
//n.text = " this is a test";
//創(chuàng)建孫接點(diǎn)
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//創(chuàng)建屬性
var r = doc.createAttribute("id");
r.value="test";
//添加屬性
n.setAttributeNode(r);
//創(chuàng)建第二個(gè)屬性
var r1 = doc.createAttribute("class");
r1.value="tt";
//添加屬性
n.setAttributeNode(r1);
//刪除第二個(gè)屬性
n.removeAttribute("class");
//添加孫接點(diǎn)
n.appendChild(o);
//添加文本接點(diǎn)
n.appendChild(doc.createTextNode("this is a text node."));
//添加注釋
n.appendChild(doc.createComment("this is a comment\n"));
//添加子接點(diǎn)
root.appendChild(n);
//復(fù)制接點(diǎn)
var m = n.cloneNode(true);
root.appendChild(m);
//刪除接點(diǎn)
root.removeChild(root.childNodes(0));
//創(chuàng)建數(shù)據(jù)段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加數(shù)據(jù)段
root.appendChild(c);
//添加根接點(diǎn)
doc.appendChild(root);
//查找接點(diǎn)
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("http://ttyp");
//顯示改接點(diǎn)的屬性
for(var i= 0;i<a.length;i++)
{
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++)
{
alert(a[i].attributes[j].name);
}
}
//修改節(jié)點(diǎn),利用XPATH定位節(jié)點(diǎn)
var b = doc.selectSingleNode("http://ttyp/sex");
b.text = "女";
//alert(doc.xml);
//XML保存(需要在服務(wù)端,客戶端用FSO)
//doc.save();
//查看根接點(diǎn)XML
if(n)
{
alert(n.ownerDocument.xml);
}
//-->
</script>
相關(guān)文章
js中parseFloat(參數(shù)1,參數(shù)2)定義和用法及注意事項(xiàng)
今天在看jquery時(shí)用到了parseFloat(第一個(gè)參數(shù),10),對這兩個(gè)參數(shù)很是疑惑,于是整理搜集了一下,曬出來與大家分享,希望本文對你有所幫助,感興趣的朋友可以了解下2013-01-01JavaScript Math.ceil 方法(對數(shù)值向上取整)
js Math.ceil用于對數(shù)值向上取整,即得到大于或等于該數(shù)值的最小整數(shù),需要的朋友可以參考下2015-01-01JavaScript基礎(chǔ)之立即執(zhí)行函數(shù)
這篇文章主要介紹了如何理解JavaScript中的立即執(zhí)行函數(shù),幫助大家更好的學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2021-11-11你必須知道的JavaScript 變量命名規(guī)則詳解
在編寫代碼的時(shí)候難免涉及到變量的命名問題,不能只要求變量名的語法正確,而忽略了變量命名對代碼可讀性的影響2013-05-05詳解JavaScript函數(shù)callee、call、apply的區(qū)別
這篇文章主要介紹了JavaScript函數(shù)callee、call、apply的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03