簡述HTML DOM及其節點分類

??????? 在JavaScript中,document這個對象大家一定很熟悉,哪怕是剛剛開始學習的新人,也會很快接觸到這個對象。而document對象不僅僅是一個普通的JavaScript內置對象,它還是一個巨大API的核心對象,這個巨大的API就是DOM(Document Object Model),它將文檔的內容呈現在JS面前,并賦予了JS操作文檔的能力。

??????????????????????????????????????????

??????? 在這里不得不提的概念則是DOM樹,DOM樹體現著HTML頁面的層級結構,學習中經常提到的父元素子元素的說法也是建立在樹這種數據結構的基礎之上的。而DOM樹有DOM文檔樹和DOM元素樹兩種,上圖就是一顆DOM元素樹,它只包含元素節點,而DOM文檔樹則包含文檔中所有內容。

????? 一顆DOM元素樹


一篇HTML文檔及其DOM文檔樹。


??????? HTML頁面中的所有內容都會體現在DOM文檔樹中,要理解這種結構,對構成它的每個節點就要先有了解。下面是DOM節點的基本類別,以及各自類別基本屬性的值及簡單介紹:


節點類型nodeTypenodeNamenodeValue
元素節點1標簽名(大寫)null
屬性節點2屬性名屬性值
文本節點3#text文本內容
CDTAT節點4#cdata-sectionCDATA區域的內容
實體引用名稱節點5引用名稱null
實體名稱節點6實體名稱null
處理指令節點7targetentire content cluding the target
注釋節點8#comment注釋內容
文檔節點9#documentnull
文檔類型節點10doctype的名稱null
文檔片段節點11#document-fragmentnull
DTD聲明節點12符號名稱

null

?????????????????????????????????????????????????????????????????????????????? 注:1、在以上的節點分類中,nodeType為4、5、6、7、12的四種節點,是針對XML文檔而言的,在HTML中并未出現,在這里就不詳細介紹了。

??????????????????????????????????????????????????????????????????????????????????????????????????? 2、在以下演示中,默認已經定義了此方法:

?????????????????????????? ? ? ? ? ? ? ? ?? ??

一、元素節點

??????? 每一個HTML標簽都是一個元素節點:

??????? ? 運行及結果:?


二、屬性節點

??????? 元素的屬性在DOM中以屬性節點來表示。

??????? 運行及結果:

????????? 這里需要特殊說明下,一般獲取屬性節點都會直接想到使用DOM中的getAttribute()方法或者直接根據屬性名用‘.’去訪問,然而在操作過程中,JavaScript會直接將獲得的值轉換成字符串,而不是以屬性節點的方式呈現,就無法訪問它的nodeType等屬性了,如下:

?????????

??????? 關于屬性節點,還有一個重點:屬性節點不是HTML DOM樹中的一部分 如下:

??????? ? 沒有辦法通過DOM遍歷方法獲取屬性節點,只能通過attributes屬性、getAttributes()方法以及‘.’來訪問屬性節點。


三、文本節點

??????? 直觀理解,文本節點即是指向文本的節點~

??????? 運行及結果:


??????? 以上三種節點是在日常使用中最常見的三種節點了,另外幾種節點使用并不多:


四、注釋節點

??????? 別以為代碼注釋是只能在開發環境中看到的~在瀏覽器內HTML文檔中,同樣包含著注釋節點,我們可以對其進行各種DOM操作,只不過注釋節點不會渲染在頁面中而已。

??????? 運行及結果:


五、文檔節點:

???????? 文檔節點表示整個文檔,也是DOM文檔樹的根節點。

???????


六、文檔類型節點

???????

??????? 運行及結果:


七、文檔片段節點

??????? 文檔片段節點是我在寫本篇博客的時候還幾乎一無所知的一種節點,在這里學習了這篇博客:深入理解DOM節點類型第四篇——文檔片段節點DocumentFragment

??????? 以下是現學現賣:

??????????????? DocumentFragment,文檔片段節點,是唯一在HTML文檔中沒有對應標記的節點,也就是說它不會在我們編寫HTML代碼的時候出現在我們的視野中。文檔片段是一種輕量級的文檔,可以包含很多DOM節點。在前端操作中,常常需要對文檔樹中的DOM節點做各種各樣的操作,這個時候,對應的操作就會造成頁面重繪。如果DOM操作非常多的話,就會不斷地進行頁面重繪,帶來沉重的瀏覽器負擔,拖慢運行速度。

??????????????? 如果將節點加入文檔片段之中,這些節點就會脫離文檔樹,這個時候進行DOM操作的話就不會造成頁面重繪。等大量DOM操作都執行完成之后,再將文檔片段添加到頁面中,這時完成操作的節點會一次性渲染完畢,避免了多次渲染帶來的性能拖慢。

