JavaScript 基礎(chǔ)知識 - DOM篇(一)

cuieney 發(fā)布于2019-08-22 13:40 / 2483人閱讀

摘要：前言本篇文章是基礎(chǔ)知識的篇，如果前面的基礎(chǔ)知識入門篇看完了，現(xiàn)在就可以學(xué)習(xí)了。基本概念分為三個部分。在這個基礎(chǔ)上使用一些新特性，高級瀏覽器支持，低級瀏覽器不支持。在對象中的屬性是一個布爾值，只有和。

DOM 前言

本篇文章是JavaScript基礎(chǔ)知識的DOM篇，如果前面的《JavaScript基礎(chǔ)知識-入門篇》看完了，現(xiàn)在就可以學(xué)習(xí)DOM了。

注意： 所有的案例都在這里鏈接: 提取密碼密碼: 9as4，文章中的每個案例后面都有對應(yīng)的序號。

1. DOM 基本概念

javascript 分為三個部分：ECMAScript、DOM、BOM。想要做出好看的頁面效果，就需要學(xué)習(xí)DOM，學(xué)習(xí)了DOM之后就可以操作頁面元素了。

DOM: 用來操作頁面元素的一套工具

BOM: 用來操作瀏覽器一些行為的一套工具

什么是DOM？

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

文檔對象模型

HTML頁面的所有的內(nèi)容，包括標(biāo)簽、文本、注釋、屬性等，在JS的DOM中，都存在一個一個的對象與之對應(yīng)。因此當(dāng)我們想要操作這些HTML的內(nèi)容時，只需要操作這些對象即可。

節(jié)點(diǎn)：頁面中所有的內(nèi)容，包括標(biāo)簽、文本、注釋、屬性都被封裝成了對象，我們把這些對象叫做節(jié)點(diǎn)。

元素：我們最常操作的是標(biāo)簽節(jié)點(diǎn)，也叫元素。

文檔樹模型

HTML結(jié)構(gòu)是一個樹形結(jié)構(gòu)，同樣的，這些對應(yīng)的對象也是一個樹形的結(jié)構(gòu)，樹形結(jié)構(gòu)的好處是能夠非常容易找到某個節(jié)點(diǎn)的子節(jié)點(diǎn)、父節(jié)點(diǎn)、兄弟節(jié)點(diǎn)。

子節(jié)點(diǎn)：child

兄弟節(jié)點(diǎn)：sibling

父節(jié)點(diǎn)：parent

樹形結(jié)構(gòu)示意圖：

API

Application Programming Interface：應(yīng)用程序編程接口，其實(shí)就是一大堆的方法，我們可以把API看成是工具。做不同的事情需要不同的工具。

XML

Extensible Markup Language：可擴(kuò)展性標(biāo)記語言，通常用于配置文件，或者和json一樣用于數(shù)據(jù)交互。

2. 查找 DOM 對象

想要操作DOM，首先需要獲取到DOM對象

2.1 根據(jù)id獲取元素

document.getElementById("id名");

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

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

示例代碼：

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

效果圖：

3.5 表單獲得、失去焦點(diǎn)事件

表單獲得焦點(diǎn)時觸發(fā)事件，表單失去焦點(diǎn)時觸發(fā)事件

1、語法(獲得焦點(diǎn))

事件源.onfocus = function(){
    // 獲得焦點(diǎn)后執(zhí)行的函數(shù)
}

2、語法(失去焦點(diǎn))

事件源.onblur = function(){
    // 失去焦點(diǎn)后執(zhí)行的函數(shù)
}

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

獲得焦點(diǎn)時input輸入框清空，失去焦點(diǎn)時恢復(fù)提示信息

效果圖：

3.6 其他觸發(fā)事件匯總

在js中觸發(fā)事件有很多種，這里就不一一列舉了，用法和上面的其實(shí)是一樣的，你只需要知道它的事件名即可。

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

4. 優(yōu)雅降級和漸進(jìn)增強(qiáng)

