JavaScript DOM API怎么使用

今天小編給大家分享一下JavaScript DOM API怎么使用的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

1.DOM API知識串講

1.1選中頁面標(biāo)簽

在DOM中，document頁面全局對象，里面的函數(shù)querySelector和querySelectorAll 用于選擇元素，通過傳入CSS選擇器來達(dá)到目的，選擇的范圍是位于該函數(shù)之前所存在的選擇器，沒找到返回值為null。

let obj = document.querySelector("選擇器");

如果選擇的標(biāo)簽在頁面有多個，只會選擇第一次出現(xiàn)在頁面的標(biāo)簽。

如果想要把這些元素都選中，就需要使用querySelectorAll函數(shù)。

用法和querySelector 是一樣的。

let var_name = document.querySelectorAll("選擇器");

該函數(shù)會返回一個類似與數(shù)組的對象，用法和數(shù)組一模一樣，但是除此之外，還能添加鍵值對。

對該數(shù)組里面的元素進(jìn)行展開，會發(fā)現(xiàn)很多屬性，這些屬性都是DOM原生的一些屬性。

1.2操作頁面標(biāo)簽的屬性

1.2.1事件

JS很多代碼都是通過“事件”來觸發(fā)的，比如鼠標(biāo)移動，鼠標(biāo)滾動，鍵盤輸入，修改瀏覽器大小等等都會產(chǎn)生事件。

事件的三要素：

1. 事件源，哪個HTML元素產(chǎn)生的事件。

2. 事件類型，如鼠標(biāo)移動，鼠標(biāo)點擊，窗口大小改變等。

3. 事件處理方式，當(dāng)事件產(chǎn)生后，要執(zhí)行什么js代碼。

例如，點擊事件操作代碼：

let button = document.querySelector("button");button.onclick = function (){
    alert("嘻嘻嘻！");}

栗子與運行效果：

圖中給出了一種等價的寫法，但是等價的寫法會使HTML代碼的結(jié)構(gòu)更加復(fù)雜，所以更建議圖中的第一種寫法。

1.2.2獲取元素

操作元素的分類：

• 元素的內(nèi)容。

• 元素的屬性。

• 元素的樣式。

首先，操作元素的內(nèi)容可以使用innerHTML屬性來獲取一個標(biāo)簽里面的內(nèi)容。

//1.選中標(biāo)簽let var_name = document.querySelector();//2.獲取內(nèi)容let content = var_name.innnerHTML;//3.修改內(nèi)容var_name.innerHTML = 修改內(nèi)容;

栗子：

效果：

我們發(fā)現(xiàn)相同的元素都被折疊輸出了，我們可以點擊開發(fā)者工具的設(shè)置欄，來設(shè)置展開輸出。

上面我們在所選中的標(biāo)簽里面放置的是文本，如果不是文本呢？其實也是一樣的，假設(shè)里面放了一個列表標(biāo)簽，那么拿到的結(jié)果就是里面標(biāo)簽的HTML代碼。

1.2.3修改元素

我們也可以來修改HTML的內(nèi)容，比如將列表改為一個標(biāo)題。

效果：

1.2.4計數(shù)器

根據(jù)獲取與修改元素的知識，我們可以來實現(xiàn)一個簡單的計數(shù)器，基本思路就是：

1. 獲取元素內(nèi)容

2. 修改元素內(nèi)容（加一操作）

3. 寫回到元素里面

效果：

欸，好像與我們的預(yù)期有點不一致，原因就是修改元素內(nèi)容時，拿到的內(nèi)容是字符串類型的，發(fā)生的是拼接效果，而不是算術(shù)效果，所以我們需要進(jìn)行轉(zhuǎn)換，那如何轉(zhuǎn)換？我們可以使用與java非常類似且同名的一個方法，它就是parseInt，同理如果需要小數(shù)那就有parseFloat，注意這里沒有parseDouble方法哦！

