常見的DOM操做有哪些

時間 2020-07-06

標籤常見的 dom 哪些欄目 HTML 简体版

原文原文鏈接

這裏是修真院前端小課堂，每篇分享文從html

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】前端

八個方面深度解析前端知識/技能，本篇分享的是：node

【常見的DOM操做有哪些】編程

1.背景介紹
什麼是DOM？簡單地說，DOM是一套對文檔的內容進行抽象和概念化的方法segmentfault

在現實世界裏，人們對所謂的'世界對象模型'都不會陌生，例如，當用'汽車'、'房子'和'樹'等名詞來稱呼平常生活環境裏的事物時，咱們均可以百分百的確定對方知道咱們說的是什麼，這是由於人們在對這些名詞所表明的的東西有着相同的認知。因而，當對別人說"汽車停在車庫裏"時，能夠判定他們不會理解爲"小鳥關在壁櫥裏"數組

咱們的"世界對象模型"不進能夠用來描述客觀存在的事物，還能夠同來描述抽象概念。例如，假設有我的想我問路，而我給出的答案是"左邊第三棟房子"，這個答案有沒有意義取決於那我的可以理解"左邊"和"第三"的含義。若是他不會數數或者分不清左右，則無論他是否理解這幾個概念，個人回答對他都不會有任何的幫助。在現實世界中，正是由於你們對抽象的"世界對象模型"有着基本的共識，人們才能用很是簡單的話來表達出複雜的含義並獲得對方的理解。瀏覽器

而DOM的定義則是由W3C所制定的標準，定義爲"一個與系統平臺和編程語言無關的接口，程序和腳本能夠經過這個接口動態地訪問和修改文檔的內容`、結構和樣式。"性能優化

2.知識剖析
2.1. 節點是什麼網絡

節點這個詞是一個網絡用語，表明了網絡中的一個鏈接點。一個網絡就是由一些節點構成的集合。dom

在現實世界中，一切事物都由原子構成。原子就是現實世界的節點。可是原子一樣還能夠進一步分解爲更細小的亞原子微粒。這些亞原子微粒一樣也是節點。

DOM也是一樣的狀況。文檔是由節點構成的集合，只不過此時的節點是文檔樹上的樹枝和樹葉而已。

在DOM中有許多不一樣類型的節點。就像原子包含着亞原子微粒那樣，也有不少類型的DOM節點包含着其餘類型的節點。接下來咱們先看看其中的三種：元素節點、文本節點和屬性節點。

2.2. 元素節點

在DOM中的原子就是元素節點。

像是咱們如今所看到的這個網頁，咱們在編寫時，會用到諸如<body>、<head>、<p>這些元素。若是把Web上的文檔比做一座大廈，那麼元素就是建造這座大廈的磚塊，這些元素在在文檔中的佈局造成了文檔的結構。元素能夠包含其餘的元素，在咱們所看到的頁面頁中，內容都被包含在在一個<section>元素的內部。而惟一沒有被包含在其餘元素中的惟一元素是'<html>'，他和咱們的節點樹的根元素，其餘的全部元素都被包含在'<html>'中。

網頁的部分節點樹

2.3. 文本節點

元素節點只是節點類型的一種。若是一份文檔徹底有一些空白元素構成，他將有一個結構，但這份文檔自己將不會包含什麼內容。

在咱們的ppt首頁中，'<p>'元素包含着文本，'分享人：劉洪利'。他就是一個文本節點。在html文檔裏，文本節點老是被包含在元素節點的內部。

2.4. 屬性節點

屬性節點用來對元素作出更具體的描述。例如，幾乎全部的元素都有一個title屬性，而咱們能夠利用這個屬性對包含在元素裏的東西作出準確的描述：'<p title="a gentle reminder">這是一個帶有舒適提示的p標籤</p>'

在DOM中，title="a gentle reminder"是一個屬性節點。由於屬性老是被放在起始標籤裏，因此屬性節點老是被包含在元素節點中。並不是全部的標籤都包含着屬性，可是全部的屬性都被元素包含。

元素的構成

2.5. 常見的DOM操做

獲取DOM

經過使用 getElementById() 方法匹配元素的id屬性來訪問元素節點，對元素節點進行操做

經過使用 getElementsByTagName() 方法匹配元素的tagName來訪問元素節點，對元素節點進行操做

經過使用 getElementsByClassName() 方法匹配元素的className來訪問元素節點，對元素節點進行操做

值得注意的是， getElementsByTagName() 和 getElementsByClassName() 這兩種方法由於其訪問的是節點中的可能爲複數的屬性，因此獲得的會是一個以數組的形式來體現出來的元素節點集合，咱們能夠經過打印獲取到的DOM節點來判斷類型

demo

DOM事件

onclick事件---當用戶點擊時執行

onload事件---當用戶進入時執行

onunload事件---用用戶離開時執行

onmouseover事件---當用戶鼠標指針移入時執行

onmouseout事件---當用戶鼠標指針移出時執行

onmousedown事件---當用戶鼠標摁下時執行

onmouseup事件---當用戶鼠標鬆開時執行

demo

常見問題

如何經過class和tag調用元素?如何對其設置屬性？

4.解決方案
在一個頁面中經常有多個class相同的元素，也有多個標籤相同的元素，在調用時方法以下

demo

擴展思考

onblur事件---當對象失去焦點時發生

onchange事件---當對象域的值被改變時發生

