什麼是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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...