漸進(jìn)增強(qiáng)：基于所有瀏覽器完成基本的功能。在這個基礎(chǔ)上使用一些新特性，高級瀏覽器支持，低級瀏覽器不支持。優(yōu)雅降級：先基于主流的、高級的瀏覽器實(shí)現(xiàn)功能。對于那些不支持的瀏覽器，盡量去支持，如果支持不了就放棄。

5. 屬性操作 5.1 普通標(biāo)簽屬性

在標(biāo)簽中存在的屬性，在DOM對象中同樣存在著對應(yīng)的屬性，只要修改了標(biāo)簽的屬性或者DOM對象的屬性，兩邊都會變化。常見的屬性有：title、src、href、className、id等。

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





美女相冊案例

效果圖：

2、selected：多選菜單的默認(rèn)顯示選擇項

當(dāng)select多選表單里的option選項設(shè)置selected="true"的時候，默認(rèn)顯示該選項。

在DOM對象中selected的屬性是一個布爾值，只有false和true。

示例代碼：點(diǎn)擊按鈕隨機(jī)切換option的默認(rèn)選項 [10-select默認(rèn)選中項.html]

效果圖：

3、checked：選擇框的默認(rèn)選中

當(dāng)checkbox選擇框設(shè)置checked選項的時候，默認(rèn)選中。

在DOM對象中，checked的屬性是一個布爾值，只有false和true。

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

	英雄	技能
	羋月	永生之血
	貂蟬	語·花印
	大喬	川流不息
	甄姬	凝淚成冰

效果圖：

5.3 標(biāo)簽自定義屬性

之前的屬性都是HTML規(guī)范中的，標(biāo)簽本來就有的屬性，對于標(biāo)簽自定義的一些屬性，比較特殊。

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

在對應(yīng)的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系列方法用于獲取、設(shè)置移除標(biāo)簽的屬性，不管是自定義的還是固有的屬性。

1、獲取標(biāo)簽的屬性 getAttribute

獲取標(biāo)簽的屬性，不管是固有的還是自定義的，都可以獲取得到；

標(biāo)簽里的屬性名是什么，獲取是的參數(shù)就傳什么。

2、設(shè)置標(biāo)簽的屬性 setAttribute

兩個參數(shù)，分別是：屬性名和屬性值，都是以字符串傳入；

如果標(biāo)簽內(nèi)有這個屬性名，屬性值將會被覆蓋，如果沒有這個屬性名，將會被重新設(shè)置

3、移除標(biāo)簽的屬性 removeAttribute

參數(shù)只有一個，就是需要移除的屬性名

示例代碼：獲取當(dāng)前點(diǎn)擊元素的索引 [12-標(biāo)簽自定義屬性.html]

通過給當(dāng)前點(diǎn)擊對象添加一個自定義屬性

效果圖：

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

排他思想可用一句話表述：干掉所有人，復(fù)活我自己。下面通過幾個小例子，我們學(xué)習(xí)下排他思想

示例代碼：點(diǎn)擊按鈕使其改變背景，其余的背景不變 [13-點(diǎn)擊按鈕改變其背景.html]

效果圖：

5.5 tab 欄切換

前端的小伙伴們，tab欄的知識點(diǎn)一定要熟練的掌握，因?yàn)樵诰W(wǎng)站中會大量的使用到它。

為什么會大量使用tab欄呢？

布局的時候大量的使用div，空間消耗太大

使用tab欄的時候，將不需要顯示的div先隱藏，等到點(diǎn)擊的時候，再讓其顯示

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






    
        
            導(dǎo)航1
            導(dǎo)航2
            導(dǎo)航3
            導(dǎo)航4
            導(dǎo)航5

效果圖：

6. 標(biāo)簽內(nèi)容

innerHTML和innerText屬性，都是用來獲取和設(shè)置標(biāo)簽內(nèi)容的。但是兩者還是有區(qū)別的。

6.1 innerHTML