效果：

我們來豐富一下，加一個按鈕，可以完成減的功能。

頁面代碼：

    <style>
        #screen{
            width: 88px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 4px;

            background-color: rgb(100, 200, 100);
        }
        #plus, #sub{
            width: 42px;
            height: 20px;
            border-radius: 10px;
            margin-top: 4px;
            border: 0px;

            background-color: rgb(180, 200, 255);
        }
    </style>
    <p id="screen">
        0    </p>
    <button id="plus">計數(shù)+1</button>
    <button id="sub">計數(shù)-1</button>

    <script src="./document.js">

    </script>

JavaScript代碼：

let plus = document.querySelector("#plus");let sub = document.querySelector("#sub");let plus_func = function() {
    //1.獲取值
    let add_btn = document.querySelector("#screen");
    let val = add_btn.innerHTML;
    val = parseInt(val);
    //2.+1
    val = val + 1;
    //3.寫回
    add_btn.innerHTML = val;}let sub_func = function() {
    //1.獲取值
    let sub_btn = document.querySelector("#screen");
    let val =sub_btn.innerHTML;
    val = parseInt(val);
    //2.-1
    val = val - 1;
    //3.寫回
    sub_btn.innerHTML = val;}plus.onclick = plus_func;sub.onclick = sub_func;

效果：

但是對于但標(biāo)簽是沒有innerHTML屬性的，比如input標(biāo)簽，雖然不能通過innerHTML獲取屬性，但是可以通過value屬性獲取內(nèi)容。

頁面代碼：

    <input type="text" id="in" value="0">
    <button id="add">+1</button>

    <script src="./document.js">

    </script>

JavaScript代碼:

let add = document.querySelector("#add");add.onclick = function() {
    //1.獲取值
    let add_btn = document.querySelector("#in");
    let val = add_btn.value;
    val = parseInt(val);
    //2.+1
    val = val + 1;
    //3.寫回
    add_btn.value = val;}

效果：

1.2.5點擊圖片切換

我們想實現(xiàn)一個小案例，就是點擊一個圖片就能切換圖片，再點擊一次又能夠切換回來，我們可以利用DOM來修改元素的屬性來實現(xiàn)，在這個案例中，我們只需設(shè)置點擊事件為修改圖片的路徑，也就是src屬性，就可以實現(xiàn)圖片的切換。

假設(shè)第一張圖片的路徑是./jee.png，第二張圖片的路徑是./櫻花.png，實現(xiàn)圖片切換的基本思路為：

1. 獲取img元素。

2. 設(shè)置onclick。

3. 點擊事件的細(xì)節(jié)就是判斷路徑是否包含ee，包含就將src屬性換成./櫻花.png，反過來，判斷路徑是否包含櫻花，包含就將src屬性換成./jee.png

4. 可以使用indexOf方法判斷是否包含某個字符串。

JavaScript代碼：

let img = document.querySelector("img");img.onclick = function() {
    console.log(img.src);
    if (img.src.indexOf("ee") >= 0) {
        img.src = './櫻花.png';
    } else if (img.src.indexOf("櫻花")) {
        img.src = './jee.png'
    }}

頁面代碼：

    <style>
        img {
            height: 450px;
        }
    </style>
    <img src="./jee.png" alt="">

    <script src="./document.js">

    </script>

效果：

具體哪些屬性可以修改，我們可以使用console.dir函數(shù)來獲取某個元素DOM API能夠操作的全部屬性。

1.2.6暫停/播放切換

實現(xiàn)一個按鈕，點擊之后按鈕文字從"播放"變?yōu)?quot;暫停"，再點擊一次，按鈕文字從"暫停"變?yōu)?quot;播放"。

實現(xiàn)邏輯和切換邏輯是差不多的，具體看代碼吧：

JavaScript代碼：

