文章目錄

day01 - Web APIs
- 1.1. Web API介紹
- - 1.1.1 API的概念
  - 1.1.2 Web API的概念
  - 1.1.3 API 和 Web API 總結
- 1.2. DOM 介紹
- - 1.2.1 什么是DOM
  - 1.2.2. DOM樹
- 1.3. 獲取元素
- - 1.3.1. 根據ID獲取
  - 1.3.2. 根據標簽名獲取元素
  - 1.3.3. H5新增獲取元素方式
  - 1.3.4 獲取特殊元素（body，html）
- 1.4. 事件基礎
- - 1.4.1. 事件概述
  - 1.4.2. 事件三要素
  - 1.4.3. 執行事件的步驟
  - 1.4.4. 常見的滑鼠事件
  - 1.4.5. 分析事件三要素
- 1.5. 操作元素
- - 1.5.1. 改變元素內容（獲取或設定）
  - 1.5.2. 常用元素的屬性操作
  - 1.5.3. 案例：分時問候
  - 1.5.4. 表單元素的屬性操作
  - 1.5.5. 案例：仿京東顯示密碼
  - 1.5.6. 樣式屬性操作
  - - 方式1：通過操作style屬性
    - 案例：淘寶點擊關閉二維碼
    - 案例：回圈精靈圖背景
    - 案例：顯示隱藏文本框內容
    - 方式2：通過操作className屬性
    - 案例：密碼框格式提示錯誤資訊
day02 - Web APIs
- 1.1. 排他操作
- - 1.1.1 排他思想
- 1.2 案例：百度換膚
- 1.3 案例：表格隔行變色
- 1.4 案例：全選
- 1.5. 自定義屬性操作
- - 1.5.1 獲取屬性值
  - 1.5.2. 設定屬性值
  - 1.5.3. 移出屬性
  - 1.5.4. 案例：tab欄
  - 1.5.5. H5自定義屬性
- 1.6. 節點操作
- - 1.6.1. 節點概述
  - 1.6.2. 節點層級
  - 1.6.3. 父級節點
  - 1.6.4. 子節點
  - 1.6.5. 案例：新浪下拉選單
  - 1.6.6. 兄弟節點
  - 1.6.7. 創建節點
  - 1.6.8. 添加節點
  - 1.6.9. 案例：簡單版發布留言

day01 - Web APIs

學習目標：

能夠通過ID來獲取元素
能夠通過標簽名來獲取元素
能夠通過class來獲取元素
能夠通過選擇器來獲取元素
能夠獲取body和html元素
能夠給元素注冊事件
能夠修改元素的內容
能夠區分innerText和innerHTML的區別
能夠修改像div這類普通元素的屬性
能夠修改表單元素的屬性
能夠修改元素的樣式屬性

1.1. Web API介紹

1.1.1 API的概念

API（Application Programming Interface，應用程式編程介面）是一些預先定義的函式，目的是提供應用程式與開發人員基于某軟體或硬體得以訪問一組例程的能力，而又無需訪問原始碼，無需理解其內部作業機制細節，只需直接呼叫使用即可，

舉例解釋什么是API，

例如，

? C語言中有一個函式 fopen()可以打開硬碟上的檔案，這個函式對于我們來說，就是一個C語言提供的打開檔案的工具，

? javascript中有一個函式alert()可以在頁面彈一個提示框，這個函式就是js提供的一個彈框工具，

這些工具（函式）由編程語言提供，內部的實作已經封裝好了，我們只要學會靈活的使用這些工具即可，

1.1.2 Web API的概念

? Web API 是瀏覽器提供的一套操作瀏覽器功能和頁面元素的 API ( BOM 和 DOM )，

? 現階段我們主要針對于瀏覽器講解常用的 API , 主要針對瀏覽器做互動效果，比如我們想要瀏覽器彈出一個警示框，直接使用 alert(‘彈出’)

? MDN 詳細 API : https://developer.mozilla.org/zh-CN/docs/Web/API

? 因為 Web API 很多，所以我們將這個階段稱為 Web APIs，

? 此處的 Web API 特指瀏覽器提供的一系列API(很多函式或物件方法)，即操作網頁的一系列工具，例如：操作html標簽、操作頁面地址的方法，

1.1.3 API 和 Web API 總結

API 是為我們程式員提供的一個介面，幫助我們實作某種功能，我們會使用就可以了，不必糾結內部如何實作
Web API 主要是針對于瀏覽器提供的介面，主要針對于瀏覽器做互動效果，
Web API 一般都有輸入和輸出（函式的傳參和回傳值），Web API 很多都是方法（函式）
學習 Web API 可以結合前面學習內置物件方法的思路學習

