【JavaScript速成之路】一文帶你掌握DOM基礎

這篇具有很好參考價值的文章主要介紹了【JavaScript速成之路】一文帶你掌握DOM基礎。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

??個人主頁：「小楊」的csdn博客
??系列專欄：【JavaScript速成之路】
??希望大家多多支持??一起進步呀！

前言

小楊在上一篇帶著大家一起學習了JavaScript中的內置對象，JavaScript基礎的語法就結束了，下面我們將繼續(xù)學習JavaScript中的DOM，希望大家通過閱讀此文快速掌握DOM。

1，Web API簡介

1.1，初識Web API

JavaScript語言由三部分組成，分別是ECMAScript，BOM和DOM，其中ECMAScript是JavaScript語言的核心，它的內容包括JavaScript基礎語法，數(shù)組，函數(shù)，對象等；而Web API語法包括BOM和DOM。

【JavaScript速成之路】一文帶你掌握DOM基礎

1.2，Web API與API的關系

1，API

API（應用程序編程接口）是一些預先定義的函數(shù)，這些函數(shù)是由某個軟件開放給開發(fā)人員使用的，幫助開發(fā)者實現(xiàn)某種功能。開發(fā)人員無須訪問源碼，無須理解其內部工作機制細節(jié)，只需知道使用即可。

2，Web API

Web API是主要針對瀏覽器的API，在JavaScript語言中被封裝成了對象，通過調用對象的屬性和方法就可以使用Web API。

2，DOM簡介

2.1，DOM概述

文檔對象模型，是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口。

W3C定義了一系列的DOM接口，利用DOM可完成對HTML文檔內所有元素的獲取，訪問，標簽屬性和樣式的設置等操作。

在實際開發(fā)中，諸如改變盒子的大小，標簽欄的切換，購物車功能等帶有交互效果的頁面，都離不開DOM。

2.2，DOM樹

DOM中將HTML文檔視為樹結構，所以被稱為文檔樹模型，把文檔映射成樹形結構，通過節(jié)點對象對其處理，處理的結果可以加入到當前的頁面。

【JavaScript速成之路】一文帶你掌握DOM基礎

DOM中的專有名詞：

文檔（document）：一個頁面就是一個文檔。
元素（element）：頁面中的所有標簽都是元素。
節(jié)點（node）：頁面中的所有內容，在文檔樹中都是節(jié)點（元素節(jié)點，屬性節(jié)點，文檔節(jié)點，注釋節(jié)點等）。DOM中把所有的節(jié)點都看作成對象，這些對象擁有自己的屬性和方法。

3，元素獲取

在開發(fā)中，想要操作頁面的某一部分（如控制一個div元素的顯示或隱藏，修改元素div元素的內容），需要先獲取該部分對應的元素，在對其進行操作。

3.1，根據(jù)id獲取元素

getElementById()方法是由document對象提供的用于查找元素的方法。

該方法返回的是擁有指定id的元素，如果沒有找到指定id的元素則返回null，如果存在多個指定id的元素，則返回undefined。

需要特別注意，JavaScript中嚴格區(qū)分大小寫，所以書寫過程中一定要規(guī)范，否則程序會報錯。

根據(jù)id獲取元素語法格式：

document.getElementById('id');

通過一示例演示document.getElementById(‘id’)方法的使用：

<body>
    <div id="box">你好！</div>
    <script>
        //使用getElementById()獲取元素
        var Obox = document.getElementById('box');  //通過id獲取元素，并賦值給Obox
        console.log(Obox);                          //打印獲取元素
        console.log(typeof Obox);                   //檢測數(shù)據(jù)類型
        console.dir(Obox);                          //打印返回的元素對象，更好查看里面的屬性和方法
    </script>
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

3.2，根據(jù)標簽獲取元素

根據(jù)標簽名獲取元素的方式有2種，分別是通過document對象獲取元素和通過element對象獲取元素。

根據(jù)標簽獲取元素語法格式：

//方法1：通過document對象獲取元素
document.getElementsByTagName('標簽名');
//方法2：通過element對象獲取元素
element.getElementsByTagName('標簽名');

