JavaScript 基礎知識 - DOM篇(一)

時間 2019-11-08

標籤 javascript 基礎知識 dom 欄目 JavaScript 简体版

原文原文鏈接

DOM

前言

本篇文章是JavaScript基礎知識的DOM篇，若是前面的《JavaScript基礎知識-入門篇》看完了，如今就能夠學習DOM了。javascript

注意： 全部的案例都在這裏連接: 提取密碼密碼: 9as4，文章中的每一個案例後面都有對應的序號。css

1. DOM 基本概念

javascript 分爲三個部分： ECMAScript、 DOM、 BOM。想要作出好看的頁面效果，就須要學習DOM，學習了DOM以後就能夠操做頁面元素了。

DOM: 用來操做頁面元素的一套工具
BOM: 用來操做瀏覽器一些行爲的一套工具

什麼是DOM？html

Document Object Model: 文檔對象模型，也叫 文檔樹模型，是一套用來操做 HTML和 XML的一套 API

文檔對象模型前端

HTML頁面的全部的內容，包括 標籤、 文本、 註釋、 屬性等，在JS的 DOM中，都存在一個一個的 對象與之對應。所以當咱們想要操做這些HTML的內容時，只須要操做這些對象便可。

節點：頁面中全部的內容，包括標籤、文本、註釋、屬性都被封裝成了對象，咱們把這些對象叫作節點。
元素：咱們最常操做的是標籤節點，也叫元素。

文檔樹模型java

HTML結構是一個 樹形結構，一樣的，這些對應的 對象也是一個 樹形的結構，樹形結構的好處是可以 很是容易找到某個節點的 子節點、 父節點、 兄弟節點。

子節點：child
兄弟節點：sibling
父節點：parent

樹形結構示意圖：編程

APIjson

Application Programming Interface： 應用程序編程接口，其實就是一大堆的方法，咱們能夠把API當作是工具。作不一樣的事情須要不一樣的工具。

XMLsegmentfault

Extensible Markup Language： 可擴展性標記語言，一般用於配置文件，或者和json同樣用於數據交互。

2. 查找 DOM 對象

想要操做 DOM，首先須要獲取到 DOM對象

2.1 根據id獲取元素

document.getElementById("id名");

document : 整個頁面就是一個document對象
get      : 獲取
Element  : 元素
By       : 經過
Id       : id   參數是一個字符串，即id

返回值   : 是一個元素，即一個對象，標籤中存在的屬性，在這個元素中也有屬與之一一對應。
document指的是整個html頁面，在DOM中被封裝成了一個對象，就是document對象

示例代碼：數組

<div id="test">123</div>

<script>
    // 經過id名獲取到了這個盒子對象，就能夠對這個盒子進行操做了
    var test = document.getElementById("test");
</script>

舉個例子：替換圖片的屬性 [01-替換圖片的屬性.html]瀏覽器

<img id="image" src="../image/01.jpg" alt="圖片加載失敗了" title="提示信息"></img>

<script>
    var img = document.getElementById("image");
    img.title = "你看到了什麼";
    img.alt = "圖片未能顯示"; // 兩條提示信息也被替換了
    img.src = "../image/02.jpg"; // 頁面中的圖片會被替換成2.jpg
</script>

2.2 根據標籤名獲取元素

document.getElementsByTagName("標籤名");

document : 整個頁面就是一個document對象
get      : 獲取
Elements : 多個元素
By       : 經過
TagName  : 標籤名

返回值   : 由於是多個元素，因此返回的是一個僞數組(頁面中全部爲該標籤的元素)

示例代碼：

<div id="box">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
</div>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>

<script>
    var box = document.getElementById('box');
    var links1 = document.getElementsByTagName('a'); // 獲取到頁面中全部的a標籤 12345678
    var links2 = box.getElementsByTagName('a');      // 獲取到div裏面全部的a標籤 12345
</script>

舉個例子：隔行變色 [02-隔行變色.html]