??????????????? 要使用文檔片段,JavaScript提供了document.createDocumentFragment()方法。關于文檔片段的具體使用和性能提升,會在另外的博文中另行研究,這里看一下文檔片段節點的信息:

???????

八、DTD聲明節點

??????? DTD為Document Type Definition,為文檔類型定義。實際上DTD節點也是主要針對XML文檔而言的,在HTML中也不直接含有DTD聲明節點,只有包含著DTD聲明的文檔類型節點(10)。

??????? 我們都知道HTML有HTML4.01,XHTML等等,每種版本的標記語言中還有三種細分的定義:Strict(嚴格)、Transitional(過渡)、Frameset(框架集)。如果沒寫DTD,瀏覽器就不知道正在處理的文檔是用哪種標記語言來寫的,就造成了解析結果的不同,最常見的錯誤就是用XHTML較為嚴格的規范來解析以HTML這種寬松標準所構建的文本,自然會出現很多問題。w3c給出的解釋是:由于HTML4.01基于SGML,DTD規定了標記語言的規則,故需要在HTML聲明中引用DTD。在如今的HTML5時代,由于HTML5不基于SGML,故我們也不再需要在文檔聲明中包含DTD信息,使用<!DOCTYPE HTML>即可。

???????

??????? 以上就是HTML DOM節點的分類以及簡單介紹了,關于節點的各種屬性以及方法請點擊:

轉載于:https://www.cnblogs.com/zhuwq585/p/6075119.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/285715.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/285715.shtml
英文地址,請注明出處:http://en.pswp.cn/news/285715.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【CC精品教程】任務二:導入像控點、差分POS,空三平差權重設置,提交自由空三

《無人機航空攝影測量精品教程》合集目錄(Pix4d、CC、EPS、PhotoScan、Inpho) 【CC精品教程】任務一:CC新建工程、添加照片、相機參數設置、選擇坐標系統 本任務接著上一個任務,繼續完成CC項目作業,主要內容有:導入像控點、選擇空間參考系統,導入差分POS,空三平差權重設…

[轉]如何進行單元測試

一、單元測試步驟 代碼編寫完成后的單元測試工作主要分為兩個步驟&#xff1a; 人工靜態檢查 人工靜態檢查是測試的第一步&#xff0c;這個階段工作主要是保證代碼算法的邏輯正確性&#xff08;盡量通過人工檢查發現代碼的邏輯錯誤&#xff09;、清晰性、規范性、一致性、算法…

WPF 基礎控件之 TabControl樣式

其他基礎控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButton15.ToggleButton16.Slider 17.TreeView TabControl 實現下面的效果1&#xff09;TabControl來實現動畫&…

開發團隊測試的難與易

做了多年的研發工程師&#xff0c;在所處的環境中&#xff0c;所接觸的開發人員中很少有看重對自己代碼進行測試這項工作的。大多研發人員往往是寫好了代碼運行起來&#xff0c;簡單做下測試&#xff0c;甚至不去測試就拋給接口使用者或者質量管理人員。而且理由很充分“沒時間…

C語言試題八十八之實現選冒泡排序算法

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 C語言實現冒…

兩個數值交換位置

2019獨角獸企業重金招聘Python工程師標準>>> 先說非計算機專業都能理解的。 int a 10; int b 20; 方法一&#xff1a; int c a; a b; b c; System.out.println("a"a",b"b); 方法二&#xff1a; a a b; b a - b; a a - b; System.out…

教你如何在Android 6.0上創建系統懸浮窗

郭霖大神的文章:http://mp.weixin.qq.com/s?__bizMzA5MzI3NjE2MA&mid2650235949&idx1&sn0f7eded67f834d38b02f8872768cb68a&scene0#wechat_redirect今天周二&#xff0c;又該跟大家分享由我執筆的文章了。從之前我寫的deep links、通知欄微技巧這兩篇文章中&a…

【CC精品教程】任務三:CC刺像控點,提交空三,新建重建項目(三維格網、三維點云、DOM和DSM)

《無人機航空攝影測量精品教程》合集目錄(Pix4d、CC、EPS、PhotoScan、Inpho) 【CC精品教程】任務一:CC新建工程、添加照片、相機參數設置、選擇坐標系統 【CC精品教程】任務二:導入像控點、差分POS,空三平差權重設置,提交自由空三 主要任務是準確的刺像控點,提交空三,…

官宣.NET 7 預覽版5

