JavaScript DOM(一)

阿新 • • 發佈：2018-02-13

有一個 keyword radi class append track list return 文件夾

文件夾：

DOM家譜樹
節點的基本屬性和方法
document與getElement方法

DOM家譜樹

DOM能夠將不論什麽HTML或XML文檔描繪成一個由多層次節點構成的結構。當中節點被分為幾種不同的類型。每種類型表示文檔中不同的信息或標記。每個節點又擁有各自的屬性和方法，同一時候和其它節點存在著某種關系。

DOM將文檔描寫敘述的層次結構能夠表示為一種”樹型”模型，更確切地說，是一種家譜樹。

它使用parent，child，sibling等稱號來表明家族成員之間的關系。

為了理解DOM描寫敘述的層次結構我們最好還是舉例來說明：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312" />
    <title>Fruit</title>
  </head>
  <body>
    <h2>Nice Fruit</h2>
    <p title="A list of fruit">Eat them usually.</p>
    <ul id="list1">
      <li class="fruit" 
>Apple</li>
      <li class="fruit">Watermelon</li>
      <li class="fruit">Pear</li>
      <li class="fruit">Orange</li>
    </ul>
  </body>
</html>

以上的文檔模型就能夠用下面的家譜樹來表示：

技術分享圖片

顯然在這個家譜樹中html是根元素。

html有2個child，各自是head和body。它們二者都是根元素的子節點。同一時候又互為兄弟節點。html就是它們的父節點。

繼續向下，我們能夠看到body有3個子節點。分別為h2。p。ul，這三者互為兄弟節點，它們有共同的父節點body。同一時候ul又是4個li節點的父節點。

body的兄弟節點head擁有2個子節點：meta和title。

節點的基本屬性和方法

JavaScript中，節點有12中類型：

Node.ELEMENT_NODE
Node.ATTRIBUTE_NODE
Node.TEXT_NODE
Node.CDATA_SECTION_NODE
Node.ENTITY_REFERENCE_NODE
Node.ENTITY_NODE
Node.PROCESSING_INSTRUCTION_NODE
Node.COMMENT_NODE
Node.DOCUMENT_NODE
Node.DOCUMENT_TYPE_NODE
Node.DOCUMENT_FRAGMENT_NODE
Node.NOTATION_NODE

以上12中類型。分別相應1~12數值常量。不論什麽節點，必屬當中之中的一個。

其實。全部類型的節點都實現了Node接口。

在JavaScript中，也就是繼承了Node類型。因此全部節點都有擁有共同的基本屬性和方法。

節點的基本屬性
節點操作的基本方法

節點的基本屬性

1、nodeType、nodeName及nodeValue屬性

全部的節點類型都屬於以上12種類型之中的一個。節點中的nodeType屬性就存儲著節點的類型值。

比方html,body,p等元素類型的節點，他們的類型都屬於Node.ELEMENT_NODE。相應著數值1。

nodeName以及nodeValue中包括著很多其它有關節點的信息，它們取決於詳細的節點類型。比方對於元素類型(Node.ELEMENT_NODE)的節點，nodeName表示元素的標簽名(如：body，ul，p)，nodeValue為null。對於文檔類型(Node.DOCUMENT_NODE)，nodeName為”#document”。nodeValue為null。

2、childNodes屬性

文檔中的節點之間通過parent,child,sibling等來描寫敘述彼此之間的關系。每個節點都擁有一個childNodes屬性，該屬性中存放著一個NodeList對象。

NodeList是一種相似數組的對象，專門用於保存一組有序的節點。我們能夠通過下面方式來訪問當中的節點：

方括號：someNode.childNodes[i]
item()：someNode.childNodes.item(i)

NodeList對象是具有length屬性的，該屬性值表示當中保存的節點數量：

someNode.childNodes.length

須要強調的是，NodeList對象是基於Dom結構動態查詢的結果，因此。當Dom結構發生變化時。該對象會隨之變化。

因此下面代碼會產生死循環：

var divs = document.getElementsByTagName("div"), i, div;
for (i = 0; i < divs.length; i ++) {
    div = document.createElement("div");
    document.body.appendChild(div);
}

3、parentNode屬性

每個節點都擁有一個parentNode屬性，該屬性指向該節點的父節點。

假設該節點沒有父節點，這個值為null。

