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

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

摘要：前言本篇文章是基礎(chǔ)知識(shí)的篇，如果前面的基礎(chǔ)知識(shí)入門篇看完了，現(xiàn)在就可以學(xué)習(xí)了?；靖拍罘譃槿齻€(gè)部分。在這個(gè)基礎(chǔ)上使用一些新特性，高級(jí)瀏覽器支持，低級(jí)瀏覽器不支持。在對(duì)象中的屬性是一個(gè)布爾值，只有和。

DOM 前言

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

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

1. DOM 基本概念

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

DOM: 用來(lái)操作頁(yè)面元素的一套工具

BOM: 用來(lái)操作瀏覽器一些行為的一套工具

什么是DOM？

Document Object Model: 文檔對(duì)象模型，也叫文檔樹(shù)模型，是一套用來(lái)操作HTML和XML的一套API

文檔對(duì)象模型

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

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

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

文檔樹(shù)模型

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

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

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

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

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

API

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

XML

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

2. 查找 DOM 對(duì)象

想要操作DOM，首先需要獲取到DOM對(duì)象

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

document.getElementById("id名");

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

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

示例代碼：

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

效果圖：

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

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

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

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

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

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

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

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

效果圖：

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

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

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

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

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

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

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

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





美女相冊(cè)案例

效果圖：

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

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

在DOM對(duì)象中selected的屬性是一個(gè)布爾值，只有false和true。

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

效果圖：

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

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

在DOM對(duì)象中，checked的屬性是一個(gè)布爾值，只有false和true。

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

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

效果圖：

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

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

在html頁(yè)面中，定義一個(gè)自定義屬性"aa"

在對(duì)應(yīng)的DOM對(duì)象中是不存在的，在DOM對(duì)象中只會(huì)存在固有的那些屬性

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

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

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

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

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

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

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

效果圖：

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

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

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

效果圖：

5.5 tab 欄切換

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

為什么會(huì)大量使用tab欄呢？

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

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

示例代碼：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屬性，都是用來(lái)獲取和設(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)容，會(huì)丟棄掉標(biāo)簽

示例代碼：


    哈哈哈

二者的區(qū)別：

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

innerText的作用：防止xss攻擊

6.3 innerText 的兼容性問(wèn)題

瀏覽器兼容性：指網(wǎng)頁(yè)在各種瀏覽器上的顯示效果不一致?；蛘呤且恍傩院头椒ㄔ诘桶姹镜臑g覽器中不支持。

具體差別

innerText是IE提出來(lái)的屬性，因此低版本的火狐瀏覽器不支持這個(gè)屬性。

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

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

能力檢測(cè)（常用）

代理檢測(cè)

怪癖檢測(cè)

書寫innerText的兼容性代碼：

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92384.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

cuieney

男|高級(jí)講師

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

TA的文章

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

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

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

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

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

閱讀 2322·2019-08-29 16:24
img之間有空隙的問(wèn)題

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

美女相冊(cè)案例

哈哈哈

哈哈哈

相關(guān)文章

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

cuieney

男|高級(jí)講師

TA的文章

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

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

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

iPhone X 媒體查詢適配

面試小結(jié)（四）

img之間有空隙的問(wèn)題

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

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

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

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

美女相冊(cè)案例

哈哈哈

哈哈哈

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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