button 事件---屬性可返回一個整數，指示當事件被觸發時哪一個鼠標按鍵被點擊。

更多的事件就不一一的描述了，有興趣的同窗能夠去看下這個

w3school

參考文獻

書籍：《JavaScript DOM編程藝術》

網址：w3school

7.更多討論
Q：dom操做是異步的嗎

A：dom的操做實際上是同步的，可是渲染是異步的。由於JavaScript引擎線程跟GUI渲染線程是互斥的，即我執行的時候，你就靠邊站，我執行完你才能執行。具體的能夠看下這篇文章https://segmentfault.com/a/11...《關於修改DOM是異步仍是同步的問題》

Q：除了getElementsByClassName()、getElementsByTagName()、getElementById()還有什麼能夠獲取dom節點的方法

A：

1.經過節點屬性獲得元素

1）node屬性：來獲取節點的名稱、類型、值。

js代碼：

window.onload=function(){ 子節點

var pox = document.getElementById('pox');

alert(pox.childNodes.length) //子節點數量

alert(pox.childNodes[0].nodeValue); // 第一個子節點的內容

alert(pox.firstChild.nodeValue); // 第一個子節點的內容

alert(pox.lastChild.nodeValue); // 最後一個節點的內容

};

注意：node只能獲取當前節點的東西，在上面的js代碼中node自己把節點指針放在元素上，因此自己沒有value值，

2.層次節點屬性：層級節點能夠分爲父子節點和兄弟節點，經過當前節點能夠獲取其餘層次的節點。

2.1）子節點childNodes、第一個字節點firstChilds、最後一個子節點lastChilds。

js代碼：

window.onload=function(){ 子節點

var pox = document.getElementById('pox');

alert(pox.childNodes.length) //子節點數量

alert(pox.childNodes[0].nodeValue); // 第一個子節點的內容

alert(pox.firstChild.nodeValue); // 第一個子節點的內容

alert(pox.lastChild.nodeValue); // 最後一個節點的內容

};

2.2）父節點parentChild、兄弟節點previousSibing,nextSibing。

js代碼：

window.onload=function(){ 父節點，上下節點

var pox = document.getElementById('pox');

alert(pox.parentNode); //pox節點的父節點body節點

alert(pox.firstChild.nextSibling); //pox節點的子節點中第一個節點的下一個節點

alert(pox.lastChild.previousSibling); //pox節點的子節點中最後一個節點的上一個節點

alert(pox.lastChild.previousSibling.nodeName)

};

本回答摘自-----------《獲取元素節點（DOM基礎）》http://blog.csdn.net/u0109283...

Q：dom操做的最佳實踐應該是什麼樣的

A：

1. 平穩退化：正確的使用JavaScript腳本，讓訪問者在他們瀏覽器不支持JavaScript的狀況下仍能順利的瀏覽你的網站，便是有些功能沒法使用，但最基本的操做仍能順利完成。

2. 分離JavaScript：將HTML內部DOM事件分離到外部來，保證HTML的純淨，同時能夠在外部js文件經過獲取DOM節點來給這個節點添加事件的形式來運行外部JavaScript文件。

3. 向後兼容：由於不一樣瀏覽器對JavaScript的支持程度也不一致，絕大多數的瀏覽器均可以或多或少的支持JavaScript，，但比較古老的瀏覽器卻頗有可能沒法理解DOM提供的方法和腳本。所以，咱們經過如下幾點來確保那些古老的瀏覽器不會由於腳本代碼而出問題。

3.1. 對象檢測：檢測瀏覽器對JavaScript的支持程度。咱們能夠經過將某種方法打包在一個if語句中，而後根據這條語句的條件表達式的求值結果爲true（這個方法存在）仍是false（這個方法不存在）來決定應該採起怎麼樣的行動。

例如，若是有一個使用了getElementById（）方法的函數麼就能夠在調用getElementById（）方法以前先檢查用戶所用的瀏覽器是否支持這個方法。在使用對象檢查時，必定要刪除方法名後面的圓括號，若是不刪掉，測試的將是方法的結果，不管方法是否存在

代碼：

if( ! document.getElementById ) return false；

4. 性能考慮：爲保證應用流暢的運行，在爲文檔編寫和應用腳本時，須要注意一些問題。

4.1. 儘可能少訪問DOM和儘可能減小標記

訪問DOM的方式對腳本性能會產生很大的影響。例如當咱們須要訪問html頁面中全部的div元素來找到咱們想要的那個節點，咱們不知道會有多少div元素來面對着咱們，因此瀏覽器會去搜索整個DOM樹，從中查找可能匹配的元素。

另外一個是儘可能減小文檔中的標記數量。過多沒必要要的元素只會增長DOM樹的規模，進而增長遍歷DOM樹以查找特定元素的時間。

4.2. 合併和放置腳本

咱們經過合併外部JavaScript文件來減小加載頁面時發送的請求數量。減小請求數量一般都是在性能優化時優先考慮的。

4.3. 壓縮腳本

經過將腳本文件中沒必要要耳朵字節，如空格和註釋通通刪除，從而達到「壓縮文件」的目的。

「咱們相信人人均可以成爲一個工程師，如今開始，找個師兄，帶你入門，學習的路上再也不迷茫。

這裏是技能樹.IT修真院：http://www.jnshu.com，初學者轉行到互聯網行業的彙集地。"

歡迎加IT交流羣565734203與你們一塊兒討論交流

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。