document對象是從整個文檔中查找元素。
element是元素對象的統(tǒng)稱，通過元素對象可以查找該元素的子元素或后代元素，實現(xiàn)局部查找元素的效果。

由于相同標簽的元素可能有多個，上述方法返回的不是單個元素對象，而是一個集合。如果標簽不存在，返回一個空的集合，不報錯。

這個集合是一個類數(shù)組對象，或稱為偽數(shù)組，它可以像數(shù)組一樣通過索引訪問元素，但不能使用push()等方法。

可以使用Array.isArray()方法來證明這個集合不是一個數(shù)組，而是一個偽數(shù)組。

通過具體代碼演示通過document對象獲取元素：

<body>
    <ul>
        <li>第1個li</li>
        <li>第2個li</li>
        <li>第3個li</li>
        <li>第4個li</li>
        <li>第5個li</li>
    </ul>
    <script>
        //使用getElementsByTagName()獲取元素
        var lis = document.getElementsByTagName('li');  //通過標簽名獲取元素，并賦值給lis
        console.log(lis);                               //打印獲取的元素，返回的是獲取過來的元素對象的集合，以偽代碼的形式存儲的
        console.log(lis[0]);                            //打印lis里面的第一個元素
        console.log('------------');
        for(var i = 0; i < lis.length; i++){            //使用遍歷的方式依次打印lis里面的元素對象
            console.log(lis[i]);
        }
    </script>
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

如果頁面中只有1個li，返回的還是偽數(shù)組的形式
如果頁面中沒有l(wèi)i這個元素，返回的是空的偽數(shù)組的形式

通過具體代碼演示通過element對象獲取元素的操作：

<body>
    <ul>
        <li>蘋果</li><li>香蕉</li><li>葡萄</li><li>西瓜</li>
    </ul>
    <ol id="ol">
        <li>紅色</li><li>綠色</li><li>黃色</li><li>藍色</li>
    </ol>
    <script>
        //法1：
        var ol = document.getElementsByTagName('ol');  //偽數(shù)組形式不可以作為父元素
        console.log(ol[0].getElementsByTagName('li')); //父元素必須是單個對象(必須指明是哪一個元素)
        //法2：
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

3.3，根據(jù)name獲取元素

通過name屬性獲取元素應使用document.getElementsByName(）方法，一般用于獲取表單元素。

name屬性的值不要求必須是唯一的，多個元素也可以有相同的名字，如表單中的單選框和復選框。

根據(jù)name獲取元素的語法格式：

document.getElementsByName('name屬性值');

通過以復選框為例演示根據(jù)name獲取元素的操作：

<body>
    <p>請選擇你最喜歡的游戲（多選）</p>
    <label for=""><input type ='checkbox' name = 'game' value = '王者'>王者榮耀</label>
    <label for=""><input type ='checkbox' name = 'game' value = '和平'>和平精英</label>
    <label for=""><input type ='checkbox' name = 'game' value = '炫斗'>QQ炫斗</label>
    <script>
        //getElementsByName()獲取元素
        var games = document.getElementsByName('game');
        games[0].checked = true;
    </script>
</body>

效果如下圖：

3.4，HTML5新增獲取元素

HTML5中為document對象新增了getElementsByClassName()，querySelector()和querySelectorAll()方法，在使用時考慮兼容性問題。

1，根據(jù)類名獲取

getElementsByClassName()方法，用于通過類名來獲取某些元素的集合。

根據(jù)類名獲取元素語法格式：

document.getElementsByClassName('類名');

下述對根據(jù)類名獲取元素的操作進行演示：

<body>
    <span class='one'>語文</span> <span class='two'>數(shù)學</span>
    <span class='one'>化學</span> <span class='two'>英語</span>
    <script>
        //根據(jù)類名獲取元素getElementsByClassName()
        var Ospan1 = document.getElementsByClassName('one');
        var Ospan2 = document.getElementsByClassName('two'); 
        Ospan1[0].style.fontWeight = 'bold';
        Ospan2[1].style.background = 'red';
    </script>
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

2，querySelector()和querySelectorAll()

querySelector()方法用來訪問指定選擇器的第一個元素對象。
querySelectorAll()方法用于訪問指定選擇器的所有元素對象集合。

下述對querySelector()和querySelectorAll()兩種方法的使用進行演示：

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首頁</li>
            <li>產品</li>
        </ul>
    </div>
    <script>
        var firstBox = document.querySelector('.box');
        console.log(firstBox);      //獲取class為box的第一個div
        var list = document.querySelector('li');
        console.log(list);          //獲取匹配到的第一個li
        var nav = document.querySelector('#nav');
        console.log(nav);           //獲取id為nav的第一個div
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);        //獲取class為box的所有div
        var lists = document.querySelectorAll('li');
        console.log(lists);         //獲取匹配到的所有l(wèi)i
    </script>
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

