什麼是DOM?

来源:https://www.cnblogs.com/haloujava/archive/2023/11/20/17845101.html
-Advertisement-
Play Games

npm 存在的問題 我們經常使用 npm 來管理 node 項目中的包,從 package.json 中讀取配置將依賴下載到本地,以保障項目的正常運行。 當項目數量多時,這樣的包管理方式會非常的占用電腦記憶體。由於每個項目都有屬於自己的依賴,每個項目都需要安裝,即使 npm 會對依賴進行緩存,但是每個 ...


概念

DOM(Document Object Model , 文檔對象模型) ;

簡單來說,瀏覽器會將整個網頁看成一棵節點樹;而Js語言需要通過一種動態的技術去操作這棵樹,這種技術就是DOM

一張網頁的樹性結構

例如下麵這張代碼的網頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <div>
        <h1>這是標題</h1>
    </div>
    <div>
        <img src="logo-short.png"/>
        <div>簡介...</div>
    </div>
</body>
</html>

DOM會解析成如下結構

可見,在解析渲染一個網頁的時候, 運行環境不會簡單的把文本信息看成一個字元串, 而是解釋為一棵, 每個元素都是其上面的一個節點

不僅是帶標簽的元素(例如

) 會被當成一個節點,一段文本或者簡單的一個換行符也會被當成一個節點

每個節點都會有一個nodeType屬性值,這個屬性標記了此節點是什麼類型

nodeType值 節點類型 舉例
1 元素節點

3 文位元組點 我是小明
8 註釋節點 <!—註釋節點—>
9 document節點 document節點只有一個

Document 對象

document 對象封裝了一整棵HTML的屬性結構, 它是DOM節點的根

document對象的 nodeType 屬性是 9 ,每張網頁只有一個document對象

為了驗證上面我們說的正確性,我們隨便找個網站試下,打開百度 ,在控制臺中輸入 document , 它會把整個網頁返給我們

隨後,我們檢測下document的nodeType, 會返回9

請關於一下啦^_^

微信公眾號


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於Anolis8/Centos8系統重啟後ip地址丟失的原因 #、今天把之前在VMware安裝的Anolis8系統重啟了,啟動之後發現Xshell連接不上。在VMware上登錄後執行ip a命令發現ip地址不見了 #、我的網卡配置信息如下: [[email protected] ~]# cat /etc ...
  • SQL NULL 值 什麼是 NULL 值? NULL 值是指欄位沒有值的情況。如果表中的欄位是可選的,那麼可以插入新記錄或更新記錄而不向該欄位添加值。此時,該欄位將保存為 NULL 值。需要註意的是,NULL 值與零值或包含空格的欄位不同。具有 NULL 值的欄位是在記錄創建期間留空的欄位。 如何 ...
  • 一條 SQL 查詢語句結構如下: SELECT DISTINCT <select_list> FROM <left_table> <join_type> JOIN <right_table> ON <join_condition> WHERE <where_condition> GROUP BY < ...
  • MPP MPP:Massively Parallel Processing, 即大規模並行處理. 一般用來指多個SQL資料庫節點搭建的數據倉庫系統. 執行查詢的時候, 查詢可以分散到多個SQL資料庫節點上執行, 然後彙總返回給用戶. Doris Doris 作為一款開源的 MPP 架構 OLAP 高 ...
  • 本文分享自華為雲社區《Navicat 基於 GaussDB 主備版的快速入門》,作者:Navicat_China。 Navicat Premium(16.2.8 Windows版或以上) 已支持對GaussDB 主備版的管理和開發功能。它不僅具備輕鬆、便捷的可視化數據查看和編輯功能,還提供強大的高階 ...
  • 一、來自MySQL官方的感謝 在 2023-10-25 MySQL 官方發佈的 8.2 版本 Release Notes 中,GreatSQL 社區核心開發者 Richard Dang 和 Hao Lu ,分別收到了來自 MySQL 官方的貢獻感謝,與Amazon、Facebook(Meta)、Te ...
  • DM8壓縮表 0、結論 行表(普通表)不支持壓縮。但是語法支持。建表之後,查詢到的占用空間會比普通表小一半。 經過測試,裝10萬數據(兩個欄位),壓縮的、未壓縮,占用空間一樣大。 列表(huge表)支持壓縮。可以壓縮表(就是壓縮所有列),也可以選擇壓縮列。但是建表的時候就要設置,否則建好表之後修改不 ...
  • Recyclerview中,提供了一個方法addItemDecoration給我們用於設置item的分割線 下麵提供幾個常見的分割線效果 註: 下麵的SizeUtils是AndroidUtilCode此庫里的工具類,需要添加依賴,也可以自行修改封裝的方法(主要是將dp單位轉為px) 以下代碼已封裝在 ...
