一、DOM

檔案物件模型（簡稱DOM），是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程介面，W3C已經定義了一系列的DOM介面，通過這些DOM介面可以改變網頁的內容、結構和樣式，

二、DOM樹

DOM把以上內容都看做是物件，我們獲取過來的DOM元素是一個物件（object），所以稱為檔案物件模型，

檔案：一個頁面就是一個檔案，DOM中使用document表示，
元素：頁面中的所有標簽都是元素，DOM中使用element表示，
節點：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），DOM中使用node表示，

三、DOM操作

1·1 獲取元素

獲取頁面中元素可以使用以下幾種方式：

根據ID獲取，getElementById('ID名')；
根據標簽名獲取，getElementsByTagName('標簽名')；
通過HTML5新增的方法獲取，getElementsByClassName('類名)，document.querySelector('（./#）選擇器')，document.querySelectorAll（'（./#）選擇器')；
特殊元素獲取，document.body;（獲取body元素），document.documentElement;（獲取html元素）；

注意：

通過標簽名獲取：因為得到的是一個物件的集合，所以我們想要操作里面的元素就需要遍歷，得到元素物件是動態的，
根據ID獲取元素是唯一的，
H5新增方法：根據類名回傳的是元素物件集合，根據指定選擇器回傳的是第一個元素物件，

1·2 事件基礎

事件概述：JavaScript使我們有能力創建動態頁面，而事件是可以被JavaScript偵測到的行為，
簡單理解：觸發——回應機制，
網頁中的每個元素都可以產生某些可以觸發JavaScript的事件，

事件是有三部分組成：事件源事件型別事件處理程式我們也稱為事件三要素

例如：

<script>
        //點擊一個按鈕，彈出對話框
        //1、事件是有三部分組成 事件源 事件型別 事件處理程式 我們也稱為事件三要素
        //(1)事件源 事件被觸發的物件 誰 按鈕
        var btn = document.getElementById('btn');
        //(2)事件型別 如何觸發 什么事件 比如滑鼠點擊（onclick）還是滑鼠經過 還是鍵盤按下
        //(3)事件處理程式 通過一個函式賦值的方式 完成
        btn.onclick = function() {
            alert('點秋香');
        }
</script>

執行事件的步驟：

例如：

<script>
        //執行事件步驟
        //點擊div，控制臺輸出，我被選中了
        //1、獲取事件源
        var div = document.querySelector('div');
        //2、系結事件 注冊事件
        //div.onclick
        //3、添加事件處理程式
        div.onclick = function() {
            console.log('我被選中了');
        }
</script>

1·3 滑鼠事件

補充滑鼠事件：

mouseenter：移入事件，
mouseleave：移出事件，
contextmenu：右鍵事件，
selectstart：禁止滑鼠選中，

1·4 鍵盤事件

例如：

<script>
        // 常用的鍵盤事件
        //1. keyup 按鍵彈起的時候觸發 
        // document.onkeyup = function() {
        //         console.log('我彈起了');

        //     }
        document.addEventListener('keyup', function() {
            console.log('我彈起了');
        })

        //3. keypress 按鍵按下的時候觸發  不能識別功能鍵 比如 ctrl shift 左右箭頭啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
            })
            //2. keydown 按鍵按下的時候觸發  能識別功能鍵 比如 ctrl shift 左右箭頭啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })
            // 4. 三個事件的執行順序  keydown -- keypress -- keyup
</script>

1·5 操作元素

JavaScript的DOM操作可以改變網頁內容、結構和樣式，我們可以利用DOM操作元素來改變元素里面的內容、屬性等，

1·5·1 改變元素內容

element.innerText;從起始位置到終止位置的內容，但它去除html標簽，同時空格和換行也會去掉
element.innerHTML;起始位置到終止位置的全部內容，包括html標簽，同時保留空格和換行

例如：

<script>
        //innerText 和 innerHTML的區別
        //1、innerText 不識別html標簽 非標準 去除空格和換行
        var div = document.querySelector('div');
        //div.innerText='<strong>今天是：</strong> 2019';
        //2、innerHTML 識別html標簽 W3C標準 保留空格和換行
        div.innerHTML = '<strong>今天是：</strong> 2019';
        //這兩個屬性是可讀寫的 可以獲取元素里面的內容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
