腳本之家服務器常用軟件

快捷導航

JavaScript?WebAPI核心操作完全指南(附代碼)

更新時間：2026年01月24日 15:39:09 作者：Han.miracle

JavaScript WebAPI是操作網(wǎng)頁和瀏覽器的核心工具集,主要包括DOM（操作頁面結(jié)構(gòu)）和BOM（操作瀏覽器窗口）,這篇文章主要介紹了JavaScript?WebAPI核心操作的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

JavaScript(WebAPI)

WebAPI 背景知識

什么是 WebAPI

前面學習的 JS 分成三個大的部分：

ECMAScript：基礎語法部分
DOM API：操作頁面結(jié)構(gòu)
BOM API：操作瀏覽器

WebAPI 就包含了 DOM + BOM。

這個是 W3C 組織規(guī)定的（和制定 ECMAScript 標準的大佬們不是一伙人）。

前面學的 JS 基礎語法主要學的是 ECMAScript，這讓我們建立基本的編程思維，相當于練武需要先扎馬步。但是真正來寫一個更加復雜的有交互式的頁面，還需要 WebAPI 的支持，相當于各種招式。

什么是 API

API 是一個更廣義的概念，而 WebAPI 是一個更具體的概念，特指 DOM+BOM。

所謂的 API 本質(zhì)上就是一些現(xiàn)成的函數(shù) / 對象，讓程序猿拿來就用，方便開發(fā)。相當于一個工具箱，只不過程序猿用的工具箱數(shù)目繁多，功能復雜。

API 參考文檔

https://developer.mozilla.org/zh-CN/docs/Web/API可以在搜索引擎中按照 "MDN + API 關鍵字" 的方式搜索，也能快速找到需要的 API 文檔.

DOM 基本概念

什么是 DOM

DOM 全稱為 Document Object Model.W3C 標準給我們提供了一系列的函數(shù)，讓我們可以操作:

網(wǎng)頁內(nèi)容
網(wǎng)頁結(jié)構(gòu)
網(wǎng)頁樣式

DOM 樹

一個頁面的結(jié)構(gòu)是一個樹形結(jié)構(gòu)，稱為 DOM 樹.樹形結(jié)構(gòu)在數(shù)據(jù)結(jié)構(gòu)階段會介紹。就可以簡單理解成類似于 "家譜" 這種結(jié)構(gòu)

頁面結(jié)構(gòu)形如:

如何使用JavaScript操作網(wǎng)頁內(nèi)容？

如何使用JavaScript操作網(wǎng)頁結(jié)構(gòu)？

如何使用JavaScript操作網(wǎng)頁樣式？

獲取元素

這部分工作類似于 CSS 選擇器的功能。

querySelector

這個是 HTML5 新增的，IE9 及以上版本才能使用。前面的幾種方式獲取元素的時候都比較麻煩，而使用 querySelector 能夠完全復用前面學過的 CSS 選擇器知識，達到更快更精準的方式獲取到元素對象。

var element = document.querySelector(selectors);

selectors 包含一個或多個要匹配的選擇器的 DOM 字符串 DOMString。該字符串必須是有效的 CSS 選擇器字符串；如果不是，則引發(fā) SYNTAX_ERR 異常。
表示文檔中與指定選擇器組匹配的第一個元素的 html 元素 Element 對象。
如果想得到與指定選擇器匹配的所有元素的列表，則應該使用 querySelectorAll ()。
可以在任何元素上調(diào)用，不僅僅是 document。調(diào)用這個方法的元素將作為本次查找的根元素。

正因為參數(shù)是選擇器，所以一定要通過特殊符號指定是哪種選擇器。例如 .box 是類選擇器，#star 是 id 選擇器等。

<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>
    var elem1 = document.querySelector('.box');
    console.log(elem1);
    var elem2 = document.querySelector('#id');
    console.log(elem2);
    var elem3 = document.querySelector('h3 span input');
    console.log(elem3);
</script>

querySelectorAll

使用 querySelectorAll 用法和上面類似。

<div class="box">abc</div>
<div id="id">def</div>
<script>
    var elems = document.querySelectorAll('div');
    console.log(elems);
</script>

事件初識

基本概念

JS 要構(gòu)建動態(tài)頁面，就需要感知到用戶的行為。用戶對于頁面的一些操作（點擊，選擇，修改等）操作都會在瀏覽器中產(chǎn)生一個個事件，被 JS 獲取到，從而進行更復雜的交互操作。

瀏覽器就是一個哨兵，在偵查敵情（用戶行為）。一旦用戶有反應（觸發(fā)具體動作），哨兵就會點燃烽火臺的狼煙（事件），后方就可以根據(jù)狼煙來決定下一步的對敵策略。

事件三要素

事件源：哪個元素觸發(fā)的
事件類型：是點擊，選中，還是修改？
事件處理程序：進一步如何處理，往往是一個回調(diào)函數(shù)。

簡單示例

<button id="btn">點我一下</button>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("hello world");
    }
</script>

btn 按鈕就是事件源。
點擊就是事件類型。
function 這個匿名函數(shù)就是事件處理程序。
其中 btn.onclick = function() 這個操作稱為注冊事件 / 綁定事件。

注意：這個匿名函數(shù)相當于一個回調(diào)函數(shù)，這個函數(shù)不需要程序主動來調(diào)用，而是交給瀏覽器，由瀏覽器自動在合適的時機（觸發(fā)點擊操作時）進行調(diào)用。