一周排行
    -Advertisement-
    Play Games
  • 1、預覽地址:http://139.155.137.144:9012 2、qq群:801913255 一、前言 隨著網路的發展,企業對於信息系統數據的保密工作愈發重視,不同身份、角色對於數據的訪問許可權都應該大相徑庭。 列如 1、不同登錄人員對一個數據列表的可見度是不一樣的,如數據列、數據行、數據按鈕 ...
  • 前言 上一篇文章寫瞭如何使用RabbitMQ做個簡單的發送郵件項目,然後評論也是比較多,也是準備去學習一下如何確保RabbitMQ的消息可靠性,但是由於時間原因,先來說說設計模式中的簡單工廠模式吧! 在瞭解簡單工廠模式之前,我們要知道C#是一款面向對象的高級程式語言。它有3大特性,封裝、繼承、多態。 ...
  • Nodify學習 一:介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二:添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 介紹 Nodify是一個WPF基於節點的編輯器控制項,其中包含一系列節點、連接和連接器組件,旨在簡化構建基於節點的工具的過程 ...
  • 創建一個webapi項目做測試使用。 創建新控制器,搭建一個基礎框架,包括獲取當天日期、wiki的請求地址等 創建一個Http請求幫助類以及方法,用於獲取指定URL的信息 使用http請求訪問指定url,先運行一下,看看返回的內容。內容如圖右邊所示,實際上是一個Json數據。我們主要解析 大事記 部 ...
  • 最近在不少自媒體上看到有關.NET與C#的資訊與評價,感覺大家對.NET與C#還是不太瞭解,尤其是對2016年6月發佈的跨平臺.NET Core 1.0,更是知之甚少。在考慮一番之後,還是決定寫點東西總結一下,也回顧一下.NET的發展歷史。 首先,你沒看錯,.NET是跨平臺的,可以在Windows、 ...
  • Nodify學習 一:介紹與使用 - 可樂_加冰 - 博客園 (cnblogs.com) Nodify學習 二:添加節點 - 可樂_加冰 - 博客園 (cnblogs.com) 添加節點(nodes) 通過上一篇我們已經創建好了編輯器實例現在我們為編輯器添加一個節點 添加model和viewmode ...
  • 前言 資料庫併發,數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候,這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰,隨著SQL字數的變多,用到的嵌套和複雜語法增加,可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...
  • 類型檢查和轉換:當你需要檢查對象是否為特定類型,並且希望在同一時間內將其轉換為那個類型時,模式匹配提供了一種更簡潔的方式來完成這一任務,避免了使用傳統的as和is操作符後還需要進行額外的null檢查。 複雜條件邏輯:在處理複雜的條件邏輯時,特別是涉及到多個條件和類型的情況下,使用模式匹配可以使代碼更 ...
  • 在日常開發中,我們經常需要和文件打交道,特別是桌面開發,有時候就會需要載入大批量的文件,而且可能還會存在部分文件缺失的情況,那麼如何才能快速的判斷文件是否存在呢?如果處理不當的,且文件數量比較多的時候,可能會造成卡頓等情況,進而影響程式的使用體驗。今天就以一個簡單的小例子,簡述兩種不同的判斷文件是否... ...
  • 前言 資料庫併發,數據審計和軟刪除一直是數據持久化方面的經典問題。早些時候,這些工作需要手寫複雜的SQL或者通過存儲過程和觸發器實現。手寫複雜SQL對軟體可維護性構成了相當大的挑戰,隨著SQL字數的變多,用到的嵌套和複雜語法增加,可讀性和可維護性的難度是幾何級暴漲。因此如何在實現功能的同時控制這些S ...