點擊上方藍字關注我們&#xff08;本文閱讀時間&#xff1a;12分鐘)今天我們發布了 .NET 7 預覽版 5。.NET 7 的這個預覽版包括對通用數學的改進&#xff0c;方便了 API 作者&#xff0c;使其更輕松&#xff0c;一個新的 ML.NET 文本分類 API&#xff0c;增加了最先進的深度學習…

[轉]Android產品研發(十九)

轉載請標明出處&#xff1a;一片楓葉的專欄 上一篇文章中我們講解了webview中問題集錦&#xff0c;講解了webview的性能優化、webview種入Cookie信息、activity退出的時候清除webview信息報錯、如何通過java代碼和js代碼相互交互、webview如何下載文件以及騰訊的X5瀏覽服務等知…

C語言試題八十九之實現插入排序算法

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 C語言實現現…

【CC精品教程】ContextCapture 10.17安裝教程(附CC10.17安裝包下載)

《無人機航空攝影測量精品教程》合集目錄(Pix4d、CC、EPS、PhotoScan、Inpho) CC10.17相比之前的版本有了好的新的功能和優點,在傾斜攝影測量中有了更多的優勢,精度和運行速度有了很大的提升。本文講解CC的安裝,附CC10.17安裝包下載,是您航測傾斜攝影測量的入門必備。 文…

centos7 kickstart 使用小結

1、添加參數使網卡名稱變為eth 1bootloader --locationmbr --append"net.ifnames0 biosdevname0 rhgb quiet" 2、psize使用說明&#xff1a;修改vg PE16m 默認4m 支持256G磁盤&#xff0c;適當的調整pesize,可以更多的使用磁盤空間 1volgroup Vol1--pesize16384 pv.…

IOS-網絡(文件上傳)

1 //2 // ViewController.m3 // IOS_0206_文件上傳4 //5 // Created by ma c on 16/2/6.6 // Copyright © 2016年 博文科技. All rights reserved.7 //8 9 #import "ViewController.h"10 #define BWFileBoundary "----------BowenKeJi"11 #define…

mac SecureCRT設置

參考&#xff1a; http://www.2cto.com/os/201407/320292.html SecureCRT 設置 1&#xff09;每次登陸都要輸入密碼&#xff1a; Global Option -> General 取消&#xff1a;Use Keychain前面的勾 2&#xff09;Logon Actions Logon Actions很強大&#xff0c;和python里…

【微服務專題之】.Net6下集成消息隊列上-RabbitMQ

微信公眾號&#xff1a;趣編程ACE關注可了解更多的.NET日常實戰開發技巧&#xff0c;如需源碼 請公眾號后臺留言 源碼;[如果覺得本公眾號對您有幫助&#xff0c;歡迎關注].Net中RabbitMQ的使用超清觀看視頻哦~官網鏈接RabbitMQ代碼演示-詳細見代碼注釋&#xff0c;操作看上文視…

[轉]總結:Apache/Tomcat/JBOSS/Jetty/Nginx區別 .

總結&#xff1a;Apache/Tomcat/JBOSS/Nginx區別 . 1、Apache是Web服務器&#xff0c;Tomcat是應用&#xff08;Java&#xff09;服務器。Tomcat在中小型系統和并發訪問用戶不是很多的場合下被普遍使用。Apache支持靜態頁&#xff0c;Tomcat支持動態的。 2、Jetty:Tomcat內核作…

華為云GaussDB,11.11讓企業無后顧之憂

每年11.11大促對于數據庫而言都是一場生死考驗&#xff0c;如何保障系統的穩定可靠&#xff0c;如何平穩度過業務流量洪峰期&#xff0c;如何高效擴容&#xff0c;成為每個參與活動客戶的一大痛點。本文將通過5個常見的大促問題及分析&#xff0c;看看華為云GaussDB是如何解決這…

【CC精品教程】ContextCapture(CC)集群處理環境部署圖文教程

《無人機航空攝影測量精品教程》合集目錄(Pix4d、CC、EPS、PhotoScan、Inpho) 鑒于CC其三維構建運算的本質,海量數據的解析運算會使用大量的計算機資源,而再好的單臺計算機也無法勝過多臺計算機的并行運算能力,故而借助局域網內多臺計算機設備進行三維構建運算,可以節省大…

Linux-PAM PAM-MySQL的總結

1、理論知識 1.1、PAM模塊 1.1.1、PAM的介紹 Pluggable Authentication Modules簡稱PAM&#xff0c;是一個微縮的可插入認證模塊&#xff08;PAM is an acronym for Pluggable Authentication Modules&#xff09; 1.1.2、PAM的結構 1)模塊層(PAM服務模塊) - PAM結構最底層 作用…