4、firstChild和lastChild屬性

顧名思義。對於一個父節點。這兩個屬性分別指向第一個子節點和最後一個子節點。假設該節點沒有子節點，那麽這兩個值均為null。假設僅僅有一個子節點，這兩個值相等。

5、previousSibling和nextSibling屬性

父節點的childNodes屬性指向一個NodeList對象，當中保存著一組有序節點。

這些節點互為兄弟節點。他們之間能夠通過previousSibling和nextSibling屬性來互相訪問。

previousSibling屬性指向本節點的前一個節點，假設該節點本身為第一個節點。那麽這個值為null。nextSibling屬性相似，它指向本節點的下一個相鄰節點，假設該節點為最後一個節點，那麽這個值為null。

6、ownerDocument

該屬性相同為全部節點共同擁有，指向表示整個文檔的文檔節點。該屬性同一時候也表示了不論什麽節點都必定屬於其所在的文檔。同一時候也唯一屬於該文檔。這個屬性給我們帶來了回溯的便利。我們能夠直接跳到文檔的頂部而不須要在結構層中層層回溯。

對於以上幾種表示節點關系的屬性，我們能夠用下面圖片來表示：

技術分享圖片

節點操作的基本方法

1、appendChild()

該方法用於向childNodes列表的末尾加入一個節點，並返回這個節點。

註意每次。加入完畢，DOM結構都會動態更新。

var node1 = someNode.appendChild(newNode);
alert(node1 == newNode);  //true
alert(someNode.lastChild == node1)  //true

2、insertBefore()

該方法會將節點插入到指定節點的前面。

該方法接收2個參數：要插入的節點，參照節點。

比如：

    var node = someNode.insertBefore(newNode, someNode.firstChild);  //插入到第一個節點之前

    var node = someNode.insertBefore(newNode, someNode.lastChild);  //插入到最後一個節點之前

    var len = someNode.childNodes.length;
    var node = someNode.insertBefore(newNode, someNode.childNodes[len - 2]);  //插入到倒數第二個節點之前

3、replaceChild()

該方法用於替換某子節點。

該方法相同接收2個參數：要插入的節點。被替換的節點。

比如：

    var len = someNode.childNodes.length;
    var node = someNode.replaceChild(newNode, someNode.childNodes[len - 4]);  //替換倒數第四個節點

4、removeChild()

該方法用於從DOM結構中移出某子節點，該方法僅僅接受一個參數：須要被移出的節點。須要註意的是。調用該方法移出的節點會依舊存在於文檔之中，僅僅只是已經不存在於文檔的層次結構中了。

5、cloneNode()

該方法存在於全部的節點中。接受一個布爾型參數。用於對本節點進行克隆。克隆分為2種：深復制、淺復制。

深復制返回的結果為本節點以及本節點包括的全部子節點樹。

淺復制返回的結果僅僅為當前節點的一個副本。不論深復制還是淺復制。復制後返回的副本同被removeChild()方法移出的節點一樣。存在於文檔中，可是在DOM樹中沒有它的位置。我們能夠通過上面的節點操作方法將其加入到節點樹中。

    var nodeTree = someNode.cloneNode(true);  //參數為true時表示深復制

    var node = someNode.cloneNode(false);  //參數為false時表示淺復制

6、hasChildNodes()

該方法會去檢測節點是否包括子節點，包括時返回true，否則返回false。因為NodeList的動態性，我們在訪問childNodes的length屬性的時候，會運行一次對其全部元素的查詢，從這個意義上說。使用hasChildNodes()方法來確認某節點是否包括子節點是一個更簡單的方法。

document與getElement方法

在JavaScript中，document對象表示整個html頁面。同一時候也是window對象的一個屬性，因此我們能夠通過全局對象來訪問它。

有關document對象。最經常使用的莫過於其通過getElement方法來獲取元素引用的方法了。

我們還是以開頭描寫敘述家譜樹的代碼為例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312" />
    <title>Fruit</title>
  </head>
  <body>
    <h2>Nice Fruit</h2>
    <p title="A list of fruit">Eat them usually.</p>
    <ul id="list1">
      <li class="fruit" name="li1">Apple</li>
      <li class="fruit" name="li2">Watermelon</li>
      <li class="fruit" name="li3">Pear</li>
      <li class="fruit" name="li4">Orange</li>
    </ul>
  </body>