3.5，document對象的屬性

屬性	說明
document.body	返回文檔的body元素
document.title	返回文檔的title元素
document.documentElement	返回文檔的html元素
document.forms	返回對文檔所有的form對象的引用
document.images	返回對文檔所有的image對象的引用

對document對象的屬性操作進行演示：

<body>
    <script>
        var bodyElement = document.body;
        console.log(bodyElement);   //返回文檔的body元素

        var htmlElement = document.documentElement;
        console.log(htmlElement);   //返回文檔的html元素

        var titleElement = document.title;
        console.log(titleElement);  //返回文檔的title元素

        var fromElement = document.forms;
        console.log(fromElement);   //返回文檔的form元素

        var imageElement = document.image;
        console.log(imageElement);   //返回文檔的image元素
    </script>
    
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

4，事件基礎

4.1，事件概述

在開發(fā)中，JavaScript幫助開發(fā)者創(chuàng)建帶有交互效果的頁面，是依靠事件來實現(xiàn)的。

事件是指可以被JavaScript偵測到的行為，是一種“觸發(fā)-響應”的機制。

這些行為指的是頁面的加載，鼠標點擊頁面，鼠標指針滑過區(qū)域等具體操作動作，它對實現(xiàn)交互效果有很重要的作用。

4.2，事件三要素

事件由事件源，事件類型，事件處理程序3部分組成，又稱事件三要素。

事件源：觸發(fā)事件的元素
事件類型：如onclick 單擊事件
事件處理程序：事件觸發(fā)后要執(zhí)行的代碼（函數(shù)形式），也稱事件處理函數(shù)。

簡便理解為：誰觸發(fā)了事件，觸發(fā)了什么事件，觸發(fā)事件以后要做什么。

在開發(fā)中，為了元素在觸發(fā)事件時執(zhí)行特定的代碼，需要為元素注冊事件，綁定事件和處理函數(shù)。

具體步驟：首先獲取元素，其次注冊事件，最后編寫事件處理代碼。

通過演示為按鈕綁定點擊事件來演示事件的使用：

<body>
    <button id="btn">單擊有驚喜！?。?span id="n5n3t3z"    class="token tag"></button>
    <script>
        //步驟1：獲取事件源
        var btn = document.getElementById('btn');
        //步驟2：注冊事件btn.onclick
        btn.onclick = function(){ 
        //步驟3：添加事件處理程序（采取函數(shù)賦值的方式）
            alert('你上當了?。?！');
        }
    </script>
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

5，元素操作

在JavaScript中，DOM操作可以改變網頁內容，結構和樣式。

5.1，元素內容操作

在JavaScript中，想要操作元素內容，必須先獲取到該元素。

屬性	說明
element.innerHTML	設置或返回元素開始和結束標簽之間的HTML，包括HTML標簽，同時保留空格和換行
element.innerText	設置或返回元素的文本內容，在返回的時候會去除HTML標簽和多余的空格，換行，在設置時會進行特殊字符轉義
element.textContent	設置或返回指定節(jié)點的文本內容，同時保留空格和換行

分別使用innerHTML，innerText，textContent屬性在控制臺輸出一段HTML文本：

