DOM（文檔對象模型）基礎增強

時間 2019-11-16

標籤 dom 文檔對象模型基礎增強欄目 HTML 简体版

原文原文鏈接

DOM（文檔對象模型）基礎增強

文檔：標記型文檔
對象：封裝了屬性和行爲的實例，能夠直接被調用。
模型：全部的標記型文檔都具備一些共性特徵的一個體現。
　　  用來將標記型文檔封裝成對象，並將標記型文檔中的全部內容（標籤、文本、屬性）都封裝成對象。

　　　封裝成對象的目的：是爲了更方便的操做這些文檔及其文檔中的全部內容。由於對象包含屬性和行爲。

標記型文檔包含標籤、屬性、標籤中封裝的數據。只要是標記型文檔，DOM這種技術均可以對其進行操做。
常見的標記型文檔包括：HTML、XML。

DOM要操做標記型文檔必須先進行解析。

DOM結構模型圖以下所示：javascript

DOM的三個級別和DHTML介紹

DOM模型有三種：
    DOM level 1：將html文檔封裝成對象。
    DOM level 2：在level 1的基礎上添加新的功能，例如：對於事件和css樣式的支持。
    DOM level 3：支持xml1.0的一些新特性。
    
DHTML
    動態的HTML，它不是一門語言，是多項技術綜合體的簡稱。
    包括html、css、dom、javascript。

這四種語言的職責：
    html：負責提供標籤，封裝數據，這樣便於操做數據。
    css：負責提供樣式，對標籤中的數據進行樣式定義。
    dom：負責將標籤及其內容解析，封裝成對象，對象中具備屬性和行爲。
    javascript：負責提供程序設計語言，對頁面中的對象進行邏輯操做。

NODE接口的特性和方法

 特性/方法             類型/返回類型 說明

nodeName             String              節點的名字；根據節點的類型而定義　　　 元素節點返回元素名稱，屬性節點返回屬性名稱，文本節點返回內容爲#text的字符串
nodeValue            String              節點的值；根據節點的類型而定義　　　　 元素節點返回null，屬性節點返回屬性的值，文本節點返回文本節點的內容
nodeType             Number              節點的類型常量值之一　　　　　　　　   元素節點返回1，屬性節點返回2，文本節點返回3
　　nodeName(只讀)    
　　nodeType(只讀)    
　　nodeValue(可讀可寫)

ownerDocument        Document            指向這個節點所屬的文檔

firstChild           Node                指向在childNodes列表中的第一個節點
lastChild            Node                指向在childNodes列表中的最後一個節點

childNodes           NodeList            全部子節點的列表
parentNode           Node                返回一個給定節點的父節點

previousSibling      Node                指向前一個兄弟節點；若是這個節點就是第一個兄弟節點，那麼該值爲null
nextSibling          Node                指向後一個兄弟節點；若是這個節點就是最後一個兄弟節點，那麼該值爲null

hasChildNodes()      Boolean             當childNodes包含一個或多個節點時，返回真

attributes           NamedNodeMap        包含了表明一個元素的特性的Attr屬性對象；僅用於Element元素節點

appendChild(node)    Node                將node添加到childNodes的末尾
removeChild(node)    Node                從childNodes中刪除node

replaceChild(newnode, oldnode)    Node   將childNodes中的oldnode替換成newnode
insertBefore(newnode, refnode)    Node   在childNodes中的refnode以前插入newnode

Document 對象

每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。
Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。

Document 對象的集合
    all[]　　 提供對文檔中全部 HTML 元素的訪問，返回對文檔中全部 HTML 元素的引用。
        語法
        document.all[i]
        document.all[name]
        document.all.tags[tagname]
        all[] 是一個多功能的相似數組的對象，它提供了對文檔中全部 HTML 元素的訪問。
        all[] 已經被 Document 接口的標準的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 對象的 getElementsByName() 方法所取代。
        儘管如此，這個 all[] 數組在已有的代碼中仍然使用。
    forms[] 返回對文檔中全部 Form 對象引用。 
        語法
        document.forms[]
        
Document 對象的屬性
    body　　 提供對 <body> 元素的直接訪問，對於定義了框架集的文檔，該屬性引用最外層的 <frameset>。