let play = document.querySelector("#play");play.onclick = function(){
    if (play.value == "播放") {
        play.value = "暫停";
    } else if (play.value = "暫停") {
        play.value = "播放";
    }}

頁面代碼：

    <input id="play" type="button" value="播放">

實現(xiàn)效果：

1.2.7全選/取消全選

首先我們需要創(chuàng)建若干個復(fù)選框，只有一個全選框，我們選中全選框，其他元素需要被全部選中，一旦其他元素有未選中的，全選也必須是未選中的。

實現(xiàn)的基本思路：

1. 獲取全選框元素，獲取其他元素。

2. 注冊全選框的點擊事件，檢查其他框是否都被選中，如果選中，則全選框也選中，否則全選框不選中。

3. 對每一個其他復(fù)選框設(shè)置點擊事件，并將狀態(tài)與全選復(fù)選框關(guān)聯(lián)。

4. 每次點擊其他框都要檢測其他框是否都選中，以確定全選框的狀態(tài)。

JavaScript代碼：

let all = document.querySelector("#all");let gameroles = document.querySelectorAll(".gamerole");//checked屬性為checked表示選中狀態(tài)，為空字符串表示未選中//設(shè)置all的點擊事件all.onclick = function() {
    for (let i = 0; i < gameroles.length; i++) {
        //使gameroles元素狀態(tài)與all相同
        gameroles[i].checked = all.checked;
    }}//為gameroles的每個成員注冊點擊事件，并狀態(tài)確定all的狀態(tài)for (let i = 0; i < gameroles.length; i++) {
    gameroles[i].onclick = function() {
        all.checked = checkRole();
    }}//檢查所有成員是否選中，確定all的狀態(tài)function checkRole() {
    for (let i = 0; i < gameroles.length; i++) {
        //只要有一個成員未選中，all狀態(tài)就是未選中
        if (gameroles[i].checked == '') {
            return '';
        }
    }
    return "checked";}

頁面代碼：

    <input id="all" type="checkbox">全選 <br>
    <input class="gamerole" type="checkbox">胡桃 <br>
    <input class="gamerole" type="checkbox">可莉 <br>
    <input class="gamerole" type="checkbox">萬葉 <br>
    <input class="gamerole" type="checkbox">心海 <br>
    <input class="gamerole" type="checkbox">鍋巴 <br>

實際效果：

1.2.8點擊文字放大

DOM還可以修改style屬性，下面來嘗試運用選中元素與修改元素的知識，來實現(xiàn)點擊文字放大的一個小案例。

因為CSS中不區(qū)分大小寫，屬性與變量的命名采用脊柱式命名，而JS中-不能用于變量的命名，為了能夠?qū)SS屬性與JS變量名匹配，JS使用駝峰的形式表示CSS的屬性，例如font-size屬性，對應(yīng)JS的變量名為fontSize。

對于文字的放大，我們可以給文本所在的標(biāo)簽注冊一個點擊事件，每點擊一次就將字體大小增大，即修改CSS的font-size屬性。

JavaScript代碼：

let p = document.querySelector("p");p.onclick = function() {
    //1.獲取文字大小屬性
    let wordsSize = parseInt(p.style.fontSize);
    console.log("修改前" + wordsSize);
    //2.修改文字大小
    wordsSize += 5;
    //3.寫回到屬性
    p.style.fontSize = wordsSize + "px";
    console.log("修改后" + wordsSize);}

頁面代碼：

    <p style="font-size: 20px;">
        我是一段文本    </p>

實現(xiàn)效果：

1.2.9實現(xiàn)關(guān)燈/開燈（夜間/白間模式切換）

很多情況下一個個修改樣式屬性太麻煩了，我們也可以直接修改類屬性來達(dá)到效果，可以通過選中元素變量名.className來獲取和修改類屬性。

由于JavaScript里面的class是一個關(guān)鍵字，因此獲取元素的class不能使用class，而需要使用className，多個class屬性可以使用classList。

JavaScript代碼：

