JavaScript八 - DOM

9.1 WebAPI介紹

JS基礎學習ECMA JavaScript(歐洲計算機制造商協會,European Computer Manufacturers Association)基礎語法爲後面做鋪墊,WebAPIS是JS的應用。

9.1.1 API的概念

API(Application Programming Interface,應用程序編程接口)是一些預先定義的函數,目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力,而又無需訪問源碼,無需理解其內部工作機制細節,只需直接調用使用即可。


  • 舉例解釋什麼是API。

例如

  • C語言中有一個函數 fopen()可以打開硬盤上的文件,這個函數對於我們來說,就是一個C語言提供的打開文件的工具。
  • javascript中有一個函數alert()可以在頁面彈一個提示框,這個函數就是js提供的一個彈框工具。
  • 這些工具(函數)由編程語言提供,內部的實現已經封裝好了,我們只要學會靈活的使用這些工具即可。

9.1.2 WebAPI的概念

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標籤、操作頁面地址的方法。

9.1.3 API和WebAPI總結

  1. API 是爲我們程序員提供的一個接口,幫助我們實現某種功能,我們會使用就可以了,不必糾結內部如何實現
  2. Web API 主要是針對於瀏覽器提供的接口,主要針對於瀏覽器做交互效果。
  3. Web API 一般都有輸入和輸出(函數的傳參和返回值),Web API 很多都是方法(函數)
  4. 學習 Web API 可以結合前面學習內置對象方法的思路學習

9.2 DOM介紹

9.2.1什麼是DOM

文檔對象模型(Document Object Model,簡稱DOM),是 W3C 組織推薦的處理可擴展標記語言(html或者xhtml)的標準編程接口

W3C 已經定義了一系列的 DOM 接口,通過這些 DOM 接口可以改變網頁的內容、結構和樣式。

​ DOM是W3C組織制定的一套處理 html和xml文檔的規範,所有的瀏覽器都遵循了這套標準。

9.2.2 DOM樹

DOM樹 又稱爲文檔樹模型,把文檔映射成樹形結構,通過節點對象對其處理,處理的結果可以加入到當前的頁面。

  • 文檔:一個頁面就是一個文檔,DOM中使用document表示
  • 節點:網頁中的所有內容,在文檔樹中都是節點(標籤、屬性、文本、註釋等),使用node表示
  • 標籤節點:網頁中的所有標籤,通常稱爲元素節點,又簡稱爲“元素”,使用element表示


9.3獲取元素

9.3.1根據ID獲取

語法:document.getElementById(id)
作用:根據ID獲取元素對象
參數:id值,區分大小寫的字符串
返回值:元素對象 或 null

案例代碼

<body>
    <div id="time">2020-07-27</div>
    <script>
        // 因爲我們文檔頁面從上往下加載,所以先得有標籤 所以我們script寫到標籤的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我們返回的元素對象 更好的查看裏面的屬性和方法
        console.dir(timer);
    </script>
</body>

9.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>

9.3.3H5新增獲取元素方式

案例代碼

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

9.3.4獲取特殊元素(body,html)

9.4事件基礎

9.4.1事件概述

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

簡單理解: 觸發--- 響應機制

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

9.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>

9.4.3執行事件的步驟

  1. 獲取事件源
  2. 註冊事件(綁定事件)
  3. 添加事件處理程序(採取函數賦值形式)

案例代碼

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

9.4.4常見的鼠標事件

9.5操作元素

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

9.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>

9.5.2innerText和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>

9.5.3修改元素屬性

[圖片上傳失敗...(image-777b3f-1606220454382)]

獲取屬性的值

元素對象.屬性名

設置屬性的值

元素對象.屬性名 = 值

案例代碼

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

9.5.4案例講解-分時問候案例顯示不同圖片

[圖片上傳失敗...(image-e8bbf0-1606220454382)]

9.5.5修改表單屬性

[圖片上傳失敗...(image-db7ef8-1606220454382)]

獲取屬性的值

元素對象.屬性名

設置屬性的值

元素對象.屬性名 = 值

表單元素中有一些屬性如: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>

9.5.6案例講解-仿京東顯示隱藏密碼明文案例

[圖片上傳失敗...(image-41848e-1606220454382)]

9.5.7修改樣式屬性

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

常用方式

[圖片上傳失敗...(image-22bb0d-1606220454382)]

9.5.8案例講解-仿淘寶關閉二維碼案例

[圖片上傳失敗...(image-50c6fa-1606220454382)]

[圖片上傳失敗...(image-7458e0-1606220454382)]

9.5.9案例講解-循環精靈圖

[圖片上傳失敗...(image-2766fc-1606220454382)]

9.5.10案例講解-顯示隱藏文本框內容

[圖片上傳失敗...(image-f53e57-1606220454382)]

[圖片上傳失敗...(image-a79408-1606220454382)]

9.5.11修改className

元素對象.className = 值;

因爲class是關鍵字,所有使用className。

