| 導購 | 订阅 | 在线投稿
分享
 
 
 

javascript節點操作DOMDocument屬性和方法

2008-08-08 06:10:19  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||

最近發現DOMDocument對象很重要,還有XMLHTTP也很重要

注意大小寫一定不能弄錯.

屬性:

1Attributes 存儲節點的屬性列表(只讀)

2childNodes 存儲節點的子節點列表(只讀)

3dataType 返回此節點的數據類型

4Definition 以DTD或XML模式給出的節點的定義(只讀)

5Doctype 指定文檔類型節點(只讀)

6documentElement 返回文檔的根元素(可讀寫)

7firstChild 返回當前節點的第一個子節點(只讀)

8Implementation 返回XMLDOMImplementation對象

9lastChild 返回當前節點最後一個子節點(只讀)

10nextSibling 返回當前節點的下一個兄弟節點(只讀)

11nodeName 返回節點的名字(只讀)

12nodeType 返回節點的類型(只讀)

13nodeTypedValue 存儲節點值(可讀寫)

14nodeValue 返回節點的文本(可讀寫)

15ownerDocument 返回包含此節點的根文檔(只讀)

16parentNode 返回父節點(只讀)

17Parsed 返回此節點及其子節點是否已經被解析(只讀)

18Prefix 返回名稱空間前綴(只讀)

19preserveWhiteSpace 指定是否保留空白(可讀寫)

20previousSibling 返回此節點的前一個兄弟節點(只讀)

21Text 返回此節點及其後代的文本內容(可讀寫)

22url 返回最近載入的XML文檔的URL(只讀)

23Xml 返回節點及其後代的XML表示(只讀)

方法:

1appendChild 爲當前節點添加一個新的子節點,放在最後的子節點後

2cloneNode 返回當前節點的拷貝

3createAttribute 創建新的屬性

4createCDATASection 創建包括給定數據的CDATA段

5createComment 創建一個注釋節點

6createDocumentFragment 創建DocumentFragment對象

7createElement 創建一個元素節點

8createEntityReference 創建EntityReference對象

9createNode 創建給定類型,名字和命名空間的節點

10createPorcessingInstruction 創建操作指令節點

11createTextNode 創建包括給定數據的文本節點

12getElementsByTagName 返回指定名字的元素集合

13hasChildNodes 返回當前節點是否有子節點

14insertBefore 在指定節點前插入子節點

15Load 導入指定位置的XML文檔

16loadXML 導入指定字符串的XML文檔

17removeChild 從子結點列表中刪除指定的子節點

18replaceChild 從子節點列表中替換指定的子節點

19Save 把XML文件存到指定節點

20selectNodes 對節點進行指定的匹配,並返回匹配節點列表

21selectSingleNode 對節點進行指定的匹配,並返回第一個匹配節點

22transformNode 使用指定的樣式表對節點及其後代進行轉換

23transformNodeToObject 使用指定的樣式表將節點及其後代轉換爲對象

*********************************

DOM(文檔對象模型)

DOM(文檔對象模型)概念的推出,這個API使HTML如虎添翼,但是有些學DHTML的朋友還是有些困撓,只是因爲目前的手冊的書寫不太科學,是按字母

來分的,不便查閱.其實DOM中最關鍵是要掌握節點與節點之間的關系(between node andnode),想學習DHTML中的DOM千萬不要從頭到尾地看遍所

有的屬性和方法,你有三國時張松的"過目不忘"的本領嗎?沒有吧,那就聽我分析一下:

其實DOM教給我們的就是一個層次結構,你可以理解爲一個樹形結構,就像我們的目錄一樣,一個根目錄,根目錄下有子目錄,子目錄下還有子

目錄……

根節點:

DOM把層次中的每一個對象都稱之爲節點(NODE),以HTML超文本標記語言爲例:整個文檔的一個根就是<html>,在DOM中可以使用

document.documentElement來訪問它,它就是整個節點樹的根節點(ROOT)

子節點:

一般意義上的節點,根節點以下最大子節點就是主文檔區<body>了,要訪問到body標簽,在腳本中應該寫:

document.body