<ul id="item">
        <li>我是單行我顯示淺藍色</li>
        <li>我是雙行我顯示淡粉色</li>
        <li>我是單行我顯示淺藍色</li>
        <li>我是雙行我顯示淡粉色</li>
        <li>我是單行我顯示淺藍色</li>
        <li>我是雙行我顯示淡粉色</li>
        <li>我是單行我顯示淺藍色</li>
        <li>我是雙行我顯示淡粉色</li>
        <li>我是單行我顯示淺藍色</li>
        <li>我是雙行我顯示淡粉色</li>
        <li>我是單行我顯示淺藍色</li>
        <li>我是雙行我顯示淡粉色</li>
        <li>我是單行我顯示淺藍色</li>
        <li>我是雙行我顯示淡粉色</li>
    </ul>
<script>
    var lis = document.getElementsByTagName('li');
    // 返回的是一個僞數組，因此也能夠遍歷
    for (var i = 0; i < lis.length; i++) {
        if (i % 2 == 0) {
            // 注意 數組的下標i是從0 開始的，因此第一個li下標是0
            lis[i].className = "even";   // .odd{background-color:#ffc0cb;}
        } else {
            lis[i].className = "odd";    // .even{background-color:#afeeee;}
        }
    }
</script>

效果圖：

3. 註冊事件

JavaScript和 HTML之間的交互是經過 事件來實現的。事件就是文檔或者瀏覽器窗口發生的一些特定的交互瞬間。 JavaScript是一門事件驅動的腳本語言。

3.1 事件三要素

事件源： 觸發事件的元素
事件名稱： 觸發事件的名稱
事件處理函數： 觸發事件時調用的函數

3.2 註冊事件的兩種方式

一、行內註冊事件(不用)

// 直接在標籤內添加一個點擊事件
<img src="images/1.jpg" alt="描述" id="img" onclick="changePic()">

二、內嵌式註冊事件

var img = document.getElementById("img");
img.onclick = function() {
  img.src = "images/2.gif";
}

注意：

註冊事件的時候，事件處理程序並不會調用，點擊的時候調用，瀏覽器調用。
每點擊一次，就會觸發一次事件，瀏覽器就會調用一次這個函數。

3.3 鼠標點擊事件

當鼠標點擊的時候，觸發事件

語法

事件源.onclick = function(){
    // 觸發事件後執行的函數
}

示例代碼：點擊輪流切換圖片 [03-點擊輪流切換圖片.html]

<img src="../image/01.jpg" alt="" id="img">
<input type="button" value="切換" id="btn">

<script>
    var img = document.getElementById('img');
    var btn = document.getElementById('btn');
    var index = 1;
    btn.onclick = function() {
        index++;
        if (index == 5) {
            index = 1;
        }
        img.src = "../image/0" + index + ".jpg";  // 利用字符串拼接的方法，將路徑拼接起來
    }
</script>

上面輪流切換的方法存在一個問題，當圖片前綴或者後綴不統一的時候怎麼辦呢？這個方法是不能用的。

利用數組點擊輪流切換圖片 [03-點擊輪流切換圖片.html]

var img = document.getElementById('img');
var btn = document.getElementById('btn');
// 將全部的路徑存儲到一個數組中，而後只須要遍歷這個數組的下標，就能實現切換圖片
var arr = ["../image/01.jpg", "../image/02.jpg", "../image/03.jpg", "../image/04.jpg", "../image/05.jpg"];
var index = 0;

btn.onclick = function() {
    index++;
    if (index == 4) {
        index = 1;
    }
    img.src = arr[index];
}

將全部的路徑存儲到一個數組中，而後只須要遍歷這個數組的下標，就能實現切換圖片。

效果圖：

示例代碼：一個按鈕點擊循環顯示隱藏一個盒子 [04-一個按鈕點擊... .html]

<div id="box"></div>
<input type="button" value="隱藏" id="btn">

<script>
    var img = document.getElementById('img');
    var btn = document.getElementById('btn');

    btn.onclick = function() {
        // value、className屬性後面會提到
        if (btn.value == "隱藏") {
            box.className = "hide";
            btn.value = "顯示";
        } else {
            box.className = "show";
            btn.value = "隱藏";
        }
    }
</script>

效果圖：

給a標籤註冊點擊事件

a標籤自己就是能夠被點擊的，並且點擊事後必須跳轉(瀏覽器的默認行爲)，咱們在給 a標籤註冊事件的時候加上 return false 就能夠阻止頁面跳轉