操作元素

獲取 / 修改元素內(nèi)容

innerTextElement.innerText 屬性表示一個節(jié)點及其后代的 “渲染” 文本內(nèi)容。

// 讀操作
var renderedText = HTMLElement.innerText;
// 寫操作
HTMLElement.innerText = string;

不識別 html 標簽，是非標準的（IE 發(fā)起的），讀取結(jié)果不保留 html 源碼中的換行和空格。

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 讀取 div 內(nèi)部內(nèi)容
    console.log(div.innerText);
    // 修改 div 內(nèi)部內(nèi)容，界面上就會同步修改
    div.innerText = 'hello js <span>hello js</span>';
</script>

可以看到，通過 innerText 無法獲取到 div 內(nèi)部的 html 結(jié)構(gòu)，只能得到文本內(nèi)容。修改頁面的時候也會把 span 標簽當成文本進行設置。

innerHTMLElement.innerHTML 屬性設置或獲取 HTML 語法表示的元素的后代。

// 讀操作
var content = element.innerHTML;
// 寫操作
element.innerHTML = htmlString;

先獲取到事件源的元素
注冊事件

識別 html 標簽，W3C 標準的，讀取結(jié)果保留 html 源碼中的換行和空格。

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 讀取頁面內(nèi)容
    console.log(div.innerHTML);
    // 修改頁面內(nèi)容
    div.innerHTML = '<span>hello js</span>'
</script>

可以看到 innerHTML 不光能獲取到頁面的 html 結(jié)構(gòu)，同時也能修改結(jié)構(gòu)，并且獲取到的內(nèi)容保留的空格和換行。

innerHTML 用的場景比 innerText 更多。

獲取 / 修改元素屬性

可以通過 Element 對象的屬性來直接修改，就能影響到頁面顯示效果。

<img src="rose.jpg" alt="這是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    console.dir(img);
</script>

我們可以在代碼中直接通過這些屬性來獲取屬性的值。

<img src="rose.jpg" alt="這是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    // console.dir(img);
    console.log(img.src);
    console.log(img.title);
    console.log(img.alt);
</script>

還可以直接修改屬性

<img src="rose.jpg" alt="這是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    img.onclick = function () {
        if (img.src.lastIndexOf('rose.jpg') !== -1) {
            img.src = './rose2.png';
        } else {
            img.src = './rose.jpg';
        }
    }
</script>

此時點擊圖片就可以切換圖片顯示狀態(tài).(需要提前把兩個圖片準備好)

獲取 / 修改表單元素屬性

表單 (主要是指 input 標簽) 的以下屬性都可以通過 DOM 來修改

value: input 的值.
disabled: 禁用
checked: 復選框會使用
selected: 下拉框會使用
type: input 的類型 (文本，密碼，按鈕，文件等)

代碼示例：切換按鈕的文本.

假設這是個播放按鈕，在 "播放" - "暫停" 之間切換.

<input type="button" value="播放">
<script>
    var btn = document.querySelector('input');
    btn.onclick = function () {
        if (btn.value === '播放') {
            btn.value = '暫停';
        } else {
            btn.value = '播放';
        }
    }
</script>

代碼示例：點擊計數(shù)

使用一個輸入框輸入初始值 (整數(shù)), 每次點擊按鈕，值 + 1

<input type="text" id="text" value="0">
<input type="button" id="btn" value='點我+1'>

<script>
    var text = document.querySelector('#text');
    var btn = document.querySelector('#btn');

    btn.onclick = function () {
        var num = +text.value;
        console.log(num);
        num++;
        text.value = num;
    }
</script>

input 具有一個重要的屬性 value, 這個 value 決定了表單元素的內(nèi)容
如果是輸入框，value 表示輸入框的內(nèi)容，修改這個值會影響到界面顯式；在界面上修改這個值也會影響到代碼中的屬性
如果是按鈕，value 表示按鈕的內(nèi)容?？梢酝ㄟ^這個來實現(xiàn)按鈕中文本的替換

點擊全選按鈕，則選中所有選項
只要某個選項取消，則自動取消全選按鈕的勾選狀態(tài).

<input type="checkbox" id="all">我全都要 

<input type="checkbox" class="girl">貂蟬 

<input type="checkbox" class="girl">小喬 

<input type="checkbox" class="girl">安琪拉 

<input type="checkbox" class="girl">妲己 


<script>
    // 1. 獲取到元素
    var all = document.querySelector('#all');
    var girls = document.querySelectorAll('.girl');
    // 2. 給 all 注冊點擊事件, 選中/取消所有選項
    all.onclick = function () {
        for (var i = 0; i < girls.length; i++) {
            girls[i].checked = all.checked;
        }
    }
    // 3. 給 girl 注冊點擊事件.
    for (var i = 0; i < girls.length; i++) {
        girls[i].onclick = function () {
            // 檢測當前是不是所有的 girl 都被選中了.
            all.checked = checkGirls(girls);
        }
    }
    // 4. 實現(xiàn) checkGirls
    function checkGirls(girls) {
        for (var i = 0; i < girls.length; i++) {
            if (!girls[i].checked) {
                // 只要一個 girl 沒被選中, 就認為結(jié)果是 false(找到了反例)
                return false;
            }
        }
        // 所有 girl 中都沒找到反例, 結(jié)果就是全選中
        return true;
    }
</script>