Document 對象的經常使用方法
    getElementById("屬性id的值")　　　　     返回對擁有指定 id 的第一個對象的引用 
    getElementsByName("屬性name的值")　　　　返回帶有指定名稱的對象集合 
    getElementsByTagName("標籤名稱")　　      返回帶有指定標籤名的對象集合 
    write()                 　　　　　　　　 向文檔寫 HTML 表達式 或 JavaScript 代碼 

示例代碼以下：

<body>
    您喜歡的城市:
    <br>
    <ul id="city">
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重慶</li>
    </ul>
    您喜歡的遊戲:
    <br>
    <ul>
        <li id="fk" value="fangkong">反恐</li>
        <li id="ms" value="moshou">魔獸</li>
        <li id="xj" value="xingji">星際爭霸</li>
    </ul>
</body>

<script type="text/javascript">
  
    // 增長城市節點  <li id="tj" value="tianjin">天津</li> 並放置到city下
    var li = document.createElement("li"); // 建立新兒子標籤對象(元素對象)
    
    // 添加屬性
    li.setAttribute("id", "tj");
    li.setAttribute("value", "tianjin");
    // 添加文本
    var txt = document.createTextNode("天津"); // 建立文本對象
    li.appendChild(txt); // 把文本對象添加到標籤對象的內部
   
    // 把標籤對象添加到ul對象中
    var ul = document.getElementById("city");
    ul.appendChild(li);  // 用爸爸ul對象把新兒子標籤對象添加進來
     
</script>

Element 對象

Element 對象的方法
    getAttitude("屬性名稱")                獲取屬性的值 
    setAttribute("屬性名稱", "屬性的值")    設置屬性
    removeAttribute("屬性名稱")            刪除屬性
    
在 Element 對象中查找 Element 對象 在Element對象的範圍內，能夠用來查找其餘節點的惟一有效方法就是getElementsByTagName("標籤名稱")方法。而該方法返回的是一個集合。

示例代碼以下：

<body>
    您喜歡的城市:
    <br>
    <ul>
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重慶</li>
    </ul>
    您喜歡的遊戲:
    <br>
    <ul>
        <li id="fk" value="fangkong">反恐</li>
        <li id="ms" value="moshou">魔獸</li>
        <li id="xj" value="xingji">星際爭霸</li>
    </ul>
</body>

<script type="text/javascript">
  
    // 給這個節點增長 name屬性 例如：<li id="xj" value="xingji" name="xingjizhengba">星際爭霸</li>
    var xj = document.getElementById("xj");
    xj.setAttribute("name", "xingjizhengba");
    // 測試
    alert(xj.getAttribute("name"));
        
</script>

Node 經常使用屬性

節點名稱 nodeName：其內容是給定節點的名字。
    若是給定節點是一個元素節點，nodeName返回這個元素的名稱(標籤名)。
    若是給定節點是一個屬性節點，nodeName返回這個屬性的名稱(屬性名)。
    若是給定節點是一個文本節點，nodeName返回一個內容爲 #text 的字符串。
    
節點類型 nodeType：返回一個整數，這個數值表明着給定節點的類型。
    若是給定節點是一個元素節點，nodeType返回值是1。
    若是給定節點是一個屬性節點，nodeType返回值是2。
    若是給定節點是一個文本節點，nodeType返回值是3。
    
節點的值 nodeValue：返回給定節點的當前值（字符串）。
    若是給定節點是一個元素節點，nodeValue返回值是 null。
    若是給定節點是一個屬性節點，nodeValue返回值是這個屬性的值。
    若是給定節點是一個文本節點，nodeValue返回值是這個文本節點的內容。
示例代碼：

<body>
    <form name="form1" action="test.html" method="post">
        <input type="text" name="tname" value="IT精英培訓_1" id="tid_1"><br>
        <input type="text" name="tname" value="IT精英培訓_2" id="tid_2"><br>
        <input type="text" name="tname" value="IT精英培訓_3" id="tid_3"><br>
        <input type="button" name="ok" value="保存1" />
    </form>
    <p id="pid">明天上課</p>
</body>