<a id="link" href="http://www.google.com" target="_blank" title="提示信息">點擊跳轉到谷歌</a>
<script>
    var link = document.getElementById('link');
    link.onclick = function() {
        console.log("呵呵呵");    //  點擊後 打印「呵呵呵」，而且頁面不跳轉
        return false;
    }
</script>

給多個a標籤註冊點擊事件 [05-給多個a標籤註冊點擊事件.html]

經過 getElementsByTagName();找到全部 a標籤，返回一個僞數組。

<!-- 樣式部分 -->
<style>
    .color {
        background-color: #FFBDD4;
    }
</style>

<!-- html 部分 -->
<a href="#">你點我啊！！</a>
<a href="#">你點我啊！！</a>
<a href="#">你點我啊！！</a>
<a href="#">你點我啊！！</a>
<a href="#">你點我啊！！</a>
<a href="#">你點我啊！！</a>

<!-- js 部分 -->
<script>
    var links = document.getElementsByTagName('a');
    // 給多個a標籤註冊事件
    for (var i = 0; i < links.length; i++) {
        // link指第一個a標籤  循環完成的時候link是最後一個a標籤
        var link = links[i];
        // 循環的註冊事件，每個a都註冊了事件  實質：關聯一個函數
        link.onclick = function() {
            console.log(i);  // 打印的是最後一個下標
            this.className = "color";   // this指的是當前對象
            return false;
        }
    }
</script>

效果圖：

3.4 鼠標通過、離開事件

當鼠標通過或者離開的時候，分別觸發的事件

一、語法(鼠標通過)

事件源.onmouseover = function(){
    // 鼠標通過時執行的函數
}

二、語法(鼠標離開)

事件源.onmouseout = function(){
    // 鼠標離開時執行的函數
}

示例代碼：二維碼案例(通過的時候顯示，離開的時候隱藏) [06-二維碼案例.html]

<!-- 樣式部分 -->
<style>
    .small {
        width: 50px;
        height: 50px;
        background: url(../image/bgs.png) no-repeat -159px -51px;
        position: fixed;
        right: 10px;
        top: 45%;
        cursor: pointer;
    }
    .big {
        position: absolute;
        top: 0;
        left: -150px;
    }
    .hide {
        display: none;
    }
    .show {
        display: block;
    }
</style>

<!-- html部分 -->
<div id="small" class="small">
    <div id="big" class="big hide">
        <img src="../image/456.png" alt="" />
    </div>
</div>

<!-- js部分 -->
<script>
    var small = document.getElementById('small');
    var big = document.getElementById('big');
    small.onmouseover = function() {
        big.className = "big show"; // 注意這裏必定不能只寫一個類，它自己的big類也要寫上去，不然頁面中只有一個show類
    }
    small.onmouseout = function() {
        big.className = "big hide";
    }
</script>

效果圖：

3.5 表單得到、失去焦點事件

表單得到焦點時觸發事件，表單失去焦點時觸發事件

一、語法(得到焦點)

事件源.onfocus = function(){
    // 得到焦點後執行的函數
}

二、語法(失去焦點)

事件源.onblur = function(){
    // 失去焦點後執行的函數
}

示例代碼：京東搜索案例 [07-京東搜索案例.html]

得到焦點時input輸入框清空，失去焦點時恢復提示信息

<!-- html 部分 -->
<input id="text" type="text" value="iphoneX">
<button id="btn">搜索</button>

<!-- js 部分 -->
<script>
    var text = document.getElementById('text');
    text.onfocus = function() {
        text.value = "";
    }
    text.onblur = function() {
        text.value = "iphoneX";
    }
</script>

效果圖：

3.6 其餘觸發事件彙總

在 js中觸發事件有不少種，這裏就不一一列舉了，用法和上面的實際上是同樣的，你只須要知道它的事件名便可。

