js操做dom對象

時間 2019-11-20

原文原文鏈接

js操做dom對象

DOMDocument 屬性和方法

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

注意大小寫必定不能弄錯.html

屬性:java

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表示(只讀)node

方法:app

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

*************************************************************************************************************************ide

DOM(文檔對象模型)

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

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

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

其實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");

一、添加節點：
追加子節點：
node.appendChild(oNode) //oNode爲生新增的節點句柄,例：node.appendChild(newnode)
應用標籤節點
node.applyElment(oNode,sWhere)//oNode爲生新增的節點句柄,sWhere有兩個值：outside / inside，加在當前節點外面仍是裏面
插入節點
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()

二、修改節點：

刪除節點
node.remove()
node.removeChild()
node.removeNode()

替換節點
node.replaceChild()
node.replaceNode()
node.swapNode()

二、複製節點：
返回複製複製節點引用
node.cloneNode(bAll)//bAll爲布爾值，true / false 是否克隆該節點全部子節點

三、節點信息
是否包含某節點
node.contains()
是否有子節點
node.hasChildNodes()

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

下面爲javascript操做xml

//加載文檔
//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>