1.2. DOM 介紹

1.2.1 什么是DOM

? 檔案物件模型（Document Object Model，簡稱DOM），是 W3C 組織推薦的處理可擴展標記語言（html或者xhtml）的標準編程介面，

? W3C 已經定義了一系列的 DOM 介面，通過這些 DOM 介面可以改變網頁的內容、結構和樣式，

DOM是W3C組織制定的一套處理 html和xml檔案的規范，所有的瀏覽器都遵循了這套標準，

1.2.2. DOM樹

DOM樹又稱為檔案樹模型，把檔案映射成樹形結構，通過節點物件對其處理，處理的結果可以加入到當前的頁面，

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

1.3. 獲取元素

為什么要獲取頁面元素？

例如：我們想要操作頁面上的某部分(顯示/隱藏，影片)，需要先獲取到該部分對應的元素，再對其進行操作，

1.3.1. 根據ID獲取

語法：document.getElementById(id)
作用：根據ID獲取元素物件
引數：id值，區分大小寫的字串
回傳值：元素物件 或 null

案例代碼

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因為我們檔案頁面從上往下加載，所以先得有標簽 所以我們script寫到標簽的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 列印我們回傳的元素物件 更好的查看里面的屬性和方法
        console.dir(timer);
    </script>
</body>

1.3.2. 根據標簽名獲取元素

語法：document.getElementsByTagName('標簽名') 或者 element.getElementsByTagName('標簽名') 
作用：根據標簽名獲取元素物件
引數：標簽名
回傳值：元素物件集合（偽陣列，陣列元素是元素物件）

案例代碼

<body>
    <ul>
        <li>知否知否，應是等你好久11</li>
        <li>知否知否，應是等你好久22</li>
        <li>知否知否，應是等你好久33</li>
        <li>知否知否，應是等你好久44</li>
        <li>知否知否，應是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1.回傳的是 獲取過來元素物件的集合 以偽陣列的形式存盤的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我們想要依次列印里面的元素物件我們可以采取遍歷的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到這個元素里面的某些標簽
        var nav = document.getElementById('nav'); // 這個獲得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注意：getElementsByTagName()獲取到是動態集合，即：當頁面增加了標簽，這個集合中也就增加了元素，

1.3.3. H5新增獲取元素方式

案例代碼

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首頁</li>
            <li>產品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根據類名獲得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 回傳指定選擇器的第一個元素物件  切記 里面的選擇器需要加符號 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()回傳指定選擇器的所有元素物件集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

1.3.4 獲取特殊元素（body，html）

1.4. 事件基礎

1.4.1. 事件概述

JavaScript 使我們有能力創建動態頁面，而事件是可以被 JavaScript 偵測到的行為，

簡單理解： 觸發— 回應機制，

? 網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件，例如，我們可以在用戶點擊某按鈕時產生一個事件，然后去執行某些操作，

1.4.2. 事件三要素

事件源（誰）：觸發事件的元素
事件型別（什么事件）：例如 click 點擊事件
事件處理程式（做啥）：事件觸發后要執行的代碼(函式形式)，事件處理函式

案例代碼

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

1.4.3. 執行事件的步驟

案例代碼

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

1.4.4. 常見的滑鼠事件

1.4.5. 分析事件三要素

下拉選單三要素
關閉廣告三要素

1.5. 操作元素

? JavaScript的 DOM 操作可以改變網頁內容、結構和樣式，我們可以利用 DOM 操作元素來改變元素里面的內容、屬性等，（注意：這些操作都是通過元素物件的屬性實作的）

1.5.1. 改變元素內容（獲取或設定）

innerText改變元素內容

