詳細講解JS節(jié)點知識
注意大小寫一定不能弄錯.
屬性:
Attributes 存儲節(jié)點的屬性列表(只讀)
childNodes 存儲節(jié)點的子節(jié)點列表(只讀)
dataType 返回此節(jié)點的數(shù)據(jù)類型
Definition 以DTD或XML模式給出的節(jié)點的定義(只讀)
Doctype 指定文檔類型節(jié)點(只讀)
documentElement 返回文檔的根元素(可讀寫)
firstChild 返回當前節(jié)點的第一個子節(jié)點(只讀)
Implementation 返回XMLDOMImplementation對象
lastChild 返回當前節(jié)點最后一個子節(jié)點(只讀)
nextSibling 返回當前節(jié)點的下一個兄弟節(jié)點(只讀)
nodeName 返回節(jié)點的名字(只讀)
nodeType 返回節(jié)點的類型(只讀)
nodeTypedValue 存儲節(jié)點值(可讀寫)
nodeValue 返回節(jié)點的文本(可讀寫)
ownerDocument 返回包含此節(jié)點的根文檔(只讀)
parentNode 返回父節(jié)點(只讀)
Parsed 返回此節(jié)點及其子節(jié)點是否已經(jīng)被解析(只讀)
Prefix 返回名稱空間前綴(只讀)
preserveWhiteSpace 指定是否保留空白(可讀寫)
previousSibling 返回此節(jié)點的前一個兄弟節(jié)點(只讀)
Text 返回此節(jié)點及其后代的文本內(nèi)容(可讀寫)
url 返回最近載入的XML文檔的URL(只讀)
Xml 返回節(jié)點及其后代的XML表示(只讀)
方法:
appendChild 為當前節(jié)點添加一個新的子節(jié)點,放在最后的子節(jié)點后
cloneNode 返回當前節(jié)點的拷貝
createAttribute 創(chuàng)建新的屬性
createCDATASection 創(chuàng)建包括給定數(shù)據(jù)的CDATA段
createComment 創(chuàng)建一個注釋節(jié)點
createDocumentFragment 創(chuàng)建DocumentFragment對象
createElement 創(chuàng)建一個元素節(jié)點
createEntityReference 創(chuàng)建EntityReference對象
createNode 創(chuàng)建給定類型,名字和命名空間的節(jié)點
createPorcessingInstruction 創(chuàng)建操作指令節(jié)點
createTextNode 創(chuàng)建包括給定數(shù)據(jù)的文本節(jié)點
getElementsByTagName 返回指定名字的元素集合
hasChildNodes 返回當前節(jié)點是否有子節(jié)點
insertBefore 在指定節(jié)點前插入子節(jié)點
Load 導入指定位置的XML文檔
loadXML 導入指定字符串的XML文檔
removeChild 從子結(jié)點列表中刪除指定的子節(jié)點
replaceChild 從子節(jié)點列表中替換指定的子節(jié)點
Save 把XML文件存到指定節(jié)點
selectNodes 對節(jié)點進行指定的匹配,并返回匹配節(jié)點列表
selectSingleNode 對節(jié)點進行指定的匹配,并返回第一個匹配節(jié)點
transformNode 使用指定的樣式表對節(jié)點及其后代進行轉(zhuǎn)換
transformNodeToObject 使用指定的樣式表將節(jié)點及其后代轉(zhuǎn)換為對象
DOM(文檔對象模型)
DOM(文檔對象模型)概念的推出,這個API使HTML如虎添翼,但是有些學DHTML的朋友還是有些困撓,只是因為目前的手冊的書寫不太科學,是按字母
來分的,不便查閱.其實DOM中最關(guān)鍵是要掌握節(jié)點與節(jié)點之間的關(guān)系(between node andnode),想學習DHTML中的DOM千萬不要從頭到尾地看遍所
有的屬性和方法,你有三國時張松的"過目不忘"的本領(lǐng)嗎?沒有吧,那就聽我分析一下：
其實DOM教給我們的就是一個層次結(jié)構(gòu)，你可以理解為一個樹形結(jié)構(gòu)，就像我們的目錄一樣，一個根目錄，根目錄下有子目錄，子目錄下還有子
目錄……
根節(jié)點：
DOM把層次中的每一個對象都稱之為節(jié)點（NODE），以HTML超文本標記語言為例：整個文檔的一個根就是<html>,在DOM中可以使用
document.documentElement來訪問它，它就是整個節(jié)點樹的根節(jié)點（ROOT）
子節(jié)點：
一般意義上的節(jié)點，根節(jié)點以下最大子節(jié)點就是主文檔區(qū)<body>了，要訪問到body標簽，在腳本中應該寫：
document.body
body區(qū)以內(nèi)所有的文本及HTML標簽都是文檔的節(jié)點，分別稱為文本節(jié)點、元素節(jié)點（或者叫標簽節(jié)點），大家知道HTML說到底只是文本而矣，
不論怎么樣的網(wǎng)頁必然由這兩個節(jié)點組成，也只能由這兩個節(jié)點組成
節(jié)點之間的關(guān)系：
節(jié)點之間的關(guān)系也是DOM中最重要的一個關(guān)節(jié)，如何正確地引用到節(jié)點對象，一定要清楚節(jié)點樹各個節(jié)點的相互描述方式，在DHTML里，
Javascript腳本就用了各個節(jié)點對象的一整套方法和屬性去描述另外的節(jié)點對象。
節(jié)點的絕對引用：
返回文檔的根節(jié)點
document.documentElement
返回當前文檔中被擊活的標簽節(jié)點
document.activeElement
返回鼠標移出的源節(jié)點
event.fromElement
返回鼠標移入的源節(jié)點
event.toElement
返回激活事件的源節(jié)點
event.srcElement
節(jié)點的相對引用：(設當前對節(jié)點為node)
返回父節(jié)點
node.parentNode
node.parentElement
返回子節(jié)點集合（包含文本節(jié)點及標簽節(jié)點）
node.childNodes
返回子標簽節(jié)點集合
node.children
返回子文本節(jié)點集合
node.textNodes
返回第一個子節(jié)點
node.firstChild
返回最后一個子節(jié)點
node.lastChild
返回同屬下一個節(jié)點
node.nextSibling
返回同屬上一個節(jié)點
node.previousSibling
節(jié)點的各種操作：(設當前的節(jié)點為node)
新增標簽節(jié)點句柄：
document.createElement(sNode) //參數(shù)為要新添的節(jié)點標簽名，例：newnode=document.createElement("div");
、添加節(jié)點：
追加子節(jié)點：
node.appendChild(oNode) //oNode為生新增的節(jié)點句柄,例：node.appendChild(newnode)
應用標簽節(jié)點
node.applyElment(oNode,sWhere)//oNode為生新增的節(jié)點句柄,sWhere有兩個值：outside / inside，加在當前節(jié)點外面還是里面
插入節(jié)點
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
、修改節(jié)點：
刪除節(jié)點
node.remove()
node.removeChild()
node.removeNode()
替換節(jié)點
node.replaceChild()
node.replaceNode()
node.swapNode()
、復制節(jié)點：
返回復制復制節(jié)點引用
node.cloneNode(bAll)//bAll為布爾值，true / false 是否克隆該節(jié)點所有子節(jié)點
、節(jié)點信息
是否包含某節(jié)點
node.contains()
是否有子節(jié)點
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);
//用于直接加載時獲得根接點
//var root = doc.documentElement;
//兩種方式創(chuàng)建根接點
// var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//創(chuàng)建子接點
var n = doc.createNode(1,"ttyp","");
//指定子接點文本
//n.text = " this is a test";
//創(chuàng)建孫接點
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//創(chuàng)建屬性
var r = doc.createAttribute("id");
r.value="test";
//添加屬性
n.setAttributeNode(r);
//創(chuàng)建第二個屬性
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));
//創(chuàng)建數(shù)據(jù)段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加數(shù)據(jù)段
root.appendChild(c);
//添加根接點
doc.appendChild(root);
//查找接點
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("http://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);
}
}
//修改節(jié)點,利用XPATH定位節(jié)點
var b = doc.selectSingleNode("http://ttyp/sex");
b.text = "女";
//alert(doc.xml);
//XML保存（需要在服務端，客戶端用FSO）
//doc.save();
//查看根接點XML
if(n)
{
alert(n.ownerDocument.xml);
}
//-->
</script>
相關(guān)文章
三個js循環(huán)的關(guān)鍵字示例(for與while)
這篇文章主要介紹了三個js循環(huán)的關(guān)鍵字示例，主要是for與while,需要的朋友可以參考下2016-02-02
下面小編就為大家?guī)硪黄猨avascript 繼承學習心得總結(jié)。小編覺得挺不錯的?，F(xiàn)在分享給大家。給大家做個參考2016-03-03
Dart編程語言是一個完全面向?qū)ο蟮恼Z言，包括基礎(chǔ)類型如int變量也都是對象,本文主要介紹了Google Dart編程語法和基本類型2013-11-11
這篇文章主要介紹了Javascript 事件冒泡機制詳細介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10
javascript中的onkeyup和onkeydown區(qū)別介紹
文本框里輸入的時候要開始計算文本框里面輸入了多少字，自然想到了onkeydown事件，然后計算value.length的方法，下面看下具體的代碼2013-04-04
實例：用 JavaScript 來操作字符串(一些字符串函數(shù))
實例：用 JavaScript 來操作字符串(一些字符串函數(shù))...2007-02-02
這篇文章主要介紹了js實現(xiàn)圖片局部放大效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
splice slice區(qū)別...2006-10-10
這篇文章主要介紹了Angularjs 設置全局變量的方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2016-10-10
JavaScript中setTimeout和setInterval函數(shù)的傳參及調(diào)用
這篇文章主要介紹了JavaScript中setTimeout和setInterval函數(shù)的傳參及調(diào)用,著兩個函數(shù)可以把要執(zhí)行的代碼在設定的一個時間點插入js引擎維護的一個代碼隊列中,需要的朋友可以參考下2016-03-03