事件名	事件具體用法	備註
鼠標事件
onclick	鼠標單擊時觸發的事件
ondblclick	鼠標雙擊時觸發的事件
onmouseover	鼠標移動到某對象範圍的上方時觸發此事件
onmouseout	鼠標離開某對象範圍時觸發此事件
onmousedown	鼠標按下時觸發此事件
onmouseup	鼠標按下後鬆開鼠標時觸發此事件
onmousemove	鼠標移動時觸發此事件
鍵盤事件
onkeypress	鍵盤上的某個鍵被按下而且釋放時觸發此事件
onkeydown	鍵盤上某個按鍵被按下時觸發此事件
onkeyup	當鍵盤上某個按鍵被按放開時觸發此事件
頁面相關事件
onscroll	瀏覽器的滾動條位置發生變化時觸發此事件
onload	頁面內容完成時觸發此事件
onbeforeunload	當前頁面的內容將要被改變時觸發此事件
onerror	出現錯誤時觸發此事件
onmove	瀏覽器的窗口被移動時觸發此事件
onresize	當瀏覽器的窗口大小被改變時觸發此事件
onstop	瀏覽器的中止按鈕被按下時觸發此事件或者正在下載的文件被中斷
onunload	當前頁面將被改變時觸發此事件
表單相關事件
onfocus	當某個元素得到焦點時觸發此事件
onchange	當前元素失去焦點而且元素的內容發生改變而觸發此事件
onsubmit	一個表單被遞交時觸發此事件
onreset	當表單中RESET的屬性被激發時觸發此事件
頁面編輯事件
onbeforecopy	當頁面當前的被選擇內容將要[複製]到瀏覽者系統的剪貼板前觸發此事件
onbeforecut	當頁面當前的被選擇內容將要[剪切]到瀏覽者系統的剪貼板前觸發此事件
onbeforeeditfocus	當前元素將要進入[編輯]狀態
onbeforepaste	內容將要從瀏覽者的系統剪貼板傳送[粘貼]到頁面中時觸發此事件
onbeforeupdate	當瀏覽者[粘貼]系統剪貼板中的內容時通知目標對象
oncontextmenu	當瀏覽者按下鼠標右鍵出現菜單時或者經過鍵盤的按鍵觸發頁面菜單時觸發的事件
oncopy	當頁面當前的被選擇內容被[複製]後觸發此事件
oncut	當頁面當前的被選擇內容被剪切時觸發此事件
onpaste	當內容被粘貼時觸發此事件
onselect	當文本內容被選擇時的事件
onselectstart	當文本內容選擇將開始發生時觸發的事件
ondrag	當某個對象被拖動時觸發此事件 [活動事件]
ondragdrop	一個外部對象被鼠標拖進當前窗口或者幀
ondragend	當鼠標拖動結束時觸發此事件，即鼠標的按鈕被釋放了
ondragenter	當對象被鼠標拖動的對象進入其容器範圍內時觸發此事件
ondragleave	當對象被鼠標拖動的對象離開其容器範圍內時觸發此事件
ondragover	當某被拖動的對象在另外一對象容器範圍內拖動時觸發此事件
ondragstart	當某對象將被拖動時觸發此事件
ondrop	在一個拖動過程當中，釋放鼠標鍵時觸發此事件
onlosecapture	當元素失去鼠標移動所造成的選擇焦點時觸發此事件
數據綁定
onafterupdate	當數據完成由數據源到對象的傳送時觸發此事件
oncellchange	當數據來源發生變化時
ondataavailable	當數據接收完成時觸發事件
ondatasetchanged	數據在數據源發生變化時觸發的事件
ondatasetcomplete	當來子數據源的所有有效數據讀取完畢時觸發此事件
onerrorupdate	當使用onBeforeUpdate事件觸發取消了數據傳送時，代替onAfterUpdate事件
onrowenter	當前數據源的數據發生變化而且有新的有效數據時觸發的事件
onrowexit	當前數據源的數據將要發生變化時觸發的事件
onrowsdelete	當前數據記錄將被刪除時觸發此事件
onrowsinserted	當前數據源將要插入新數據記錄時觸發此事件
外部事件
onafterprint	當文檔被打印後觸發此事件
onbeforeprint	當文檔即將打印時觸發此事件
onfilterchange	當某個對象的濾鏡效果發生變化時觸發的事件
onhelp	當瀏覽者按下F1或者瀏覽器的幫助選擇時觸發此事件
onpropertychange	當對象的屬性之一發生變化時觸發此事件
onreadystatechange	當對象的初始化屬性值發生變化時觸發此事件