<body>
    <button>顯示當前系統時間</button>
    <div>某個時間</div>
    <p>1123</p>
    <script>
        // 當我們點擊了按鈕，  div里面的文字會發生變化
        // 1. 獲取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注冊事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }
        function getDate() {
            var date = new Date();
            // 我們寫一個 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
    </script>
</body>

innerText和innerHTML的區別

獲取內容時的區別：

? innerText會去除空格和換行，而innerHTML會保留空格和換行

設定內容時的區別：

? innerText不會識別html，而innerHTML會識別

案例代碼

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <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>
</body>

1.5.2. 常用元素的屬性操作

獲取屬性的值

元素物件.屬性名

設定屬性的值

元素物件.屬性名 = 值

案例代碼

<body>
    <button id="ldh">劉德華</button>
    <button id="zxy">張學友</button> <br>
    <img src="images/ldh.jpg" alt="" 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>
</body>

1.5.3. 案例：分時問候

1.5.4. 表單元素的屬性操作

獲取屬性的值

元素物件.屬性名

設定屬性的值

元素物件.屬性名 = 值

表單元素中有一些屬性如：disabled、checked、selected，元素物件的這些屬性的值是布爾型，

案例代碼

<body>
    <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>
</body>

1.5.5. 案例：仿京東顯示密碼

1.5.6. 樣式屬性操作

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

常用方式

方式1：通過操作style屬性

元素物件的style屬性也是一個物件！

元素物件.style.樣式屬性 = 值;

案例代碼

<body>
    <div></div>
    <script>
        // 1. 獲取元素
        var div = document.querySelector('div');
        // 2. 注冊事件 處理程式
        div.onclick = function() {
            // div.style里面的屬性 采取駝峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

案例：淘寶點擊關閉二維碼

案例：回圈精靈圖背景

案例：顯示隱藏文本框內容

方式2：通過操作className屬性

元素物件.className = 值;

因為class是關鍵字，所有使用className，

案例代碼

<body>
    <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更改元素的樣式 適合于樣式較多或者功能復雜的情況
            // 3. 如果想要保留原先的類名，我們可以這么做 多類名選擇器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

案例：密碼框格式提示錯誤資訊

day02 - Web APIs

學習目標：

能夠說出排他操作的一般實作步驟

能夠使用html5中的dataset方式操作自定義屬性

能夠根據提示完成百度換膚的案例

能夠根據提示完成全選案例

能夠根據提示完成tab欄切換案例

能夠區分元素節點、文本節點、屬性節點

能夠獲取指定元素的父元素

能夠獲取指定元素的所有子元素

能夠說出childNodes和children的區別

能夠使用createElement創建頁面元素

1.1. 排他操作

1.1.1 排他思想

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

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

    <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';

            }
        }
    </script>

1.2 案例：百度換膚

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 獲取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 回圈注冊事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我們點擊圖片的路徑   images/2.jpg
                // console.log(this.src);
                // 把這個路徑 this.src 給body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

1.3 案例：表格隔行變色

    <script>
        // 1.獲取元素 獲取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用回圈系結注冊事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 滑鼠經過事件 onm ouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 滑鼠離開事件 onm ouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>

1.4 案例：全選

    <script>
        // 1. 全選和取消全選做法：  讓下面所有復選框的checked屬性（選中狀態） 跟隨 全選按鈕即可
        // 獲取元素
        
        var j_cbAll = document.getElementById('j_cbAll'); 
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); 
        // 全選按鈕注冊事件
        j_cbAll.onclick = function() {
                // this.checked 當前復選框的選中狀態
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
         }
         // 給所有的子復選框注冊單擊事件
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全選按鈕是否選中
                var flag = true;
                // 每次點擊下面的復選框都要回圈檢查者4個小按鈕是否全被選中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; 
                    }
                }
                // 設定全選按鈕的狀態
                j_cbAll.checked = flag;
            }
        }
    </script>

1.5. 自定義屬性操作

1.5.1 獲取屬性值

    <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 屬性的意思 我們程式員自己添加的屬性我們稱為自定義屬性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
	</script>

1.5.2. 設定屬性值

        // 2. 設定元素屬性值
        // (1) element.屬性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('屬性', '值');  主要針對于自定義屬性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  這里面寫的就是

1.5.3. 移出屬性

		// class 不是className
        // 3 移除屬性 removeAttribute(屬性)    
        div.removeAttribute('index');

1.5.4. 案例：tab欄

    <script>
        // 獲取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for回圈，給選項卡系結點擊事件
        for (var i = 0; i < lis.length; i++) {
            // 開始給5個小li 設定索引號 
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                // 1. 上的模塊選項卡，當前這一個底色會是紅色，其余不變（排他思想）
                // 干掉所有人 其余的li清除 class 這個類
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 留下我自己 
                this.className = 'current';
                // 2. 下面的顯示內容模塊
                var index = this.getAttribute('index');
                console.log(index);
                // 干掉所有人 讓其余的item 這些div 隱藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 留下我自己 讓對應的item 顯示出來
                items[index].style.display = 'block';
            }
        }
    </script>

1.5.5. H5自定義屬性

自定義屬性目的：是為了保存并使用資料，有些資料可以保存到頁面中而不用保存到資料庫中，

自定義屬性獲取是通過getAttribute(‘屬性’) 獲取，

但是有些自定義屬性很容易引起歧義，不容易判斷是元素的內置屬性還是自定義屬性，