</script>

輸出顯示：

1·5·2 修改元素屬性

常用元素的屬性操作：

innerText、innerHTML，改變元素內容
src、href;
id、alt、title;

例如：

 <button id="ldh">劉德華</button>
<button id="zxy">張學友</button><br>
<img src="../images/ldh.jpg" alt="" width="600px" height="350px" title="劉德華">
<script>
        //修改元素屬性 src
        //1、獲取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        //2、注冊事件 處理程式
        zxy.onclick = function() {
            img.src = '../images/zxy.jpg';
            img.title = '張學友思密達';
        }
        ldh.onclick = function() {
            img.src = '../images/ldh.jpg';
            img.title = '劉德華';
        }
</script>

效果展示：

1·5·3 表單元素的屬性操作

利用DOM可以操作如下表單元素的屬性：type、value、checked、selected、disabled(禁用)，

例如：

<button>按鈕</button>
<input type="text" value="輸入內容">
<script>
        //1、獲取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2、注冊事件 處理程式
        btn.onclick = function() {
            //表單里面的值，文字內容是通過value來修改的；
            input.value = '被點擊了';
            //如果想要某個表單被禁用 不能再點擊 disabled 我們想要這個按鈕 button 禁用
            // btn.disabled = true;
            this.disabled = true;
            //this指向的是事件函式的呼叫 btn
        }
</script>

效果展示：

1·5·4 樣式屬性操作

通過JS修改元素的大小、顏色、位置等樣式，

element.style：行內樣式操作
element.className：類名樣式操作

例如：

<script>
        //1、獲取元素
        var div = document.querySelector('div');
        //2、注冊事件 處理程式
        div.onclick = function() {
            this.style.backgroundColor = "purple";
            this.style.width = '250px';
        }
</script>

<div class="first">文本</div>
<script>
        //1、使用element.style獲得修改元素樣式 如果樣式比較少，或者功能簡單的情況下使用比較好
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';

            //2、我們可以通過修改元素的className更改元素的樣式，適合樣式較多或者功能復雜的情況
            //讓我們當前元素的類命改為了change
            // this.className = 'change';
            //如果想要保留原先的類命，我們可以這么做
            this.className = 'first change';
        }
</script>

注意：

JS里面的樣式采取駝峰命名法，比如fontSize、backgroundColor，
JS修改style樣式操作，產生的是行內樣式，css權重比較高，
如果樣式修改較多，可以采取操作類命方式更改元素樣式，
class因為是個保留字，因此使用className來操作元素類命屬性，
className會直接更改元素的類命，會覆寫原先的類命，

1·5·5 自定義屬性

自定義屬性目的：是為了保存并使用資料，有些資料可以保存到頁面中而不用保存到資料庫中，自定義屬性獲取是通過getAttribute('屬性')獲取，但是有些自定義屬性很容易引起歧義，不容易判斷是元素的內置屬性還是自定義屬性，

獲取屬性值：

element.屬性；獲取屬性值
element.getAttribute（‘屬性’）

區別：

element.屬性；獲取內置屬性值（元素本身自帶的屬性）
element.getAttribute（‘屬性’）；主要獲得自定義的屬性（標準）我們程式員自定義的屬性

設定屬性值：

element.屬性=‘值’；設定內置屬性值
element.setAttribute（‘屬性’，‘值’）；

移除屬性：

element.removeAttribute('屬性')；

<div id="demo" index="1" class="nav"></div>
<script>
        var div = document.querySelector('div');
        //1、獲取元素的屬性值
        //(1)element.屬性
        console.log(div.id);
        //(2)element.getAttribute('屬性'); get得到獲取 attribute屬性的意思 我們程式員自己添加的屬性我們稱為自定義屬性
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        //2、設定元素屬性值
        //(1)element.屬性='值';
        div.id = 'test';
        div.className = 'navs';
        //(2)element.setAttribute（‘屬性’，‘值’）； 主要針對于自定義屬性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); //class特殊 這里面寫的就是class,不是className
        //3、移除屬性 element.removeAttribute('屬性')；
        div.removeAttribute('index');