let p = document.querySelector('p');let button = document.querySelector('button');button.onclick = function(){
    if (p.className == "light") {
        p.className = 'black';
        button.innerHTML = '開燈';
    } else if (p.className == 'black') {
        p.className = 'light';
        button.innerHTML = '關(guān)燈';
    }}

頁面代碼：

    <style>        
        p{
            width: 500px;
            text-align: center;
        }
        .light, .black{
            width: 500px;
            height: 500px;

            text-align: center;
            line-height: 500px;
            font-size: 50px;
        }

        button{
            width: 100px;
            height: 50px;
            font-size: 20px;
            background-color: rgb(100,200,100);
            border: 0cm;
            border-radius: 10px;
        }
        .light{
            background-color: aliceblue;
            color: black;
        }
        .black{
            background-color: black;
            color: aliceblue;
        }
    </style>
    <p class="light" >我是一段文本</p>
    <p>
        <button>關(guān)燈</button>
    </p>

實際效果：

1.3操作頁面結(jié)點

1.3.1新增結(jié)點

除了修改元素的屬性和內(nèi)容，我們還可以在頁面上添加元素，要添加元素，那就得先新建一個元素，并且還需要依賴一個父元素（已經(jīng)創(chuàng)建好的），把這個新建的元素插入到父元素中就能實現(xiàn)元素的添加（依賴與DOM樹），這個操作也被稱為新增頁面結(jié)點。
新建元素：

let newp = document.createElement("元素標(biāo)簽");

補(bǔ)充元素內(nèi)容：

newp.屬性 = 值;

插入到DOM樹:

選中的父元素.appendChild(創(chuàng)建的子元素);

實例：
JavaScript代碼：

let cnt = 1;let add = document.querySelector("#add");let parent = document.querySelector("#container");add.onclick = function() {
    let newp = document.createElement("p");
    newp.id = "newp" + cnt;
    newp.className = cnt;
    newp.innerHTML = "hello";
    parent.appendChild(newp);
    console.log(newp);
    cnt++;}

頁面代碼：

    <p id="container"></p>
    <button id="add">新增節(jié)點</button>

實際效果：

1.3.2刪除結(jié)點

刪除結(jié)點就更容易了，在DOM樹上刪除結(jié)點就行。

刪除結(jié)點：

獲取到的父元素.removeChild(需要刪除的子元素);

實例：
JavaScript代碼：

let cnt = 1;let add = document.querySelector("#add");let parent = document.querySelector("#container");let arr = [];add.onclick = function() {
    let newp = document.createElement("p");
    arr[cnt-1] = newp;
    newp.id = "newp" + cnt;
    newp.className = cnt;
    newp.innerHTML = "hello";
    parent.appendChild(newp);
    console.log(newp);
    cnt++;}let del = document.querySelector("#del");del.onclick = function() {
    cnt--;
    if (cnt > 0) {
        console.log( "成功刪除一個元素");
        parent.removeChild(arr[cnt-1]);
    } else {
        console.log( "該父元素已經(jīng)沒有元素可以刪除了");
        cnt++;
    }}

頁面代碼：

    <p id="container"></p>
    <button id="add">新增節(jié)點</button>
    <button id="del">刪除節(jié)點</button>

實際效果：

2.綜合案例

2.1猜數(shù)字

目標(biāo)頁面

猜數(shù)字的邏輯我就不贅述了，不過里面需要取隨機(jī)數(shù)，我們可以通過js中的Math.random()函數(shù)來獲取隨機(jī)數(shù)，該函數(shù)生成隨機(jī)數(shù)的范圍是[0,1)區(qū)間內(nèi)的一個小數(shù)，我們需要的是[1,100]之間的整數(shù)，我們可以乘上100后向下取整加一就能得到目標(biāo)區(qū)間的數(shù)了，實現(xiàn)向下取整的函數(shù)是Math.floor(數(shù)字)。