4. 優雅降級和漸進加強

漸進加強：基於全部瀏覽器完成基本的功能。在這個基礎上使用一些新特性，高級瀏覽器支持，低級瀏覽器不支持。
優雅降級：先基於主流的、高級的瀏覽器實現功能。對於那些不支持的瀏覽器，儘可能去支持，若是支持不了就放棄。

5. 屬性操做

5.1 普通標籤屬性

在標籤中存在的屬性，在 DOM對象中一樣存在着對應的屬性，只要修改了標籤的屬性或者 DOM對象的屬性，兩邊都會變化。常見的屬性有： title、 src、 href、 className、 id等。

屬性操做案例：美女相冊 [08-美女相冊.html]

<!-- 樣式部分 -->
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #box {
        margin: 20px 100px;
    }
    
    ul {
        overflow: hidden;
        margin: 50px 0;
    }
    
    li {
        float: left;
        margin-right: 20px;
    }
    
    li img {
        width: 150px;
    }
    
    #placeholder {
        width: 400px;
        height: 250px;
    }
</style>

<!-- html 部分 -->
<h2>美女相冊案例</h2>
<ul>
    <li>
        <a href="../image/美女相冊/1.jpg" title="美女1"><img src="../image/美女相冊/1-small.jpg" alt=""></a>
    </li>
    <li>
        <a href="../image/美女相冊/2.jpg" title="美女2"><img src="../image/美女相冊/2-small.jpg" alt=""></a>
    </li>
    <li>
        <a href="../image/美女相冊/3.jpg" title="美女3"><img src="../image/美女相冊/3-small.jpg" alt=""></a>
    </li>
    <li>
        <a href="../image/美女相冊/4.jpg" title="美女4"><img src="../image/美女相冊/4-small.jpg" alt=""></a>
    </li>
</ul>
<img id="placeholder" src="../image/美女相冊/placeholder.png" alt="">
<p id="description">這是描述</p>

<!-- js 部分 -->
<script>
    var links = document.getElementsByTagName('a');
    var placeholder = document.getElementById('placeholder');
    var description = document.getElementById('description');
    
    // 給全部a標籤註冊點擊事件
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function() {
            // 將佔位的圖片的src設置成當前點擊a標籤的路徑
            placeholder.src = this.href;
            // 修改描述文字，設置成當前點擊a標籤的title
            description.innerHTML = this.title;
            // 阻止a標籤跳轉
            return false;
        }
    }
</script>

效果圖：

5.2 表單屬性操做

常見的表單屬性有： disabled、 type、 value、 checked、 selected

一、disabled：禁用表單

在input標籤中，只要指定了disabled屬性，不管有沒有值，都表明這個input是被禁用的。
在DOM對象中disabled的屬性是一個布爾值，只有false和true。

示例代碼：禁用文本框 [09-禁用文本框.html]

<!-- html 部分 -->
<input type="text" name="" value=""><br/>
<input type="text" name="" value=""><br/>
<input type="text" name="" value=""><br/>
<input type="text" name="" value=""><br/>
<input type="text" name="" value=""><br/>
<input type="button" value="禁用" id="btn">

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    // 獲取到全部的input
    var inputs = document.getElementsByTagName('input');
    // 給按鈕註冊點擊事件
    btn.onclick = function() {
        // 遍歷僞數組
        for (var i = 0; i < inputs.length; i++) {
            // 根據input的type屬性 判斷text，禁用text
            if (inputs[i].type == "text") {
                inputs[i].disabled = true;
            }
        }
    }
</script>

效果圖：

二、selected：多選菜單的默認顯示選擇項

當select多選表單裏的option選項設置selected="true"的時候，默認顯示該選項。
在DOM對象中selected的屬性是一個布爾值，只有false和true。

示例代碼：點擊按鈕隨機切換option的默認選項 [10-select默認選中項.html]

