JavaScript 基礎知識 - DOM篇(一)

cuieney 發布于2019-08-22 13:40 / 2414人閱讀

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

DOM 前言

本篇文章是JavaScript基礎知識的DOM篇，如果前面的《JavaScript基礎知識-入門篇》看完了，現在就可以學習DOM了。

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

1. DOM 基本概念

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

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

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

什么是DOM？

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

文檔對象模型

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

節點：頁面中所有的內容，包括標簽、文本、注釋、屬性都被封裝成了對象，我們把這些對象叫做節點。

元素：我們最常操作的是標簽節點，也叫元素。

文檔樹模型

HTML結構是一個樹形結構，同樣的，這些對應的對象也是一個樹形的結構，樹形結構的好處是能夠非常容易找到某個節點的子節點、父節點、兄弟節點。

子節點：child

兄弟節點：sibling

父節點：parent

樹形結構示意圖：

API

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

XML

Extensible Markup Language：可擴展性標記語言，通常用于配置文件，或者和json一樣用于數據交互。

2. 查找 DOM 對象

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

2.1 根據id獲取元素

document.getElementById("id名");

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

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

示例代碼：

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

效果圖：

3.5 表單獲得、失去焦點事件

表單獲得焦點時觸發事件，表單失去焦點時觸發事件

1、語法(獲得焦點)

事件源.onfocus = function(){
    // 獲得焦點后執行的函數
}

2、語法(失去焦點)

事件源.onblur = function(){
    // 失去焦點后執行的函數
}

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

獲得焦點時input輸入框清空，失去焦點時恢復提示信息

效果圖：

3.6 其他觸發事件匯總

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

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

4. 優雅降級和漸進增強

漸進增強：基于所有瀏覽器完成基本的功能。在這個基礎上使用一些新特性，高級瀏覽器支持，低級瀏覽器不支持。

優雅降級：先基于主流的、高級的瀏覽器實現功能。對于那些不支持的瀏覽器，盡量去支持，如果支持不了就放棄。

5. 屬性操作 5.1 普通標簽屬性

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

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





美女相冊案例

效果圖：

2、selected：多選菜單的默認顯示選擇項

當select多選表單里的option選項設置selected="true"的時候，默認顯示該選項。

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

示例代碼：點擊按鈕隨機切換option的默認選項 [10-select默認選中項.html]

效果圖：

3、checked：選擇框的默認選中

當checkbox選擇框設置checked選項的時候，默認選中。

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

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

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

效果圖：

5.3 標簽自定義屬性

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

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

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

1、獲取標簽的屬性 getAttribute

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

標簽里的屬性名是什么，獲取是的參數就傳什么。

2、設置標簽的屬性 setAttribute

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

如果標簽內有這個屬性名，屬性值將會被覆蓋，如果沒有這個屬性名，將會被重新設置

3、移除標簽的屬性 removeAttribute

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

示例代碼：獲取當前點擊元素的索引 [12-標簽自定義屬性.html]

通過給當前點擊對象添加一個自定義屬性

效果圖：

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

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

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

效果圖：

5.5 tab 欄切換

前端的小伙伴們，tab欄的知識點一定要熟練的掌握，因為在網站中會大量的使用到它。

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

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

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

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

效果圖：

6. 標簽內容

innerHTML和innerText屬性，都是用來獲取和設置標簽內容的。但是兩者還是有區別的。

6.1 innerHTML

innerHTML可以用于獲取和設置標簽的所有內容，包括標簽和文本內容。

示例代碼：


    哈哈哈

6.2 innerText

innerText可以用于獲取和設置標簽的文本內容，會丟棄掉標簽

示例代碼：


    哈哈哈

二者的區別：

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

innerText的作用：防止xss攻擊

6.3 innerText 的兼容性問題

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

具體差別

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

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

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

能力檢測（常用）

代理檢測

怪癖檢測

書寫innerText的兼容性代碼：

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

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

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

GPU云服務器云服務器基礎篇之基礎篇 java語言程序設計基礎篇 javascript dom

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92384.html

【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
基礎鞏固：JavaScript基礎總結(基本概念篇)

摘要：基礎鞏固基礎總結使用已經好幾年了，由于工作主要是做服務端開發，在工作中逐漸發現的使用范圍原來越廣泛。這里要注意，務必將基礎部分掌握牢靠，磨刀不誤砍柴功，只有將基礎部分掌握并建立起系統的知識體系，在后面學習衍生的其他模式才能游刃有余。基礎鞏固：JavaScript基礎總結使用JavaScript已經好幾年了，由于工作主要是做服務端開發，在工作中逐漸發現JavaScript的使用范圍原...

YuboonaZhang 2019-08-26 12:08 評論0 收藏0
JS基礎篇--JS的DOM操作 - 你真的了解嗎?

摘要：摘要想稍微系統的說說對于的操作把和常用操作的內容歸納成思維導圖方便閱讀同時加入性能上的一些問題前言在前端開發的過程中極為重要的一個功能就是對對象的操作無論增刪改查在前端頁面操作這一范圍內都是比較消耗性能的如何高效率的便捷的操作這就是本文要講摘要想稍微系統的說說對于DOM的操作,把Javascript和jQuery常用操作DOM的內容歸納成思維導圖方便閱讀,同時加入性能上的一些問題....

DirtyMind 2019-08-22 10:59 評論0 收藏0
JS基礎篇--如何用JavaScript判斷dom是否有存在某class的值？

摘要：例如判斷節點的是否有。的實現方式源碼的實現方式源碼里面用到了，是的屬性，屬性返回以數字值返回指定節點的節點類型。如果節點是屬性節點，則屬性將返回。代碼需要了解屬性，點擊屬性文章問題地址例如：判斷html節點的class是否有no-js。 1.jquery的實現方式 $(html).hasClass(no-js); jquery源碼的實現方式： var rclass = ...

馬忠志 2019-08-20 14:17 評論0 收藏0