body區以內所有的文本及HTML標簽都是文檔的節點,分別稱爲文本節點、元素節點(或者叫標簽節點),大家知道HTML說到底只是文本而矣,

不論怎麽樣的網頁必然由這兩個節點組成,也只能由這兩個節點組成

節點之間的關系:

節點之間的關系也是DOM中最重要的一個關節,如何正確地引用到節點對象,一定要清楚節點樹各個節點的相互描述方式,在DHTML裏,

Javascript腳本就用了各個節點對象的一整套方法和屬性去描述另外的節點對象。

節點的絕對引用:

返回文檔的根節點

document.documentElement

返回當前文檔中被擊活的標簽節點

document.activeElement

返回鼠標移出的源節點

event.fromElement

返回鼠標移入的源節點

event.toElement

返回激活事件的源節點

event.srcElement

節點的相對引用:(設當前對節點爲node)

返回父節點

node.parentNode

node.parentElement

返回子節點集合(包含文本節點及標簽節點)

node.childNodes

返回子標簽節點集合

node.children

返回子文本節點集合

node.textNodes

返回第一個子節點

node.firstChild

返回最後一個子節點

node.lastChild

返回同屬下一個節點

node.nextSibling

返回同屬上一個節點

node.previousSibling

節點的各種操作:(設當前的節點爲node)

新增標簽節點句柄:

document.createElement(sNode) //參數爲要新添的節點標簽名,例:newnode=document.createElement("div");

1、添加節點:

追加子節點:

node.appendChild(oNode) //oNode爲生新增的節點句柄,例:node.appendChild(newnode)

應用標簽節點

node.applyElment(oNode,sWhere)//oNode爲生新增的節點句柄,sWhere有兩個值:outside / inside,加在當前節點外面還是裏面

插入節點

inode.insertBefore()

node.insertAdjacentElement()

node.replaceAdjacentText()

2、修改節點:

刪除節點

node.remove()

node.removeChild()

node.removeNode()

替換節點

node.replaceChild()

node.replaceNode()

node.swapNode()

2、複制節點:

返回複制複制節點引用

node.cloneNode(bAll)//bAll爲布爾值,true / false 是否克隆該節點所有子節點

3、節點信息

是否包含某節點

node.contains()

是否有子節點

node.hasChildNodes()

*******************************************************

下面爲javascript操作xml

<script language="JavaScript">

<!--

var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")

//加載文檔

//doc.load("b.xml");

//創建文件頭

var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'");

//添加文件頭

doc.appendChild(p);

//用于直接加載時獲得根接點

//var root = doc.documentElement;

//兩種方式創建根接點

// var root = doc.createElement("students");

var root = doc.createNode(1,"students","");

//創建子接點

var n = doc.createNode(1,"ttyp","");

//指定子接點文本

//n.text = " this is a test";

//創建孫接點

var o = doc.createElement("sex");

o.text = "男"; //指定其文本

//創建屬性

var r = doc.createAttribute("id");

r.value="test";

//添加屬性

n.setAttributeNode(r);

//創建第二個屬性

var r1 = doc.createAttribute("class");

r1.value="tt";

//添加屬性

n.setAttributeNode(r1);

//刪除第二個屬性

n.removeAttribute("class");

//添加孫接點

n.appendChild(o);

//添加文本接點

n.appendChild(doc.createTextNode("this is a text node."));

//添加注釋

n.appendChild(doc.createComment("this is a comment\n"));

//添加子接點

root.appendChild(n);

//複制接點

var m = n.cloneNode(true);

root.appendChild(m);

//刪除接點

root.removeChild(root.childNodes(0));

//創建數據段

var c = doc.createCDATASection("this is a cdata");

c.text = "hi,cdata";

//添加數據段

root.appendChild(c);

//添加根接點

doc.appendChild(root);

//查找接點

var a = doc.getElementsByTagName("ttyp");

//var a = doc.selectNodes("//ttyp");

//顯示改接點的屬性

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);

}

}

//修改節點,利用XPATH定位節點

var b = doc.selectSingleNode("//ttyp/sex");

b.text = "女";

//alert(doc.xml);

//XML保存(需要在服務端,客戶端用FSO)