<!-- html 部分 -->
<select>
    <option>露娜</option>
    <option>甄姬</option>
    <option>女媧</option>
    <option>羋月</option>
    <!-- 這裏加了一個selected選項後，一進去就會顯示這個默認項 -->
    <option selected>阿珂</option>
    <option>貂蟬</option>
    <option>妲己</option>
    <option>大喬</option>
    <option>小喬</option>
</select>
<input id="btn" type="button" value="切換">

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    var options = document.getElementsByTagName('option');
    // 點擊按鈕，隨機給某個option 加上selected選項
    btn.onclick = function() {
        // 得到隨機數   0-8
        var random = parseInt(Math.random() * options.length);
        // 根據隨機下標 去設置selected屬性
        options[random].selected = true;
    }
</script>

效果圖：

三、checked：選擇框的默認選中

當checkbox選擇框設置checked選項的時候，默認選中。
在DOM對象中，checked的屬性是一個布爾值，只有false和true。

示例代碼：表格全選反選案例 [11-表格全選反選.html]

<!-- html 部分 -->
<div class="wrap">
    <table>
        <thead>
            <tr>
                <th>
                    <input id="check_all" type="checkbox" title="全選">
                    <input id="check_fx" type="checkbox" title="反選">
                </th>
                <th>英雄</th>
                <th>技能</th>
            </tr>
        </thead>
        <tbody id="check_dan">
            <tr>
                <td><input type="checkbox"></td>
                <td>羋月</td>
                <td>永生之血</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>貂蟬</td>
                <td>語·花印</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>大喬</td>
                <td>川流不息</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>甄姬</td>
                <td>凝淚成冰</td>
            </tr>
        </tbody>
    </table>
</div>

<!-- js 部分 -->
<script>
    var checkAll = document.getElementById('check_all');
    var checkDan = document.getElementById('check_dan');
    var inputs = checkDan.getElementsByTagName('input');
    // 全選按鈕點擊後,下面全部的選項狀態根據全選按鈕的狀態來改變
    checkAll.onclick = function() {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = checkAll.checked;
        }
    }

    // 下面的按鈕控制上面的全選按鈕
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = function() {
            // 經過假設成立法 控制全選按鈕
            var flag = true; // 假設下面全部的按鈕選中了
            for (var i = 0; i < inputs.length; i++) {
                // 想辦法推翻假設
                if (!inputs[i].checked) { // 假設下面的按鈕有一個沒有被選中時
                    flag = false;
                    break;
                }
            }
            // 假設成立後 應該作什麼
            // if (flag) {
            //     checkAll.checked = true;
            // }
            // 能夠直接將flag的值給checkAll.checked 由於checked的值只有false 和 true
            checkAll.checked = flag;
        }
    }
    
    // 獲取反選按鈕
    var checkFx = document.getElementById('check_fx');
    // 給反選按鈕註冊點擊事件
    checkFx.onclick = function() {
        // 反選時只要讓下面按鈕的狀態取反就能夠了
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = !inputs[i].checked;
        }
    }
</script>

效果圖：

5.3 標籤自定義屬性

以前的屬性都是 HTML規範中的，標籤原本就有的屬性，對於標籤自定義的一些屬性，比較特殊。

在html頁面中，定義一個自定義屬性"aa"

<div id="box" title="嘻嘻" class="cls" aa="bb"></div>

在對應的DOM對象中是不存在的，在DOM對象中只會存在固有的那些屬性

var box = document.getElementById("box");
console.log(box.aa);        // undefined
console.log(box.title);     // "嘻嘻"
console.log(box.id);        // "box"
console.log(box.className); // "cls"

attribute系列

attribute系列方法用於獲取、設置移除標籤的屬性，不論是自定義的仍是固有的屬性。

一、獲取標籤的屬性 getAttribute

獲取標籤的屬性，不論是固有的仍是自定義的，均可以獲取獲得；
標籤裏的屬性名是什麼，獲取是的參數就傳什麼。

<!-- html 部分 -->
<div id="box" title="嘻嘻" class="cls" aa="bb"></div>

<!-- js 部分 -->
<script>
    var box = document.getElementById("box");
    console.log(box.getAttribute("aa"));        // bb
    console.log(box.getAttribute("title"));     // "嘻嘻"
    console.log(box.getAttribute("id"));        // "box"
    console.log(box.getAttribute("class"));     // "cls"
