首頁 > 開發者 > JavaScript

JavaScript 節點操作 以及DOMDocument屬性和方法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

屬性:
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)為例：整個文檔的一個根就是<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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript echo javascript encode javascript encodeuri
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More