H5給我們新增了自定義屬性：

    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的獲取自定義屬性的方法 它只能獲取data-開頭的
        // dataset 是一個集合里面存放了所有以data開頭的自定義屬性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定義屬性里面有多個-鏈接的單詞，我們獲取的時候采取 駝峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

1.6. 節點操作

1.6.1. 節點概述

? 網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），在DOM 中，節點使用 node 來表示，

? HTML DOM 樹中的所有節點均可通過 JavaScript 進行訪問，所有 HTML 元素（節點）均可被修改，也可以創建或洗掉，

(images/1550970944363.png)]

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

(images/1550970986988.png)]

1.6.2. 節點層級

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

1.6.3. 父級節點

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

1.6.4. 子節點

所有子節點

子元素節點

    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        // DOM 提供的方法（API）獲取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子節點  childNodes 所有的子節點 包含 元素節點 文本節點等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 獲取所有的子元素節點 也是我們實際開發常用的
        console.log(ul.children);
    </script>

第1個子節點

最后1個子節點

第1個子元素節點

最后1個子元素節點

? 實際開發中，firstChild 和 lastChild 包含其他節點，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性問題，那么我們如何獲取第一個子元素節點或最后一個子元素節點呢？

    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一個子節點 不管是文本節點還是元素節點
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 回傳第一個子元素節點 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 實際開發的寫法  既沒有兼容性問題又回傳第一個子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>

1.6.5. 案例：新浪下拉選單

    <script>
        // 1. 獲取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children; // 得到4個小li
        // 2.回圈注冊事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>

1.6.6. 兄弟節點

下一個兄弟節點

上一個兄弟節點

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

下一個兄弟元素節點（有兼容性問題）

上一個兄弟元素節點（有兼容性問題）

   function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }

1.6.7. 創建節點

1.6.8. 添加節點

    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 創建節點元素節點
        var li = document.createElement('li');
        // 2. 添加節點 node.appendChild(child)  node 父級  child 是子級 后面追加元素
        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>

1.6.9. 案例：簡單版發布留言

<body>
    <textarea name="" id=""></textarea>
    <button>發布</button>
    <ul>

    </ul>
    <script>
        // 1. 獲取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注冊事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您沒有輸入內容');
                return false;
            } else {
                // console.log(text.value);
                // (1) 創建元素
                var li = document.createElement('li');
                // 先有li 才能賦值
                li.innerHTML = text.value;
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>

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

標籤：其他

上一篇：前端白菜純JavaScript

下一篇：JavaScript知識——DOM增刪改、操作行內樣式

Web前端學習筆記14： Web APIs_DOM_元素_事件_排他操作_自定義屬性_節點操作

文章目錄

day01 - Web APIs

1.1. Web API介紹

1.1.1 API的概念

1.1.2 Web API的概念

1.1.3 API 和 Web API 總結

1.2. DOM 介紹

1.2.1 什么是DOM

1.2.2. DOM樹

1.3. 獲取元素

1.3.1. 根據ID獲取

1.3.2. 根據標簽名獲取元素

1.3.3. H5新增獲取元素方式

1.3.4 獲取特殊元素（body，html）

1.4. 事件基礎

1.4.1. 事件概述

1.4.2. 事件三要素

1.4.3. 執行事件的步驟

1.4.4. 常見的滑鼠事件

1.4.5. 分析事件三要素

1.5. 操作元素

1.5.1. 改變元素內容（獲取或設定）

1.5.2. 常用元素的屬性操作

1.5.3. 案例：分時問候

1.5.4. 表單元素的屬性操作

1.5.5. 案例：仿京東顯示密碼

1.5.6. 樣式屬性操作

方式1：通過操作style屬性

案例：淘寶點擊關閉二維碼

案例：回圈精靈圖背景

案例：顯示隱藏文本框內容

方式2：通過操作className屬性

案例：密碼框格式提示錯誤資訊

day02 - Web APIs

1.1. 排他操作

1.1.1 排他思想

1.2 案例：百度換膚

1.3 案例：表格隔行變色

1.4 案例：全選

1.5. 自定義屬性操作

1.5.1 獲取屬性值

1.5.2. 設定屬性值

1.5.3. 移出屬性

1.5.4. 案例：tab欄

1.5.5. H5自定義屬性

1.6. 節點操作

1.6.1. 節點概述

1.6.2. 節點層級

1.6.3. 父級節點

1.6.4. 子節點

1.6.5. 案例：新浪下拉選單

1.6.6. 兄弟節點

1.6.7. 創建節點

1.6.8. 添加節點

1.6.9. 案例：簡單版發布留言