innerHTML可以用于獲取和設(shè)置標(biāo)簽的所有內(nèi)容，包括標(biāo)簽和文本內(nèi)容。

示例代碼：


    哈哈哈

6.2 innerText

innerText可以用于獲取和設(shè)置標(biāo)簽的文本內(nèi)容，會丟棄掉標(biāo)簽

示例代碼：


    哈哈哈

二者的區(qū)別：

innerHTML是W3C的標(biāo)準(zhǔn)屬性，而innerText是IE提出來的屬性，存在兼容性問題。因此更加推薦大家使用innerHTML。

innerText的作用：防止xss攻擊

6.3 innerText 的兼容性問題

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

具體差別

innerText是IE提出來的屬性，因此低版本的火狐瀏覽器不支持這個屬性。

火狐有一個textContent屬性，效果跟innerText一樣，但是IE678不支持這個屬性

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

能力檢測（常用）

代理檢測

怪癖檢測

書寫innerText的兼容性代碼：

//獲取標(biāo)簽的innerText（兼容所有瀏覽器）
function getInnerText(element) {
    // 如果支持innerText，說明肯定能獲取到內(nèi)容，是一個字符串
    if (typeof element.innerText == "string") {
        // 兼容IE
        return element.innerText;
    } else {
        // 兼容火狐
        return element.textContent;
    }
}

//設(shè)置標(biāo)簽的innerText（兼容所有瀏覽器）
function setInnerText(element, value) {
    //能力檢測
    if (typeof element.innerText == "string") {
        element.innerText = value;
    } else {
        element.textContent = value;
    }
}

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

云服務(wù)器 GPU云服務(wù)器基礎(chǔ)篇之基礎(chǔ)篇 java語言程序設(shè)計基礎(chǔ)篇 javascript dom

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/92384.html

發(fā)表評論

登陸后可評論

0條評論

cuieney

男|高級講師

我要關(guān)注我要私信

TA的文章

Java性能壓測工具及其調(diào)優(yōu)

閱讀 2875·2021-10-08 10:04
VoLLcloud-香港CERA-VPS-CMI三網(wǎng)直連-全場循環(huán)促銷-最低7折-低至2.9刀/月-

閱讀 3355·2021-09-10 11:20
理解CSS布局和塊格式化上下文

閱讀 576·2019-08-30 10:54
iPhone X 媒體查詢適配

閱讀 3405·2019-08-29 17:25
面試小結(jié)（四）

閱讀 2356·2019-08-29 16:24
img之間有空隙的問題

閱讀 954·2019-08-29 12:26
webpack4詳細(xì)教程，從無到有搭建react腳手架（二）

閱讀 1524·2019-08-23 18:35
Ionic4+Vue+Capacitor 初體驗(yàn)

閱讀 2048·2019-08-23 17:53

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript 基礎(chǔ)知識 - DOM篇(一)

美女相冊案例

哈哈哈

哈哈哈

相關(guān)文章

**【連載】前端個人文章整理-從基礎(chǔ)到入門**

基礎(chǔ)鞏固：JavaScript基礎(chǔ)總結(jié)(基本概念篇)

**JS基礎(chǔ)篇--JS的DOM操作 - 你真的了解嗎?**

**JS基礎(chǔ)篇--如何用JavaScript判斷dom是否有存在某class的值？**

發(fā)表評論

0條評論

cuieney

男|高級講師

TA的文章

Java性能壓測工具及其調(diào)優(yōu)

VoLLcloud-香港CERA-VPS-CMI三網(wǎng)直連-全場循環(huán)促銷-最低7折-低至2.9刀/月-

理解CSS布局和塊格式化上下文

iPhone X 媒體查詢適配

面試小結(jié)（四）

img之間有空隙的問題

webpack4詳細(xì)教程，從無到有搭建react腳手架（二）

Ionic4+Vue+Capacitor 初體驗(yàn)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript 基礎(chǔ)知識 - DOM篇(一)

美女相冊案例

哈哈哈

哈哈哈

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！