[圖片上傳失敗...(image-e948a9-1606220454382)]

案例代碼

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

9.5.12案例講解-仿新浪註冊頁面

[圖片上傳失敗...(image-3ac8b4-1606220454382)]

[圖片上傳失敗...(image-5f781b-1606220454382)]

10.1排他操作

10.1.1排他思想

  • 如果有同一組元素,我們想要某一個元素實現某種樣式, 需要用到循環的排他思想算法:

    1. 所有元素全部清除樣式(幹掉其他人)
    2. 給當前元素設置樣式 (留下我自己)
    3. 注意順序不能顛倒,首先幹掉其他人,再設置自己
    <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>
    

10.2案例講解

10.2.1百度換膚

<img src="media/1550914640677.png">

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

10.2.2隔行變色

<img src="media/1550914791881.png">

// 1.獲取元素 獲取的是 tbody 裏面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循環綁定註冊事件
for (var i = 0; i < trs.length; i++) {
    // 3. 鼠標經過事件 onmouseover
    trs[i].onmouseover = function() {
        // console.log(11);
        this.className = 'bg';
    }
    // 4. 鼠標離開事件 onmouseout
    trs[i].onmouseout = function() {
        this.className = '';
    }
}

10.2.3全選取消全選

<img src="media/1550914980274.png">

// 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;
    }
}

10.3自定義屬性

10.3.1獲取屬性值

  • element.屬性 獲取屬性值

  • element.getAttribute("屬性")

    區別:

    • element.屬性 獲取內置屬性值(元素本身自帶的屬性)
    • element.getAttribute('屬性'); 主要獲得自定義的屬性(標準)我們程序員自定義的屬性
    <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>
    

10.3.2設置屬性值

  • element.屬性 ='值' 設置內置屬性值

  • element.setAttribute('屬性' ,'值')

    區別:

    • element.屬性 設置內置屬性值

    • element.setAttribute('屬性'); 主要設置自定義的屬性(標準)

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

10.3.3移除屬性

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

10.3.4案例講解-tab欄切換

<img src="media/1550915567627.png">

// 獲取元素
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';
    }
}

10.3.5HTML5設置自定義屬性

  • H5規定自定義屬性data-開頭做爲屬性名並且賦值

  • 比如:

    <div data-index ="1"></div>
    //或者使用js設置
    element.setAttribute('data-index',2)
    

10.3.6HTML5獲取自定義屬性

  • 兼容性獲取

    element.getAttribute('data-index')
    
  • H5新增,ie 11纔開始支持

    elememt.dataset.index 
    //或者
    element.dataset['index']
    
<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>

10.4節點操作

10.4.1節點概述

​ 網頁中的所有內容都是節點(標籤、屬性、文本、註釋等),在DOM 中,節點使用 node 來表示。

​ HTML DOM 樹中的所有節點均可通過 JavaScript 進行訪問,所有 HTML 元素(節點)均可被修改,也可以創建或刪除。

一般地,節點至少擁有nodeType(節點類型)、nodeName(節點名稱)和nodeValue(節點值)這三個基本屬性。

10.4.2節點層級

利用 DOM 樹可以把節點劃分爲不同的層級關係,常見的是父子兄層級關係

<img src="media/1550970944363-1596547781192.png">

10.4.3父級節點

  • parentNode屬性可返回某節點的父節點,注意是最近的一個父節點
  • 如果指定的節點沒有父節點則返回null
<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>

10.4.4子節點

所有子節點

  • parentNode.childNodes返回包含指定節點的子節點的集合,該集合爲即時更新的集合

    注意:返回值裏面包含了所有的子節點,包括元素節點,文本節點等。

子元素節點

  • parentNode.children是一個只讀屬性,返回所有的子元素節點。它只返回子元素節點,其餘節點不返回
<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個子節點

  • parentNode.firstChild返回第一個子節點,找不到則返回null。同樣,也是包含所有的節點。

最後1個子節點

  • parentNode.lastChild返回最後一個子節點,找不到則返回null。同樣,也是包含所有的節點。

10.4.5子元素節點

第1個子元素節點

  • parentNode.firstElementChild返回第一個子元素節點,找不到則返回null。

最後1個子元素節點

  • parentNode.lastElementChild返回最後一個子元素節點,找不到則返回null。

10.4.6案例講解-新浪下拉菜單

<img src="media/1550974934894.png">

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

10.4.7兄弟節點

下一個兄弟節點

元素.nextSibling

上一個兄弟節點

元素.previousSibling
<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>

10.4.8創建節點

document.createElement('tagName')

10.4.9添加節點

node.appendChild(child)//將一個節點添加到指定父節點的子節點列表末尾。類似於css裏面的after僞元素

node.insertBefore(child,指定元素)//將一個節點添加到指定父節點的子節點前面。類似於css裏面的before僞元素
<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>

10.4.10案例講解-簡單版發佈留言

<img src="media/1550975849302.png">

<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 = texta.value;
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章