</script>

二、設置標籤的屬性 setAttribute

兩個參數，分別是：屬性名和屬性值，都是以字符串傳入；
若是標籤內有這個屬性名，屬性值將會被覆蓋，若是沒有這個屬性名，將會被從新設置

<!-- html 部分 -->
<div id="box" title="嘻嘻"></div>

<!-- js 部分 -->
<script>
    var box = document.getElementById("box");
    box.setAttribute("title","哈哈");
    box.setAttribute("aa","bb");
</script>

<!--
    從新設置過屬性名的div結構以下：
    <div id="box" title="哈哈" aa="bb"></div>
-->

三、移除標籤的屬性 removeAttribute

參數只有一個，就是須要移除的屬性名

<!-- html 部分 -->
<div id="box" title="嘻嘻" class=""cls aa="bb"></div>

<!-- js 部分 -->
<script>
    var box = document.getElementById("box");
    box.removeAttribute("title");
    box.removeAttribute("aa");
</script>

<!--
    移除過屬性名的div結構以下：
    <div id="box"></div>
-->

示例代碼：獲取當前點擊元素的索引 [12-標籤自定義屬性.html]

經過給當前點擊對象添加一個自定義屬性

<!-- html 部分 -->
<input type="button" value="索引0">
<input type="button" value="索引1">
<input type="button" value="索引2">
<input type="button" value="索引3">
<input type="button" value="索引4">
<input type="button" value="索引5">

<!-- js 部分 -->
<script>
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        // 將自定義屬性 存到當前對象裏
        // 也能夠經過setAttribute('index');可是這樣會在標籤裏顯示自定義屬性
        inputs[i].index = i;
        inputs[i].onclick = function() {
            // 獲取當前對象的自定義屬性index
            console.log("當前索引" + this.index);
        }
    }
</script>

效果圖：

5.4 排他思想(tab欄的主要思想)

排他思想可用一句話表述： 幹掉全部人，復活我本身。下面經過幾個小例子，咱們學習下排他思想

示例代碼：點擊按鈕使其改變背景，其他的背景不變 [13-點擊按鈕改變其背景.html]

<!-- css 部分 -->
<style>
    .now{
        background-color: cyan;
    }
</style>

<!-- html 部分 -->
<input type="button" value="點我，我就亮">
<input type="button" value="點我，我就亮">
<input type="button" value="點我，我就亮">
<input type="button" value="點我，我就亮">
<input type="button" value="點我，我就亮">
<input type="button" value="點我，我就亮">

<!-- js 部分 -->
<script>
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        // 給全部的button註冊點擊事件
        inputs[i].onclick = function() {
        
            // 幹掉全部人(讓全部的button移除類)
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].className = "";
            }
            // 復活我本身(給點擊的添加背景)
            this.className = "now";
        }
    }
</script>

效果圖：

5.5 tab 欄切換

前端的小夥伴們， tab欄的知識點必定要熟練的掌握，由於在網站中會大量的使用到它。

爲何會大量使用tab欄呢？

佈局的時候大量的使用div，空間消耗太大
使用tab欄的時候，將不須要顯示的div先隱藏，等到點擊的時候，再讓其顯示

示例代碼：tab欄切換 [14-tab欄切換.html]

<!-- css 部分 -->
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #box {
        width: 500px;
        margin: 100px auto;
        border: 1px solid #333;
    }
    
    ul {
        overflow: hidden;
    }
    
    li {
        float: left;
        width: 100px;
        height: 40px;
        font: 400 16px/40px "宋體";
        color: #fff;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.6);
        cursor: pointer;
    }
    
    #content {
        width: 500px;
        height: 340px;
    }
    
    #content div {
        width: 100%;
        height: 100%;
        display: none;
    }
    
    #content div.show {
        display: block;
    }
    
    #title li.show {
        color: #333;
        background-color: floralwhite;
    }
    
    img {
        width: 100%;
        height: 100%;
    }
</style>