</script>

輸出結果：

H5給我們新增了自定義屬性：
1】設定H5自定義屬性
H5規定自定義屬性data-開頭做為屬性名并且賦值，
比如<div data-index="1"></div>
或者使用JS設定
element.setAttribute('data-index',2);
2】獲取H5自定義屬性
1、兼容性獲取 element.getAttribute('data-index');
2、H5新增element.dataset.index或者element.dataset['index']; ie11才開始支持，
H5新增的獲取自定義屬性的方法，它只能獲取data-開頭的，dataset是一個集合里面存放了所有以data開頭的自定義屬性，如果自定義屬性里面有多個-鏈接的單詞，我們獲取的時候采取駝峰命名法，

1·5·6 操作元素總結

總結：

排他思想：如果有同一組元素，我們想要某一個元素實作某種樣式，需要用到回圈的排他思想演算法：

所有元素全部清除樣式（干掉其他人）
給當前元素設定樣式（留下我自己）
注意順序不能顛倒，首先干掉其他人，再設定自己，

例如：

<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
        //1、獲取所有按鈕元素
        var btns = document.getElementsByTagName('button');
        //btns得到的是偽陣列，里面的每一個元素為btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                //(1) 我們先把所有的按鈕背景顏色去掉，干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                //(2) 然后讓當前的元素的背景顏色為pink，留下自己
                this.style.backgroundColor = 'pink';
            }
        }
        //2、首先先排除其他人，然后才設定自己的樣式，這種排除其他人的思想我們稱為排他思想
</script>

效果展示：

1·6 節點操作

獲取元素通常使用兩種方式：
1】利用DOM提供的方法獲取元素；
特點：邏輯性不強、繁瑣；
2】利用節點層級關系獲取元素；
特點：利用父子兄弟節點關系獲取元素；邏輯性強，但兼容性不強；

1·6·1 節點概述

節點概述：網頁中所有內容都是節點（標簽、屬性、文本、注釋等），在DOM中，節點使用node來表示，HTML DOM數這的所有節點均可通過JavaScript進行訪問，所有HTML元素（節點）均可被修改，也可以創建或洗掉，

一般地，節點至少擁有nodeType（節點型別）、nodeName(節點名稱)和nodeValue（節點值）這三個基本屬性，

1】元素節點 nodeType為1；
2】屬性節點 nodeType為2；
3】文本節點 nodeType為3（文本節點包含文字、空格、換行等）；

1·6·2 節點層級

利用DOM樹可以把節點劃分為不同的層級關系，常見的是父子兄層級關系，

父級節點：node.parentNode;

parentNode屬性可回傳某節點的父節點，注意是最近的一個父節點；
如果指定的節點沒有父節點則回傳null；

子節點：

parentNode.childNodes(標準);回傳包含指定節點的子節點的集合，
parentNodes.children(非標準);回傳所有的子元素節點，
parentNode.firstChild;回傳第一個子節點，找不到回傳null，同樣，也是包含所有節點，
parentNode.lastChild;回傳最后一個子節點，找不到回傳null，同樣，也是包含所有節點，
parentNode.firstElementChild;回傳第一個子元素節點，找不到則回傳null，
parentNode.lastElementChild;回傳最后一個子元素節點，找不到則回傳null，

注意：

parentNode.childNodes 回傳包含指定節點的子節點的集合，該集合為及時更新的集合，回傳值里面包含了所有的子節點，包括元素節點、文本節點等，
parentNodes.children是一個只讀屬性，回傳所有的子元素節點，它只回傳子元素節點，其余節點不回傳，

兄弟節點：

node.nextSibling;回傳當前元素的下一個兄弟節點,找不到則回傳null，同樣，也是包含所有節點，
node.previousSibling;回傳當前元素上一個兄弟節點，找不到則回傳null，同樣，也包含所有節點，
node.nextElementSibling;回傳當前元素下一個兄弟節點，找不到則回傳null，（IE9以上支持）
node.previousElementSibling;回傳當前元素上一個兄弟節點，找不到則回傳null，

例如：

父節點：

