文章目錄

一、什麼是DOM

什麼是DOM？逐步分解各個單詞，D-O-M，D就是Document（文檔）；O就是Object（對象）；M就是Model（模型）。合起來就是文檔對象模型……很粗暴。那麼文檔對象模型是什麼呢？

文檔對象模型就是一種與瀏覽器、平臺、語言無關的接口，通過DOM可以訪問頁面中的其他標準組件。它給開發者定義了一個標準的方法，使他們訪問頁面中的數據、腳本還有表現層對象。也就是說腳本可以直接操控頁面中的標籤。

DOM採用的是樹形結構，學過數據結構的可能都不陌生。比如下面一段HTML代碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<h1>標題</h1>
	<b>加粗</b>
</body>
</html>

根節點就是html標籤，然後逐步往下，畫個圖吧：

每個部分稱爲節點。JS文檔對象模型就是用來操作這些節點的。

二、DOM對象節點屬性

在DOM中使用節點屬性對節點進行查詢，查詢各個節點的名稱、類型、節點值、兄弟兒子節點等等。

下表展示了一些DOM對象節點的屬性：

屬性	說明
`nodeName`	節點的名稱
`nodeValue`	節點的值、通常只用了文本節點
`nodeType`	節點的類型
`parentNode`	返回當前節點的父節點
`childNodes`	子節點列表
`firstChild`	第一個子節點
`lastChild`	最後一個子節點
`previousSibling`	當前節點的前一個兄弟節點
`nextSibling`	後一個兄弟節點
`attributes`	元素的屬性列表

在對節點進行查詢的時候，首先使用getElementById()方法來訪問指定id的節點，操作各個節點的父母親兄弟子孫屬性可以實現DOM樹的遍歷。

三、節點的操作

主要包括創建、插入、複製、刪除和替換。

1、創建節點

創建節點首先要使用文檔對象中的createElement()方法和createTextNode()方法，生成一個新元素，並生成文本節點。最後通過appendChild()方法將創建的新節點添加到當前節點的末尾。

appendChild()方法將新的子節點添加到當前節點的末尾，語法如下：

obj.apppendChild(newChild)

其中newChild表示新的節點

例子：補全古詩

先來看一下效果：

步驟1： 寫HTML代碼，聲明一個<div>標籤然後起一個ID，寫入已經存在的詩句，然後懟一個<form>添加一個text控件和button控件，用於響應用戶操作

<div id="poemDiv">
    <div class="poemtitle">春曉</div>
    <div class="poem">春眠不覺曉</div>
    <div class="poem">處處聞啼鳥</div>
    <div class="poem">夜來風雨聲</div>
</div>
<p>
    <form name="demo">
    請輸入最後一句:<input type="text" name="last">
    <input type="button" value="添加" onclick="completePoem()">
</form>

步驟2： 寫JS代碼，按照上面說的步驟，首先用createElement()創建一個<div>標籤，再用createTextNode()創建一個文本（內容填充爲text控件的value），接着把創建在文本添加到第一次創建的<div>標籤後面，最後添加到總的div標籤，代碼如下：

<script type="text/javascript">
    function completePoem() {
        var div = document.createElement('div');        //生成div元素
        div.className='poem';
        var last = demo.last.value;     //爲div元素添加CSS類
        txt = document.createTextNode(last);    //生成文本節點
        div.appendChild(txt);           //將文本節點添加到創建的div元素中
        //將創建的div元素添加到id爲poemDiv的div元素中
        document.getElementById('poemDiv').appendChild(div);
    }
</script>

2、插入節點

插入節點使用insertBefore()方法實現，該方法將新的節點添加到指定子節點的前面，格式如下：

obj.insertBefore(new,ref);

其中new代表新的節點，res代表在該節點前插入的節點。

例子：向頁面中插入文本

首先看一下效果：

步驟1： 寫HTML代碼：

<h2 id="h">在上面插入節點</h2>
<form id="frm" name="frm">
    輸入文本：
    <input type="text" name="demo">
    <input type="button" name="c" value="插入" onclick="insetNode('h',frm.demo.value)" >
</form>

步驟2： 寫JS代碼，首先get到傳值傳過來的id的節點，然後創建一個文本爲str的節點，最後判斷一下get到的那個節點是否存在父節點，如果存在父節點，在父結點中插入新的節點，代碼如下：

<script>
    function crNode(str) {
        var newP = document.createElement("p");
        var newTxt = document.createTextNode(str);
        newP.appendChild(newTxt);
        return newP;
    }
    function insetNode(nodeID,str) {
        var node = document.getElementById(nodeID);
        var newNode = crNode(str);
        if(node.parentNode)
            //在父節點中插入新創建的節點
            node.parentNode.insertBefore(newNode,node);
    }
</script>

3、複製節點

複製節點可以使用cloneNode()方法來實現，格式如下：

obj.cloneNode(deep);

其中deep是一個布爾值，表示是否爲深度複製。

深度複製：將當前節點的所有子節點全部複製
簡單複製：只複製當前節點，不復制子節點

例子：複製下拉菜單

先來看一下效果：