//doc.save();

//查看根接點XML

if(n)

{

alert(n.ownerDocument.xml);

}

//-->

</script>

最近發現DOMDocument對象很重要,還有XMLHTTP也很重要 注意大小寫一定不能弄錯. 屬性: 1Attributes 存儲節點的屬性列表(只讀) 2childNodes 存儲節點的子節點列表(只讀) 3dataType 返回此節點的數據類型 4Definition 以DTD或XML模式給出的節點的定義(只讀) 5Doctype 指定文檔類型節點(只讀) 6documentElement 返回文檔的根元素(可讀寫) 7firstChild 返回當前節點的第一個子節點(只讀) 8Implementation 返回XMLDOMImplementation對象 9lastChild 返回當前節點最後一個子節點(只讀) 10nextSibling 返回當前節點的下一個兄弟節點(只讀) 11nodeName 返回節點的名字(只讀) 12nodeType 返回節點的類型(只讀) 13nodeTypedValue 存儲節點值(可讀寫) 14nodeValue 返回節點的文本(可讀寫) 15ownerDocument 返回包含此節點的根文檔(只讀) 16parentNode 返回父節點(只讀) 17Parsed 返回此節點及其子節點是否已經被解析(只讀) 18Prefix 返回名稱空間前綴(只讀) 19preserveWhiteSpace 指定是否保留空白(可讀寫) 20previousSibling 返回此節點的前一個兄弟節點(只讀) 21Text 返回此節點及其後代的文本內容(可讀寫) 22url 返回最近載入的XML文檔的URL(只讀) 23Xml 返回節點及其後代的XML表示(只讀) 方法: 1appendChild 爲當前節點添加一個新的子節點,放在最後的子節點後 2cloneNode 返回當前節點的拷貝 3createAttribute 創建新的屬性 4createCDATASection 創建包括給定數據的CDATA段 5createComment 創建一個注釋節點 6createDocumentFragment 創建DocumentFragment對象 7createElement 創建一個元素節點 8createEntityReference 創建EntityReference對象 9createNode 創建給定類型,名字和命名空間的節點 10createPorcessingInstruction 創建操作指令節點 11createTextNode 創建包括給定數據的文本節點 12getElementsByTagName 返回指定名字的元素集合 13hasChildNodes 返回當前節點是否有子節點 14insertBefore 在指定節點前插入子節點 15Load 導入指定位置的XML文檔 16loadXML 導入指定字符串的XML文檔 17removeChild 從子結點列表中刪除指定的子節點 18replaceChild 從子節點列表中替換指定的子節點 19Save 把XML文件存到指定節點 20selectNodes 對節點進行指定的匹配,並返回匹配節點列表 21selectSingleNode 對節點進行指定的匹配,並返回第一個匹配節點 22transformNode 使用指定的樣式表對節點及其後代進行轉換 23transformNodeToObject 使用指定的樣式表將節點及其後代轉換爲對象 ********************************* DOM(文檔對象模型) DOM(文檔對象模型)概念的推出,這個API使HTML如虎添翼,但是有些學DHTML的朋友還是有些困撓,只是因爲目前的手冊的書寫不太科學,是按字母 來分的,不便查閱.其實DOM中最關鍵是要掌握節點與節點之間的關系(between node andnode),想學習DHTML中的DOM千萬不要從頭到尾地看遍所 有的屬性和方法,你有三國時張松的"過目不忘"的本領嗎?沒有吧,那就聽我分析一下: 其實DOM教給我們的就是一個層次結構,你可以理解爲一個樹形結構,就像我們的目錄一樣,一個根目錄,根目錄下有子目錄,子目錄下還有子 目錄…… 根節點: DOM把層次中的每一個對象都稱之爲節點(NODE),以HTML超文本標記語言爲例:整個文檔的一個根就是<html>,在DOM中可以使用 document.documentElement來訪問它,它就是整個節點樹的根節點(ROOT) 子節點: 一般意義上的節點,根節點以下最大子節點就是主文檔區<body>了,要訪問到body標簽,在腳本中應該寫: document.body body區以內所有的文本及HTML標簽都是文檔的節點,分別稱爲文本節點、元素節點(或者叫標簽節點),大家知道HTML說到底只是文本而矣, 不論怎麽樣的網頁必然由這兩個節點組成,也只能由這兩個節點組成 節點之間的關系: 節點之間的關系也是DOM中最重要的一個關節,如何正確地引用到節點對象,一定要清楚節點樹各個節點的相互描述方式,在DHTML裏, Javascript腳本就用了各個節點對象的一整套方法和屬性去描述另外的節點對象。 節點的絕對引用: 返回文檔的根節點 document.documentElement 返回當前文檔中被擊活的標簽節點 document.activeElement 返回鼠標移出的源節點 event.fromElement 返回鼠標移入的源節點 event.toElement 返回激活事件的源節點 event.srcElement 節點的相對引用:(設當前對節點爲node) 返回父節點 node.parentNode node.parentElement 返回子節點集合(包含文本節點及標簽節點) node.childNodes 返回子標簽節點集合 node.children 返回子文本節點集合 node.textNodes 返回第一個子節點 node.firstChild 返回最後一個子節點 node.lastChild 返回同屬下一個節點 node.nextSibling 返回同屬上一個節點 node.previousSibling 節點的各種操作:(設當前的節點爲node) 新增標簽節點句柄: document.createElement(sNode) //參數爲要新添的節點標簽名,例:newnode=document.createElement("div"); 1、添加節點: 追加子節點: node.appendChild(oNode) //oNode爲生新增的節點句柄,例:node.appendChild(newnode) 應用標簽節點 node.applyElment(oNode,sWhere)//oNode爲生新增的節點句柄,sWhere有兩個值:outside / inside,加在當前節點外面還是裏面 插入節點 inode.insertBefore() node.insertAdjacentElement() node.replaceAdjacentText() 2、修改節點: 刪除節點 node.remove() node.removeChild() node.removeNode() 替換節點 node.replaceChild() node.replaceNode() node.swapNode() 2、複制節點: 返回複制複制節點引用 node.cloneNode(bAll)//bAll爲布爾值,true / false 是否克隆該節點所有子節點 3、節點信息 是否包含某節點 node.contains() 是否有子節點 node.hasChildNodes() ******************************************************* 下面爲javascript操作xml <script language="JavaScript"> <!-- var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM") //加載文檔 //doc.load("b.xml"); //創建文件頭 var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'"); //添加文件頭 doc.appendChild(p); //用于直接加載時獲得根接點 //var root = doc.documentElement; //兩種方式創建根接點 // var root = doc.createElement("students"); var root = doc.createNode(1,"students",""); //創建子接點 var n = doc.createNode(1,"ttyp",""); //指定子接點文本 //n.text = " this is a test"; //創建孫接點 var o = doc.createElement("sex"); o.text = "男"; //指定其文本 //創建屬性 var r = doc.createAttribute("id"); r.value="test"; //添加屬性 n.setAttributeNode(r); //創建第二個屬性 var r1 = doc.createAttribute("class"); r1.value="tt"; //添加屬性 n.setAttributeNode(r1); //刪除第二個屬性 n.removeAttribute("class"); //添加孫接點 n.appendChild(o); //添加文本接點 n.appendChild(doc.createTextNode("this is a text node.")); //添加注釋 n.appendChild(doc.createComment("this is a comment\n")); //添加子接點 root.appendChild(n); //複制接點 var m = n.cloneNode(true); root.appendChild(m); //刪除接點 root.removeChild(root.childNodes(0)); //創建數據段 var c = doc.createCDATASection("this is a cdata"); c.text = "hi,cdata"; //添加數據段 root.appendChild(c); //添加根接點 doc.appendChild(root); //查找接點 var a = doc.getElementsByTagName("ttyp"); //var a = doc.selectNodes("//ttyp"); //顯示改接點的屬性 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); } } //修改節點,利用XPATH定位節點 var b = doc.selectSingleNode("//ttyp/sex"); b.text = "女"; //alert(doc.xml); //XML保存(需要在服務端,客戶端用FSO) //doc.save(); //查看根接點XML if(n) { alert(n.ownerDocument.xml); } //--> </script>
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有