<div class="demo">
        <div class="box">
            <span class="erweima">x</span>
        </div>
</div>

<script>
        //1、父節點 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        //得到的是離元素最近的父級節點(親爸爸)，如果找不到父節點就回傳null
        erweima.parentNode;
        console.log(erweima.parentNode);
</script>

結果：

子節點：

 <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
</ul>
<ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
</ol>
<div class="demo">
        <div class="box">
            <span class="erweima">x</span>
        </div>
</div>

<script>
        //DOM提供的方法（API）獲取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        //1、子節點 childNodes所有的子節點，包含元素節點、文本節點等等
        console.log(ul.childNodes);
        //2、children獲取所有子元素節點
        console.log(ul.children);
</script>

結果展示：

兄弟節點：

<div>我是div</div>
<span>我是span</span>
<script>
        var div = document.querySelector('div');
        //1、nextSbiling 下一個兄弟節點，包含元素節點或者文本節點等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        //2、nextElementSibling 得到下一個兄弟元素節點
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
</script>

結果展示：

1·6·3 節點具體操作

創建節點：document.createElement('tagName');
添加節點：node.appendChild(child);將一個節點添加到指定父節點的子節點串列末尾，類似于CSS里面after偽元素，node.insertBefore(child,指定元素)；將一個節點添加到父節點的指定子節點前面，類似于css里面的before偽元素，
洗掉節點：node.removeChild(child);從DOM中洗掉一個子節點，回傳洗掉的節點，
復制節點：node.cloneNode( );回傳呼叫該方法的節點的一個副本，如果括號引數為慷訓者false，則是淺拷貝，即只克隆復制節點本身，不克隆里面的子節點，

例如：

<ul>
        <li>123</li>
</ul>
<script>
        //1、創建節點元素節點
        var li = document.createElement('li');
        //2、添加節點 node.appendChild(child) node父級 child是子級 后面追加元素 類似于陣列中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        //3、添加節點 node.insertBefore(child,指定元素)；
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        //4、我們想要頁面添加一個新的元素：1、創建元素 2、添加元素
</script>

輸出結果：

<button>洗掉</button>
<ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光頭強</li>
</ul>
<script>
        //1、獲取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        //2、洗掉元素 node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        //3、點擊按鈕依次洗掉里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
</script>

效果展示：

   <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        //1、node.cloneNade();括號為慷訓者里面false，淺拷貝，只復制標簽不復制里面的內容
        //2、node.cloneNade(true);括號為turn 深拷貝，復制標簽和復制里面的內容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>

輸出結果：

1·7 事件

1·7·1 注冊事件

給元素添加事件，稱為注冊事件或者系結事件，注冊事件有兩種方式：傳統方式和方法監聽注冊方式，

傳統注冊事件方式：

利用on開頭的事件onclick；
<button οnclick="alert('hi~')"></button>；
btn.οnclick=function(){}；
特點：注冊事件的唯一性；
同一個元素同一個事件只能設定一個處理函式，最后注冊的處理函式將會覆寫前面注冊的處理函式；

方法監聽注冊方式：

w3c標準推薦方式；
addEventListenner()它是一個方法；
IE9之前的IE不支持此方法，可使用attachEvent（）代替；
特點：同一個元素同一事件可以注冊多個監聽器；

addEventListenner事件監聽方式：

語法：
eventTarget.addEvenListener(type,listener[,useCapture])
使用：
eventTarget.addEventListennertListener()方法將指定的監聽器注冊到eventTarget(目標物件)上，當該物件觸發指定的事件時，就會執行事件處理函式，
該方法接收三個引數：
1】type：事件型別字符，比如click、mouseover，注意這里不要帶on；
2】listener：事件處理函式，事件發生時，會呼叫該監聽函式；
3】useCapture：可選引數，是一個布林值，默認false，

1·7·2 洗掉事件

1】傳統注冊事件：
eventTarget.οnclick=null;
2】方法監聽注冊方式：
1、eventTarget.removeEventListener(type,listener[,useCapture]);
2、eventTarget.detachEvent(eventNameWithon,callback);

1·7·3 DOM事件流