然后前端頁面部分是通過HTML加上CSS彈性布局實現(xiàn)的，交互通過JavaScript DOM實現(xiàn)，下面的表白墻案例也是一樣的，就不多說了。

JavaScript代碼：

//獲取元素let input = document.querySelector("#guess");let ret = document.querySelector("#result");let cnt = document.querySelector("#count");let guessBtn = document.querySelector("#b1");let flash = document.querySelector("#b2");//生成1-100的隨機(jī)數(shù)//floor表示只取浮點數(shù)整數(shù)部分let ansNumber = Math.floor(Math.random() * 100) + 1;//實現(xiàn)按鈕猜數(shù)字的點擊事件guessBtn.onclick = function(){
    //輸入框沒有值，表示用戶沒有輸入，不處理
    if(input.value == '') {
        return;
    }
    let guessNumber = parseInt(input.value);
    if (guessNumber > ansNumber) {
        ret.innerHTML = "YO!猜大了！";
        ret.style.color = "red";
    } else if (guessNumber < ansNumber) {
        ret.innerHTML = "YO!猜小了！";
        ret.style.color = "red";
    } else {
        ret.innerHTML = "Bingo!猜對了！";
        ret.style.color = "green";
    }
    if (ret.innerHTML != "Bingo!猜對了！") {
        let guessCount = parseInt(cnt.innerHTML) + 1;
        cnt.innerHTML = guessCount;
    }}//點擊flash按鈕刷新頁面，重置游戲、flash.onclick = function() {
    location.reload();}

頁面代碼：

<!DOCTYPE html><html lang="ch"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜數(shù)字</title></head><body>

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: aliceblue;
        }
        h4 {
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: blueviolet;
            margin: 10px 0;
        }
        .guessp {
            width: 100%;
            height: 30px;
            text-align: center;
            display: flex;
            justify-content: center;
        }
        .guessp #b1{
            height: 20px;
            width: 20%;
            background-color: rgb(100,200,255);
            color: aliceblue;
            border: 0cm;
            border-radius: 5px;
        }
        .guessp #b1:active{
            background-color: gray;
        }
        .guessp #guess{
            width: 50%;
            height: 20px;
            border: 1px solid rgb(100,200,255);
            border-radius: 5px;
            text-indent: 0.6em;
            outline: none;
        }
        .guessp #number{
            width: 30%;
            text-align: right;
        }
        .guessp #in {
            width: 70%;
            margin-left: 2%;
            text-align: left;
        }
        .cnt, .ret{
            width: 100%;
            height: 30px;
            text-align: center;
        }
        .rev{
            width: 100%;
            height: 20px;
            text-align: center;
        }
        .rev #b2{
            margin: 4px;
            height: 20px;
            width: 100px;
            background-color: rgb(100,200,100);
            color: aliceblue;
            border: 0cm;
            border-radius: 5px;
        }
        .rev #b2:active{
            background-color: gray;
        }
        .ret, .cnt{
            width: 100%;
            height: 30px;
            display: flex;
            justify-content:center;
        }
        .guessp #messr, .guessp #messc {
            width: 30%;
            text-align: right;
        }
        .guessp #result, .guessp #count{
            width: 70%;
            text-align: left;
            margin-left: 5%;
        }


    </style>

    <h4>猜數(shù)字游戲</h4>
    <p class="guessp">
        <span id="number">要猜的數(shù)字:</span>
        <span id="in">
            <input id="guess" type="text" value placeholder="請猜1-100之間的數(shù)字，否則你永遠(yuǎn)猜不對!">
            <button id="b1">我就要猜它</button>
        </span>
    </p>
    
    <p class="guessp">
        <span id="messr">結(jié)果:</span>
        <span id="result">你還沒有猜哦！</span>
    </p>
    <p class="guessp">
        <span id="messc">次數(shù):</span>
        <span id="count">0</span>
    </p>
    <p class="rev">
        <button id="b2">
            開始/重新開始猜數(shù)字        </button>
    </p>


    <script src="./猜數(shù)字.js">

    </script>
    </body></html>