<body>
    <div>床前明月光</div>
    <p>
        疑是地上霜
        <a href="">舉頭望明月</a>
    </p>
    <script>
        //獲取元素
        var div = document.querySelector('div');
        //通過innerText修改元素內容
        div.innerText = '低頭思故鄉(xiāng)';
        //獲取元素
        var p = document.querySelector('p');
        //通過innerHTML打印元素內容
        console.log(p.innerHTML);
        //通過innerText打印元素內容
        console.log(p.innerText);
        //通過textContent打印元素內容
        console.log(p.textContent);
    </script>
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

總結：

innerHTML在使用時會保持編寫的格式以及標簽樣式。
innerText則是去掉所有的格式以及標簽的純文本內容。
textContent屬性在去掉標簽后保留原有的文本格式。

5.2，元素屬性操作

在DOM中，HTML屬性操作是指使用JavaScript來操作一個元素的HTML屬性。

一個元素包含多個屬性。例如，對于一個img圖片來說，可以操作的屬性有src，title等屬性。

通過單擊按鈕操作img元素屬性來演示操作元素的屬性：

<body>
    <button id="wz">王者獨角獸</button>
    <button id="sl">圣靈草王</button>
    <br>
    <img src="" alt="" >
    <script>
        //1,獲取元素
        var btn1 = document.getElementById('wz');
        var btn2 = document.getElementById('sl');
        var img = document.querySelector('img');
        //2,注冊事件
        btn1.onclick = function(){
            img.src = 'img1.png';
        };
        btn2.onclick = function(){
            img.src = 'img2.png';
        };
    </script>
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

5.3，元素樣式操作

操作元素樣式的方法有兩種方式，一是通過操作style屬性，另外一種是通過操作className屬性。

1，操作style屬性

對于元素對象的樣式，可以直接通過“元素對象.style.樣式屬性名’的方式操作。

樣式屬性名對應css樣式名，但需要去掉css樣式中的半字線"-"，并將半字線后面的英文的首字母大寫。

例如，設置字體大小的樣式名font-size，對應的樣式屬性名為fontSize…

常見style屬性中CSS樣式名稱：

名稱	說明
background	設置或返回元素的背景屬性
backgroundColor	設置或返回元素的背景色
display	設置或返回元素的顯示類型
fontSize	設置或返回元素的字體大小
height	設置或返回元素的高度
left	設置或返回定位元素的左部位置
listStyleType	設置或返回列表項標記的類型
overflow	設置或返回如何處理呈現(xiàn)在元素框外的內容
textAlign	設置或返回文本的水平對齊方式
textDecoration	設置或返回文本的修飾
textIndex	設置或返回文本第一行的縮進
transform	向元素應用2D或3D轉換

通過對元素樣式的添加來演示如何采取style屬性來操作元素樣式：

<style>
    div{
        background-color: red;
    }
</style>
<body>
    <div id="box"></div>
    <script>
        //操作style屬性操作元素樣式
        //1,獲取元素對象
        var box = document.querySelector('#box');
        //添加元素對象的樣式width，height
        box.style.width = '100px';
        box.style.height = '100px';
        //修改元素對象的樣式backgroundColor
        box.style.backgroundColor = 'yellow';
    </script>
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

2，操作className屬性

在開發(fā)中，如果樣式修改較多，可以采取操作類名的方式更改元素樣式，語法為“對象.className”。

訪問className屬性的值表示獲取元素的類名，為className屬性賦值表示更改元素類名。

如果元素有多個類名，在className中以空格分隔。

如何使用className更改元素的樣式？

1）編寫html結構代碼

2）單擊div元素更改元素的樣式

3）在style中添加一個charge類

4）單擊div盒子，查看效果

通過具體代碼演示通過使用className更改元素的樣式的操作：

<style>
    div{
        width:200px;
        height:200px;
        background-color: red;
    }

    .charge{
        width:400px;
        height:400px;
        background-color: pink;
    }
</style>
<body>
    <div class="one">文本內容</div>
    <script>
        var test = document.querySelector('div');
        test.onclick = function(){
            this.className = 'charge';
        }
    </script>