事件流描述的是從頁面中接收事件的順序，
事件發生時會在元素節點之間按照特定的順序傳播，這個傳播程序即DOM事件流，

DOM事件流分為3個階段：
1、捕獲階段
2、當前目標階段
3、冒泡階段

事件冒泡：IE最早提出，事件開始時由最具體的元素接收，然后逐級向上傳播到DOM最頂層節點的程序，
事件捕獲：網景最早提出，由DOM最頂層節點開始，然后逐級向下傳播到最具體的元素接收的程序，

注意：

JS代碼中只能執行捕獲或者冒泡其中的一個階段，
onclick和attachEvent只能得到冒泡階段，
addEventListener(type,listener[,useCapture])第三個引數如果是true，表示在事件捕獲階段呼叫事件處理程式；如果是false（不寫默認就是false），表示在事件冒泡階段呼叫事件處理程式，
實際開發中我們很少使用事件捕獲，我們更關注事件冒泡，
有些事件是沒有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave，
事件冒泡有時候會帶來麻煩，有時候又會幫助很巧妙的做某些事件，

阻止事件冒泡：
標準寫法：利用事件物件里面的stopPropagation()方法，

例如：

<div class="father">
        <div class="son">son兒子</div>
</div>
<script>
        //常見事件物件的屬性和方法
        //阻止冒泡 dom推薦的標準 stopPropagation()
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); //stop 停止 Propagation 傳播
            e.cancelBubble = true; //cannel 取消 bubble 泡泡
        }, false)
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false)
        document.addEventListener('click', function() {
            alert('document');
        })
</script>

1·7·4 事件物件

官方解釋：event物件代表事件物件的狀態，比如鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態，
簡單理解：事件發生后，跟事件相關的一系列資訊資料的集合都放到這個物件里面，這個物件就是事件物件event，它有很多屬性和方法，

事件物件的使用語法：
div.onclick = function(event) {
/這個event就是事件物件，可自己命名
}

 <div>123</div>
<script>
        //事件物件
        var div = document.querySelector('div');
        div.onclick = function(e) {
                e = e || window.event;
                console.log(e);
            }
            // div.onclick = function(event) {
            //         console.log(event);
            //     }
            // div.addEventListener('click', function(e) {
            //         console.log(e);
            //     })
            //1、event就是一個事件物件，寫到我們監聽函式的小括號里面，當形參看
            //2、事件物件只有有了事件才會存在，它是系統給我們自動創建的，不需要我們傳遞引數
            //3、事件物件是我們事件的一系列相關資料的集合，跟事件相關的，比如滑鼠點擊里面就包含了滑鼠相關的資訊，滑鼠坐標等，如果鍵盤事件里面就包含的鍵盤事件的資訊，比如，判斷用戶按下了哪個鍵
            //4、這個事件物件我們可以自己命名，比如event、evt、e
            //5、事件物件也有兼容性問題ie678通過window、event 兼容性寫法：e=e||window.event
</script>

事件物件屬性：

例如：

 <script>
        //常見事件物件的屬性和方法
        //1、e.target回傳觸發事件物件（元素） this回傳系結事件的物件（元素）
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);
        })
</script>

滑鼠事件物件：

例如：

 <script>
        //滑鼠事件物件 MouseEvent
        document.addEventListener('click', function(e) {
            //1、client 滑鼠在可視區的x和y坐標
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('-------------------');

            //2、page滑鼠在頁面檔案的x和y坐標
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('-------------------');

            //3、screen滑鼠在電腦螢屏的x和y坐標
            console.log(e.screenX);
            console.log(e.screenY);
        })
</script>

輸出結果：

鍵盤事件物件：

例如：

 <script>
        // 鍵盤事件物件中的keyCode屬性可以得到相應鍵的ASCII碼值
        // 1. 我們的keyup 和keydown事件不區分字母大小寫  a 和 A 得到的都是65
        // 2. 我們的keypress 事件 區分字母大小寫  a  97 和 A 得到的是65
        document.addEventListener('keyup', function(e) {
            // console.log(e);
            console.log('up:' + e.keyCode);
            // 我們可以利用keycode回傳的ASCII碼值來判斷用戶按下了那個鍵
            if (e.keyCode === 65) {
                alert('您按下的a鍵');
            } else {
                alert('您沒有按下a鍵')
            }

        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);

        })