步驟1： 寫HTML代碼，懟一個下拉菜單，然後弄個<div>標籤聲明個id一會兒添加到這個<div>下面，然後添加兩個button，代碼如下：

<form>
    <hr>
    <select name="shopType" id="shopType">
        <option value="%">請選擇類型</option>
        <option value="0">數碼家電</option>
        <option value="1">家用電器</option>
        <option value="2">牀上用品</option>
    </select>
    <hr>
</form>
<div id="demo"></div>
<input type="button" value="簡單複製" onclick="Clone(false)">&nbsp;&nbsp;&nbsp;
<input type="button" value="深度複製" onclick="Clone(true)">

步驟2： 寫JS代碼首先get到下拉菜單節點，然後複製，然後添加到<div>標籤下：

<script type="text/javascript">
    function Clone(flag) {
        var sel = document.getElementById("shopType");
        var b = document.createElement("hr");
        var newSel = sel.cloneNode(flag);
        demo.appendChild(newSel);
        demo.appendChild(b);
    }
</script>

4、刪除節點

刪除節點使用removeChild()方法實現，格式如下：

obj.removeChild(oldChild);

其中oldChild表示需要刪除的節點

例子：刪除最後一個文本

先來看一下效果：

步驟1： 寫HTML代碼：

<h2>刪除節點</h2>
<div id="demo">
    <p>張無忌</p>
    <p>趙敏</p>
    <p>周芷若</p>
    <p>張三丰</p>
</div>
<form>
    <input type="button" value="刪除" onclick="delNode()">
</form>

步驟2： 寫JS代碼，首先get到所在節點，然後判斷是否有子節點，如果有子節點，就刪除，代碼如下：

<script>
    function delNode() {
        var node = document.getElementById("demo");
        if(node.hasChildNodes())
            node.removeChild(node.lastChild);
    }
</script>

5、替換節點

替換子節點可以使用replaceChild()方法來實現，該方法用於將舊的節點替換爲新的節點，格式如下：

obj.replaceChild(new,old);

其中new是替換後的新節點，old是替換的舊節點

例子：替換標記和文本

先看一下效果：

步驟1： 寫HTML代碼：

<b id="demo">要替換的文本內容</b>
<p></p>
輸入標記：<input type="text" id="bj"><br>
輸入文本：<input type="text" id="txt"><br>
<input type="button" value="替換" onclick="repN(bj.value,txt.value)">

步驟2： 寫JS代碼，在函數中首先get到節點，然後判斷該節點是否存在，接着創建一個節點，給他的id賦值爲原來的id，最後添加文本，在原來get到那個節點的父結點中實現替換文本，代碼如下：

<script>
    function repN(bj,txt) {
        var node = document.getElementById("demo");
        if(node){
            var newNode = document.createElement(bj);
            var Txt = document.createTextNode(txt);
            newNode.id="demo";
            newNode.appendChild(Txt);
            node.parentNode.replaceChild(newNode,node);
        }
    }
</script>

四、獲取文檔中的指定元素

獲取完元素之後纔可以繼續操作，可以通過遍歷文檔樹中的節點找到每個節點，但是太麻煩了；簡單的方法可以通過元素的id屬性獲取元素，也可以通過元素的name屬性獲取元素。

1、通過元素的id屬性獲取元素

通過id屬性獲取元素，上面的例子已經用到了很多很多了，無非就一句話：

document.getElementById("userId");

通過獲取元素id然後對元素進行操作

例子：在頁面指定位置顯示當前日期

效果預覽：

代碼：

<body onload="clockon()">
<div id="clock">當前日期：</div>
<script>
    function clockon() {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth();
        var date = now.getDate();
        var day = now.getDay();
        var week;
        month++;
        var arr_week = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
        week = arr_week[day];
        time = year + "年" + month + "月" + date + "日" + week;
        var Texttime = document.createTextNode(time);
        document.getElementById('clock').appendChild(Texttime);
    }
</script>
</body>

2、通過元素的name屬性獲取元素

和獲取id一樣，只需要獲取name屬性就好了，語法如下：

document.getElementByName("userName");

和獲取id不一樣的是，獲取name屬性獲取的是一個數組，包含了頁面內所有同名元素。

如果要獲取對應的的某一個，只需要取下標就可以了。

例子：實現電影圖片的輪轉效果

效果如下：

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>實現電影的輪換效果</title>
    <style>
    #tabs{
    width:1200px;
    height:320px;
    overflow:hidden;
    float:left;
    position:relative;}

    #tabs>a:not(:first-child){
    display:none;}
    </style>
    <script>
        var len = document.getElementsByName("i");
        var pos = 0;
        function changeImage() {
            len[pos].style.display = "none";
            pos ++ ;
            if(pos==len.length) pos = 0;
            len[pos].style.display = "block";
        }
        setInterval('changeImage()',3000);
    </script>
</head>
<body>
<div id="tabs">
    <a name="i" href="#"><img src="video/13.png" width="100%" height="100%"></a>
    <a name="i" href="#"><img src="video/14.png" width="100%" height="100%"></a>
</div>
</body>
</html>

JavaScript 文檔對象模型（DOM）