</html>

getElemetById
getElementsByTagName
getElementsByName
getElementsByClassName

getElemetById

該方法同意我們通過元素的id來獲取該元素的引用。該方法接受一個參數：要獲取元素的ID值，若不存在該ID相應的元素。返回null。

比如我們要獲取以上代碼中ul元素的引用。能夠使用下面的方法：

var ulList = document.getElementById("list1");

在文檔中每個元素都是一個對象類型的引用。因此對於以上代碼我們用typeof來檢測的時候會得到object：

alert(typeof ulList);  //object

getElementsByTagName

非常多時候我們並不會為文檔中每個元素都定義一個獨一無二的ID，為了獲得元素的引用。我們還能夠使用getElementsByTagName()方法。

該方法接收一個參數：要獲取元素的標簽名。該方法會返回一個包括指定標簽名的元素的集合。

如：

var myLi = document.getElementsByTagName("li");

這樣我們會獲得一個全部li元素的引用。在HTML中。該引用是一個HTMLCollection對象的引用，其與NodeList相似，能夠通過方括號[]和item()來訪問當中的元素，同一時候其自身也擁有length屬性。

alert(myLi.length);  //4
alert(myLi[1].name);  //li2
alert(mtLi.item(0).name);  //li1

同一時候，HTMLCollection對象另一個namedItem()方法，能夠使我們通過元素名更加方便地訪問當中的元素：

myLi.namedItem("li2")

當我們使用通配符”*”作為參數的時候，我們將獲得整個頁面全部元素的引用，在HTMLCollection中，它們依照出現的先後順序排列。

比如獲取以上頁面的全部元素的引用：

var all = document.getElementsByTagName("*");
alert(all.length);  //12
alert(all[0]);  //html
alert(all[1]);  //head
alert(all[2]);  //meta

getElementsByName

該方法會返回帶有給定name特性的全部元素，該方法接受一個參數，要獲取元素的name。

要獲取指定name的元素的使用方法十分簡單：

var fruit1 = document.getElementsByName("li0");

這裏，我們另外舉一個十分經常使用的樣例——用於取得單選button：

<ul>
  <li><input type="radio" value="red" name="color" id="red"><label for="red">Red<lable></li>
  <li><input type="radio" value="white" name="color" id="white"><label for="white">White<lable></li>
  <li><input type="radio" value="black" name="color" id="black"><label for="black">Black<lable></li>
</ui>

<script>
  var radios = document.getElemtnByName("color");
</script>

以上代碼獲得了全部單選button的HTMLCollection對象。須要註意的是，因為該radios中全部元素的name均為color。我們通過namedItem(“color”)方法僅僅會獲得當中的第一項。

getElementsByClassName

在HTML5 DOM中新增了getElementsByClassName()方法，該方法接受一個參數，即要獲取的元素的類名。

該方法會獲得包括指定類名的元素的集合。

如：

var myFruit = document.getElementsByClassName("fruit");

對於某些沒有提供對該方法支持的瀏覽器。我們也能夠通過遍歷的方法比較easy地給出跨瀏覽器解決方式：

function getElementByClass(node, className) {
    if(node.getElementsByClassName) {
        return node.getElementsByClassName(className);
    } else {
        var rets = new Array();
        var eles = node.getElementByTagName("*");
        for(var i = 0; i < eles.length; i ++) {
            if(eles[i].calssName.indexOf(className) != -1) { rets[rets.length] = eles[i]; }
        }
        return rets;
    }
}

JavaScript DOM(一)

有一個 keyword radi class append track list return 文件夾文件夾： DOM家譜樹節點的基本屬性和方法 docume

JavaScript DOM(一)

DOM家譜樹

節點的基本屬性和方法

節點的基本屬性

1、nodeType、nodeName及nodeValue屬性

2、childNodes屬性

3、parentNode屬性

4、firstChild和lastChild屬性

5、previousSibling和nextSibling屬性

6、ownerDocument

節點操作的基本方法

1、appendChild()

2、insertBefore()

3、replaceChild()

4、removeChild()

5、cloneNode()

6、hasChildNodes()

document與getElement方法

getElemetById

getElementsByTagName

getElementsByName

getElementsByClassName

相關推薦