</script>

注意：

onkeydown和onkeyup，不區分字母大小寫，onkeypress區分字母大小寫；
在我們實際開發中，我們更多的使用keydown和keyup，它能識別所有的鍵（包括功能鍵）；
keypress不識別功能鍵，但是keyCode屬性能區分大小寫，回傳不同的ASCII值，

事件委托（代理、委派）：

事件委托也稱事件代理，在jQuery里面稱為事件委派，
事件委托的原理：不是每個子節點單獨設定事件監聽器，而是事件監聽器設定在其父節點上，然后利用冒泡原理影響設定每個子節點，

例如：

 <ul>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
</ul>
<script>
        //事件委托的核心原理：給父節點添加監聽器，利用事件冒泡影響每一個子節點
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，點我應有彈框在手！');
            //e.target這個可以得到我們點擊的物件
            e.target.style.backgroundColor = 'pink';
        })
</script>

效果展示：

四、案例

1·1 tab欄切換圖片

  <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .tab {
            width: 1100px;
            height: 550px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }
        
        .tab_h {
            width: 1100px;
            height: 50px;
        }
        
        li {
            list-style: none;
            float: left;
            width: 90px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 24px;
            cursor: pointer;
        }
        
        .tab_h .here {
            background-color: rgb(180, 0, 0);
            color: #fff;
        }
        
        .tab_b img {
            width: 1100px;
            height: 500px;
        }
        
        .tab_b img {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_h">
            <ul>
                <li class="here">所</li>
                <li>見</li>
                <li>即</li>
                <li>所</li>
                <li>得</li>
            </ul>
        </div>
        <div class="tab_b">
            <img src="img/1.jpg" alt="" class="imgs" style="display: block;">
            <img src="img/2.jpg" alt="" class="imgs">
            <img src="img/3.jpg" alt="" class="imgs">
            <img src="img/4.jpg" alt="" class="imgs">
            <img src="img/5.jpg" alt="" class="imgs">
        </div>
    </div>
    <script>
        var tab_h = document.querySelector('.tab_h');
        tab_h.onmouseover = function() {
            tab_h.style.backgroundColor = '#eee';
        }
        var lis = document.querySelectorAll('li');
        var imgs = document.querySelectorAll('.imgs');
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'here';
                var index = this.getAttribute('index');
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].style.display = 'none';
                }
                imgs[index].style.display = 'block';
            }

        }
    </script>

效果：

1·2 根據輸入內容生成表格

 <style>
        table {
            width: 600px;
            cursor: pointer;
        }
        
        table td {
            text-align: center;
        }
        
        table th {
            background-color: blueviolet;
        }
        
        table tr {
            background-color: pink;
        }
</style>
</head>

<body>
    <div id="dv">
        請輸入姓名:
        <input type="text" value="" id="uname" />
        <br/> 請輸入郵箱:
        <input type="text" value="" id="email" />
    </div>

    <input type="button" value="添加" id="btn" />
    <table border="1" cellpadding="0" cellspacing="0" id="tb">
        <thead>
            <tr>
                <th>姓名</th>
                <th>郵箱</th>
            </tr>
        </thead>
        <tbody id="tbd">
            <tr>
                <td>小黑</td>
                <td>xiaohei@126.com</td>
            </tr>
        </tbody>
    </table>
<script>
        //獲取元素
        var btn = document.querySelector('#btn');
        var uname = document.querySelector('#uname');
        var email = document.querySelector('#email');
        var tbody = document.querySelector('#tbd');
        var div = document.querySelector('#dv');
        var text = div.children;
        //注冊事件
        btn.addEventListener('click', function(e) {
            var un = uname.value;
            var em = email.value;
            if (un == '' || em == '') {
                alert('請將資料填入完全');
            } else {
                var tr = document.createElement('tr');
                tbody.appendChild(tr);
                for (var i = 1; i < text.length; i++) {
                    var td = document.createElement('td');
                    if (i == 1) {
                        td.innerHTML = un;
                        tr.appendChild(td);
                    } else {
                        td.innerHTML = em;
                        tr.appendChild(td);
                    }
                }
            }
        })