<script type="text/javascript">
  
    // <input type="text" name="tname" value="IT精英培訓_1" d="tid_1" ><br>
    // 元素節點 ：id="tid_1"，輸出nodeName(只讀)    nodeType(只讀)     nodeValue(可讀可寫)
    var node = document.getElementById("tid_1");
    alert(node.nodeName); // input    元素節點返回元素名稱，屬性節點返回屬性名稱，文本節點返回內容爲#text的字符串
    alert(node.nodeType); // 1        元素節點返回1，屬性節點返回2，文本節點返回3
    alert(node.nodeValue); // null    元素節點返回null，屬性節點返回屬性的值，文本節點返回文本節點的內容

    // <p id="pid">明天上課</p>
    // 獲取標籤中的屬性節點 ：id="pid",輸出 nodeName    nodeType    nodeValue
    var node = document.getElementById("pid");
    var p = node.getAttributeNode("id");
    alert(p.nodeName); // id
    alert(p.nodeType); // 2
    alert(p.nodeValue); // pid
    
    // <p id="pid">明天上課</p>
    //  獲取標籤中的文本節點 ：id="pid"，輸出 nodeName    nodeType    nodeValue
    var node = document.getElementById("pid");
    var textNode = node.firstChild;
    alert(textNode.nodeName); // #text
    alert(textNode.nodeType); // 3
    alert(textNode.nodeValue); // 明天上課
    
</script>

--------------------------------------
想要獲取標籤中的屬性節點，能夠用方法：
    標籤對象.tAttributeNode("屬性名稱");
示例代碼以下：

<body>
    您喜歡的城市:
    <br>
    <ul>
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重慶</li>
    </ul>
    您喜歡的遊戲:
    <br>
    <ul>
        <li id="fk" value="fangkong">反恐</li>
        <li id="ms" value="moshou">魔獸</li>
        <li id="xj" value="xingji">星際爭霸</li>
    </ul>
</body>

<script type="text/javascript">
  
      // 獲取  <li id="xj" value="xingji">星際爭霸</li> 節點的value屬性的值
      // 法一：
      var xj = document.getElementById("xj");
      alert(xj.getAttribute("value")); // xingji
      
      // 法二：
      // 獲取標籤中的屬性節點
      var value = xj.getAttributeNode("value"); alert(value.nodeValue); // xingji
      
</script>

--------------------------------------

想要獲取標籤中的文本節點，能夠採用屬性：
    方式1：當前標籤對象的 childNodes; 屬性，再取須要的下標位置。
    方式2：直接使用當前標籤對象的 firstChild; 和 lastChild; 屬性。（該方式前提是隻有一個孩子）
示例代碼以下：

<body>
    <h1 id="h1">明天休息</h1>
</body>

<script type="text/javascript">
  
    // <h1 id="h1">明天休息</h1>
    // 方法一： 利用firstChild/lastChild 輸出  明天休息
    var h1 = document.getElementById("h1");
    var textNode = h1.firstChild; // 由於只有一個孩子，lastChild也能夠
    alert(textNode.nodeName); // #text
    alert(textNode.nodeType); // 3
    alert(textNode.nodeValue); // 明天休息
      
    // 測試nodeValue是一個讀寫屬性
    alert(textNode.nodeValue); // 明天休息
    alert(textNode.nodeValue = "明天繼續上課"); // 明天繼續上課
      
    // 方法二：childNodes屬性表示父元素下的全部的子元素(數組/集合)
    var h2 = document.getElementById("h1");
    var childs = h2.childNodes;
    alert(childs[0].nodeValue); // 明天休息

 </script>

父節點、子節點和同輩節點

父節點：
    parentNode;            屬性返回的節點永遠是一個元素節點，由於只有元素節點纔有可能包含子節點。
        注意：document 節點的沒有父節點。
    
子節點：
    childNodes;            獲取指定節點的全部子節點集合。
    firstChild;            獲取指定節點的第一個子節點。
    lastChild;             獲取指定節點的最後一個子節點。

同輩節點：
    nextSibling;        　 返回一個給定節點的下一個兄弟節點。
    previousSibling;　　　　返回一個給定節點的上一個兄弟節點。
    
IE6-8 Chrome                               IE9-10 Chrome & FireFox Chrome
    firstChild;        第一個節點　　　　　　　　　　firstElementChild;         第一個節點
    lastChild;　　　　  最後一個節點　　　　　　　　  lastElementChild;          最後一個節點
    nextSibling;　　   下一同級節點　　　　　　　　  nextElementSibling;        下一同級節點
    previousSibling;　 上一同級節點　　　　　　　　　previousElementSibling;    上一同級節點