</body>

效果如下圖：

【JavaScript速成之路】一文帶你掌握DOM基礎

6，屬性操作

在HTML中，元素可被劃分為2類，即內置屬性和自定義屬性。

內置屬性就是元素自帶的屬性，如id，class，style，title，hidden等
自定義屬性就是程序猿在實際開發(fā)時為元素添加的屬性，如index …

6.1，屬性值獲取

在DOM中，內置屬性值的獲取可以使用elememt.屬性 ，而自定義屬性的獲取卻不能直接使用該語法。

那么如何對自定義屬性進行獲取呢？在DOM中，自定義屬性的獲取可以使用element.getAttribute('屬性')。

通過具體代碼演示屬性值獲取的操作：

<body>
    <div id="demo" index="1"></div>
    <script>
        var div = document.querySelector('div');
        //獲取元素的屬性值法1：element.屬性  獲取內置屬性值(元素本身自帶的屬性) index為自定義屬性 故無法獲取
        console.log(div.id);
        console.log(div.index);

        //獲取元素的屬性值法2：element.getAttribute('屬性')  只要獲取自定義屬性(標準) 我們自己自定義的屬性稱為自定義屬性
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    </script>
</body>

示例效果:

【JavaScript速成之路】一文帶你掌握DOM基礎

6.2，屬性值設置

在DOM中，內置屬性值的設置可以使用elememt.屬性 = 屬性值 的方式，而自定義屬性的獲取卻不能直接使用該語法。

那么如何對自定義屬性進行設置呢？在DOM中，自定義屬性的設置可以使用element.setAttribute('屬性')。

通過具體代碼演示內置屬性值設置的操作：

<body>
    <div></div>
    <script>
        div = document.querySelector('div');
        //設置元素的屬性值法1：element.屬性 = '值' 針對內置屬性(標準)
        div.id = 'demo1';
        div.className = 'nav';
        div.index = '1';
    </script>
</body>

示例效果：

【JavaScript速成之路】一文帶你掌握DOM基礎

通過具體代碼演示自定義屬性值設置的操作：

<body>
    <div></div>
    <script>
        div = document.querySelector('div');
        //設置元素的屬性值法2：element.setAttribute('屬性','值')  主要針對自定義屬性(標準)
        div.setAttribute('index','2');
        div.setAttribute('class','footer');
    </script>
</body>

示例效果：

【JavaScript速成之路】一文帶你掌握DOM基礎

6.3，屬性值移除

在DOM中，內置屬性和自定義屬性的值移除都是通過element.removeAttribute('屬性') 的方式。

通過具體代碼演示屬性值移除的操作：

<body>
    <div id="demo" class="nav" index="2"></div>
    <script>
        var div = document.querySelector('div');
        div.removeAttribute('id');
        div.removeAttribute('class');
        div.removeAttribute('index');
    </script>
</body>

示例效果：

【JavaScript速成之路】一文帶你掌握DOM基礎

7，自定義屬性

一般自定義屬性可以通過getAttribute('屬性') 方法來獲取。

但有些自定義的屬性很容易引起歧義，難以判斷其是內置屬性還是自定義屬性。

因此，HTML5新增了自定義屬性的規(guī)范，通過data-屬性名 的方式來進行自定義屬性的設置。

7.1，屬性值設置

元素的data-屬性名 自定義屬性的設置有2種方式，即在HTML中設置和在JavaScript中設置的兩種方式。

1，在HTML中設置自定義屬性

<body>
    <div data-index="2"></div>
</body>

【JavaScript速成之路】一文帶你掌握DOM基礎

2，在JavaScript中設置自定義屬性

在JavaScript中，設置自定義屬性的方式有兩種，

元素對象.dataset.屬性名='屬性值'
元素對象.setAttribute('屬性'，屬性值)

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.dataset.index = '2';
        div.setAttribute('data-name','anna');
    </script>
</body>

【JavaScript速成之路】一文帶你掌握DOM基礎

7.2，屬性值獲取