</script>

效果：

1·3 點擊按鈕改變盒子顏色

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div></div>
    <button>改變</button>
<script>
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        var flag = 0;
        btn.onclick = function() {
            if (flag == 0) {
                div.style.backgroundColor = 'tan';
                flag = 1;
            } else if (flag == 1) {
                div.style.backgroundColor = 'red';
                flag = 2;
            } else if (flag == 2) {
                div.style.backgroundColor = 'yellow';
                flag = 3;
            } else if (flag == 3) {
                div.style.backgroundColor = 'blue';
                flag = 4;
            } else if (flag == 4) {
                div.style.backgroundColor = 'pink';
                flag = 5;
            } else if (flag == 5) {
                div.style.backgroundColor = 'gray';
                flag = 6;
            } else if (flag == 6) {
                div.style.backgroundColor = 'purple';
                flag = 7;
            } else if (flag == 7) {
                div.style.backgroundColor = 'green';
                flag = 0;
            }

        }
</script>

效果：

1·4 分時問候

<img src="../images/s.gif" alt="">
<div>上午好</div>
<script>
        //根據系統不同時間來判斷，所以需要用到日期內置物件
        //利用多分支陳述句來設定不同的圖片
        //需要一個圖片，并根據時間修改圖片，就需要用到操作元素src屬性
        //需要一個div元素，顯示不同問候語，修改元素內容即可
        //1、獲取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        //2、得到當前的小時數
        var date = new Date();
        var h = date.getHours();
        //3、判斷小時數改變圖片和文字資訊
        if (h < 12) {
            img.src = '../images/s.gif';
            div.innerHTML = '親，上午好，好好寫代碼';
        } else if (h < 18) {
            img.src = '../images/x.gif';
            div.innerHTML = '親，下午好，好好寫代碼';
        } else {
            img.src = '../images/w.gif';
            div.innerHTML = '親，晚午好，好好寫代碼';
        }
</script>

效果：

五、總結

關于DOM操作，我們主要針對于元素的操作，

主要有創建、增、刪、改、查、屬性操作、事件操作，

創建：
1、document.write
2、innerHTML
3、createElement

增：
1、appendChild
2、insertBefore

刪：
1、removeChild

改：
主要修改dom的元素屬性，dom元素的內容、屬性、表單的值等，
1、修改元素屬性：src、href、title等，
2、修改普通元素內容：
innerHTML、innerText，
3、修改表單元素：
value、type、disabled等，
4、修改元素樣式：style、className，

查：
主要獲取查詢dom的元素，
1、DOM提供的API方法：getElementByld、getElementByTagName 古老用法，不太推薦
2、H5提供的新方法：querySelector、querySelectorAll提倡；
3、利用節點操作獲取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling)提倡

屬性操作：
主要針對于自定義屬性，
1、setAttribute:設定dom的屬性值；
2、getAttribute:得到dom的屬性值；
3、removeAttribute移除屬性；

事件操作：
給元素注冊事件，采取：事件源.事件型別=事件處理程式，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/382003.html

標籤：其他

上一篇：ES6箭頭函式、rest引數、擴展運算子、Symbol的使用

下一篇：Vue ElmentUI message組件customClass使用方法

JavaScript——DOM

一、DOM

二、DOM樹

三、DOM操作

1·1 獲取元素

1·2 事件基礎

1·3 滑鼠事件

1·4 鍵盤事件

1·5 操作元素

1·5·1 改變元素內容

1·5·2 修改元素屬性

1·5·3 表單元素的屬性操作

1·5·4 樣式屬性操作

1·5·5 自定義屬性

1·6 節點操作

1·6·1 節點概述

1·6·2 節點層級

1·6·3 節點具體操作

1·7 事件

1·7·1 注冊事件

1·7·2 洗掉事件

1·7·3 DOM事件流

1·7·4 事件物件

四、案例

1·1 tab欄切換圖片

1·2 根據輸入內容生成表格

1·3 點擊按鈕改變盒子顏色

五、總結