節點屬性

節點屬性attributes是Node接口定義的屬性。
節點屬性attributes就是節點（特別是元素節點）的屬性。

事實上，attributes中包含的是一個節點的全部屬性的集合。
attributes.getNameItem()和Element對象的getAttribute()方法相似。

檢測子節點和屬性

查看是否存在子節點方法： hasChildNodes()
查看是否存在屬性方法：hasAttributes()
即便節點中沒有定義屬性，其 attributes; 屬性仍然有效的，並且長度值爲0。一樣節點中的 childNodes; 屬性也是如此。

當你想知道某個節點是否包含子節點和屬性時，可使用 hasChildNodes() 和 hasAttributes() 方法。
可是，若是還想知道該節點中包含多少子節點和屬性的話，仍要使用 attributes; 和 childNodes; 屬性。
在IE瀏覽器中，不存在 hasAttributes() 方法！

操做 DOM 節點樹

插入節點:
    appendChild()方法
    insertBefore(new, old)方法
    沒有insertAfter()方法
示例代碼：

<body>
    <ul>
        <li id="bj" name="beijing">北京</li>
        <li id="sh" name="shanghai">上海</li>
        <li id="cq" name="chongqing">重慶</li>
    </ul>
</body>

<script type="text/javascript">
      
    // 在 上海節點的後面 插入天津節點  <li id="tj" name="tianjin">天津</li>
    var li = document.createElement("li");
    li.setAttribute("id", "tj");
    li.setAttribute("name", "tianjin");

    var txt = document.createTextNode("天津");
    li.appendChild(txt);

    var ul = document.getElementsByTagName("ul");
    var sh = document.getElementById("sh");
    var cq = sh.nextSibling; // 經過上海節點找到重慶節點(即下一個兄弟)

    ul[0].insertBefore(li,cq);
    
</script>

刪除節點：
    removeChild()方法
示例代碼：

<body>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="sh" name="shanghai">上海</li>
        <li id="cq" name="chongqing">重慶</li>
    </ul>
</body>

<script type="text/javascript">
  
    // 刪除  <ul id="city"> 下<li id="bj" name="beijing">北京</li>這個節點</ul>
    var city = document.getElementById("city"); // 先獲取爸爸節點對象
    var bj = document.getElementById("bj");    // 再獲取兒子節點對象
    city.removeChild(bj); // 用爸爸幹掉兒子
     
</script>

替換節點：
    replaceChild(new, old)方法
示例代碼：

<body>
    您喜歡的城市:
    <br>
    <ul>
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重慶</li>
    </ul>
    您喜歡的遊戲:
    <br>
    <ul>
        <li id="fk" value="fangkong">反恐
            <p>精英</p>
        </li>
        <li id="ms" value="moshou">魔獸</li>
        <li id="cq" value="chuanqi">傳奇</li>
    </ul>
</body>

<script type="text/javascript">
  
     // 點擊北京節點， 將被反恐節點替換
    var bj = document.getElementById("bj"); // 舊節點對象
    var fk = document.getElementById("fk"); // 新節點對象
    bj.onclick = function() {
        var parentNode = this.parentNode;
        parentNode.replaceChild(fk, this); // 經過父節點對象才能來替換
    };
    
</script>

innerHTML屬性

瀏覽器幾乎都支持該屬性，但不是 DOM 標準的組成部分。

innerHTML 屬性能夠用來讀，寫某給定元素裏的 HTML 內容。

innerHTML 屬性多與div或span標籤配合使用。

示例代碼：

<body>
    <div id="subject">jquery</div>
</body>

<script type="text/javascript">

    // 使用innerHTML讀出id="subject"中的文本內容
    var div = document.getElementById("subject");
    // 原先的作法
    // var textNode = div.firstChild; 
    // alert(textNode.nodeValue);
    // 如今的作法
    alert(div.innerHTML);

    // 將 <h1>今天</h1> 寫到div的層中
    var div = document.getElementById("subject");
    div.innerHTML = "<h1>今天</h1>";
    
</script>