實際效果：

2.2表白墻

目標(biāo)頁面

JavaScript代碼：

//獲取元素let loveBtn = document.querySelector("#submit");let adv = ["深情地", "溫柔地", "隨便地", "緊張地", "幽默地", "滑稽地", "開心地", ""];//用戶點擊表白將表白記錄顯示在表白按鈕下面let record = [];let i = 0;loveBtn.onclick = function() {
    //1.獲取表白內(nèi)容
    let inputs = document.querySelectorAll("input");
    let from = inputs[0].value;
    let to = inputs[1].value;
    let message = inputs[2].value;
    //2.如果有一項內(nèi)天為空，不處理
    if (from == '' || to == '' || message == '') {
        return;
    }
    //3.匯總表白語言
    let n = adv.length;
    let index = (Math.floor(Math.random() * 1000) + 1) % n;
    let romAdv = adv[index];
    let loveMess = from + romAdv + "對" + to + "說" + message;
    record[i] = "留言" + (i+1) + ":" + loveMess;
    //4.新建結(jié)點，插入表白記錄
    let p = document.createElement("p");
    p.innerHTML = record[i];
    p.className = 'oh';
    let container = document.querySelector(".container");
    container.appendChild(p);
    i++;
    //5.表白完，清空輸入框
    for (let i = 0; i < inputs.length; i++) {
        inputs[i].value = '';
    }}

頁面代碼：

<!DOCTYPE html><html lang="ch"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墻</title></head><body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

            background-color: aliceblue;
        }
        .container {
            width: 100%;
        }
        h4 {
            text-align: center;
            padding: 30px 0;
            font-size: 24px;
            color:  rgb(255, 140,160);
        }
        p {
            text-align: center;
            color: gray;
            padding: 5px 0;
        }
        .row {
            width: 400px;
            height: 50px;
            margin: 0 auto;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span{
            width: 100px;
            height: 40px;
            text-align:center;
            padding-right: 0px;

            font-size: 24px;
            color:  rgb(255, 140,160);
        }
        .row input{
            width: 300px;
            height: 40px;
            border: 2px solid  rgb(255, 140,160);
            border-radius: 5px;
            outline: 0;
            text-align: left;
            padding-left: 0px;
            margin-left: 0px;
            text-indent: 0.4em;
            font-size: 20px;

            color: rgb(100,160,255);
        }
        .row #submit{
            width: 200px;
            height: 40px;
            border-radius: 10px;
            font-size: 24px;
            border: 0px solid  rgb(255, 140, 160);
            background-color:  rgb(255, 140, 160);
            color:  aliceblue;
            line-height: 40px;
            margin-top: 8px;
        }
        .row #submit:active{
            background-color: rgb(140,180,255);
        }
        .oh {
            width: 100%;
            height: 30px;
            margin-top: 8px;

            font-size: 16px;
            color: rgb(180,140,220);
            text-align: center;
            line-height: 30px;
        }
    </style>
    <p class="container">
        <h4>"真的是"表白墻</h4>
        <p>輸入后點擊提交, 會將信息顯示在表白按鈕下方</p>
        <p>這是一個正經(jīng)的表白墻，這真的不是一個表白墻</p>
        <p></p>
        <p class="row">
            <span>是誰:</span>
            <input type="text" value placeholder="大白">
        </p>
        <p class="row">
            <span>向誰:</span>
            <input type="text" value placeholder="小白">
        </p>
        <p class="row">
            <span>說:</span>
            <input type="text" value placeholder="你好">
        </p>
        <p class="row">
            <button id="submit">表白</button>
        </p>
    </p>
    
    <script src="./表白墻0.0.js"></script></body></html>

實際效果：

以上就是“JavaScript DOM API怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。