在DOM中，自定義屬性的屬性值的獲取方式有2種。

元素對象.getAttribute('屬性') ，該方法可以獲取內置屬性或者自定義屬性，無兼容性問題，推薦使用。
HTML5新增的元素對象.dataset('屬性')或者元素對象.dataset['屬性'] ，有兼容性問題，從IE 11 才支持使用，不推薦使用。

如果自定義屬性里面包含有多個連字符（-）時，獲取的時候采用駝峰命名法。

HTML5新增的獲取自定義屬性的方法，只能只能獲取以data-開頭的自定義屬性。

<body>
    <div getTim="20" data-index="2" data-list-name="anna"></div>
    <script>
        var div = document.querySelector('div');

        // 方式1：通過`元素對象.getAttribute('屬性')`獲取屬性值
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));

        // 方式2：通過HTML5新增的方式來獲取屬性值，只能獲取以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>
</body>

效果如下：

【JavaScript速成之路】一文帶你掌握DOM基礎

結語

這就是本期博客的全部內容啦，想必大家已經對Javascript中的DOM的相關內容有了全新地認識和理解吧，如果有什么其他的問題無法自己解決，可以在評論區(qū)留言哦！

最后，如果你覺得這篇文章寫的還不錯的話或者有所收獲的話，麻煩小伙伴們動動你們的小手，給個三連唄（點贊??，評論?，收藏??），多多支持一下！各位的支持是我最大的動力，后期不斷更新優(yōu)質的內容來幫助大家，一起進步。那我們下期見！

【JavaScript速成之路】一文帶你掌握DOM基礎文章來源地址http://www.zghlxwxcb.cn/news/detail-425485.html

到了這里，關于【JavaScript速成之路】一文帶你掌握DOM基礎的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網

【JavaScript速成之路】一文帶你掌握DOM基礎

前言

1，Web API簡介

1.1，初識Web API

1.2，Web API與API的關系

2，DOM簡介

2.1，DOM概述

2.2，DOM樹

3，元素獲取

3.1，根據(jù)id獲取元素

3.2，根據(jù)標簽獲取元素

3.3，根據(jù)name獲取元素

3.4，HTML5新增獲取元素

3.5，document對象的屬性

4，事件基礎

4.1，事件概述

4.2，事件三要素

5，元素操作

5.1，元素內容操作

5.2，元素屬性操作

5.3，元素樣式操作

6，屬性操作

6.1，屬性值獲取

6.2，屬性值設置

6.3，屬性值移除

7，自定義屬性

7.1，屬性值設置

7.2，屬性值獲取

結語

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

二維碼2

【JavaScript速成之路】一文帶你掌握DOM基礎

前言

1，Web API簡介

1.1，初識Web API

1.2，Web API與API的關系

2，DOM簡介

2.1，DOM概述

2.2，DOM樹

3，元素獲取

3.1，根據(jù)id獲取元素

3.2，根據(jù)標簽獲取元素

3.3，根據(jù)name獲取元素

3.4，HTML5新增獲取元素

3.5，document對象的屬性

4，事件基礎

4.1，事件概述

4.2，事件三要素

5，元素操作

5.1，元素內容操作

5.2，元素屬性操作

5.3，元素樣式操作

6，屬性操作

6.1，屬性值獲取

6.2，屬性值設置

6.3，屬性值移除

7，自定義屬性

7.1，屬性值設置

7.2，屬性值獲取

結語

相關文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

二維碼2

1，Web API簡介

1.1，初識Web API

2，DOM簡介

2.1，DOM概述

3，元素獲取

3.2，根據(jù)標簽獲取元素

3.3，根據(jù)name獲取元素

3.4，HTML5新增獲取元素

3.5，document對象的屬性

4.1，事件概述

4.2，事件三要素

5，元素操作

5.1，元素內容操作

5.2，元素屬性操作

5.3，元素樣式操作

6.1，屬性值獲取

6.2，屬性值設置

7，自定義屬性

7.1，屬性值設置

支付寶掃一掃領取紅包，優(yōu)惠每天領