<!-- html 部分 -->
<div id="box">
    <div id="title">
        <ul>
            <li class="show">導航1</li>
            <li>導航2</li>
            <li>導航3</li>
            <li>導航4</li>
            <li>導航5</li>
        </ul>
    </div>
    <div id="content">
        <div class="show">
            <img src="../image/01.jpg" alt="">
        </div>
        <div>
            <img src="../image/02.jpg" alt="">
        </div>
        <div>
            <img src="../image/03.jpg" alt="">
        </div>
        <div>
            <img src="../image/04.jpg" alt="">
        </div>
        <div>
            <img src="../image/05.jpg" alt="">
        </div>
    </div>
</div>

<!-- js 部分 -->
<script>
    var title = document.getElementById('title');
    var lis = title.getElementsByTagName('li');
    var content = document.getElementById('content');
    var divs = content.getElementsByTagName('div');

    // 給title註冊點擊事件 而且排他
    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onclick = function() {
            // 幹掉全部人
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = "";
                divs[i].className = "";
            }
            // 復活我本身
            this.className = "show";
            divs[this.index].className = "show";
        }
    }
</script>

效果圖：

6. 標籤內容

innerHTML和 innerText屬性，都是用來獲取和設置標籤內容的。可是二者仍是有區別的。

6.1 innerHTML

innerHTML能夠用於獲取和設置標籤的全部內容，包括 標籤和 文本內容。

示例代碼：

<div id="box">
    <h4>哈哈哈</h4>
</div>

<script>
    var box = document.getElementById('box');
    
    // 獲取標籤內容的時候，無論標籤仍是文本，都能獲取到
    console.log(box.innerHTML); // "<h4>哈哈哈</h4>"

    // innerHTML設置內容的時候，覆蓋原來內容，標籤也能生效，瀏覽器能解析這個標籤。
    box.innerHTML = "<h1>笑什麼笑！！</h1>"  // 此時頁面刷新後顯示h1格式的"笑什麼笑！！"
    box.innerHTML = "標籤還在嗎？";  // 直接顯示 「標籤還在嗎？」 h1標籤被文字替換
</script>

6.2 innerText

innerText能夠用於獲取和設置標籤的文本內容，會丟棄掉標籤

示例代碼：

<div id="box">
    <h4>哈哈哈</h4>
</div>

<script>
    var box = document.getElementById('box');
    
    // 獲取標籤內容的時候，只會獲取文本，標籤扔掉了
    console.log(box.innerText); // 哈哈哈
    
    // 設置標籤內容的時候，覆蓋原來內容，對標籤進行轉義（目的：把標籤直接當文原本用）
    box.innerText = "笑什麼笑"; // 頁面中的文字會被替換掉
    box.innerText = "<h1>笑什麼笑</h1>" // 頁面顯示"<h1>笑什麼笑</h1>"
</script>

兩者的區別：

innerHTML是W3C的標準屬性，而innerText是IE提出來的屬性，存在兼容性問題。所以更加推薦你們使用innerHTML。
innerText的做用：防止xss攻擊

6.3 innerText 的兼容性問題

瀏覽器兼容性：指網頁在各類瀏覽器上的顯示效果不一致。或者是一些屬性和方法在低版本的瀏覽器中不支持。

具體差異

innerText是IE提出來的屬性，所以低版本的火狐瀏覽器不支持這個屬性。
火狐有一個textContent屬性，效果跟innerText同樣，可是IE678不支持這個屬性

解決瀏覽器兼容性的處理方式：

能力檢測（經常使用）
代理檢測
怪癖檢測

書寫innerText的兼容性代碼：

//獲取標籤的innerText（兼容全部瀏覽器）
function getInnerText(element) {
    // 若是支持innerText，說明確定能獲取到內容，是一個字符串
    if (typeof element.innerText == "string") {
        // 兼容IE
        return element.innerText;
    } else {
        // 兼容火狐
        return element.textContent;
    }
}

//設置標籤的innerText（兼容全部瀏覽器）
function setInnerText(element, value) {
    //能力檢測
    if (typeof element.innerText == "string") {
        element.innerText = value;
    } else {
        element.textContent = value;
    }
}

上一篇：JavaScript 基礎知識 - 入門篇(二)
下一篇：JavaScript 基礎知識 - DOM篇(二)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。