DOM學習筆記

来源:https://www.cnblogs.com/woheni/archive/2019/08/27/11417572.html
-Advertisement-
Play Games

DOM簡介： 1、DOM：Document Object Model（簡稱文檔對象模型），是專門用於操作網頁內容API一套標準！網頁內容：字元、圖片等各種資源 2、核心DOM：操作一切結構化文檔的API標準！特點：強大，萬能；缺點：操作繁瑣。 3、HTML DOM：專門操作HTML網頁的API標準- ...


DOM簡介：

1、DOM：Document  Object  Model（簡稱文檔對象模型），是專門用於操作網頁內容API一套標準！網頁內容：字元、圖片等各種資源

2、核心DOM：操作一切結構化文檔的API標準！特點：強大，萬能；缺點：操作繁瑣。

3、HTML  DOM：專門操作HTML網頁的API標準--針對核心DOM中部分API進行了簡化！優點：操作相對簡化；缺點：非萬能。

4、對比：實際開發中HTML  DOM使用頻率相對較高，只有當HTML  DOM無法實現某些功能時才會使用核心DOM。

5、DOM樹：網頁中一切內容都在記憶體中以樹狀結構存儲，每項內容都在這個樹上有一個節點。每個DOM樹都有一個根節點：document節點。

6、節點對象：DOM上每一個節點，都是一個節點對象，提供了操作節點的API。

節點對象的屬性：

1、nodeType：保存著節點的類型名！--不能明確獲知節點名稱

2、nodeName：保存節點的名稱！--區分不同元素

3、nodeValue：保存元素的值！

正式操作DOM：增刪改查！　　操作流程：獲取能夠操作的元素--目標元素--綁定事件--獲取需要操作的元素--事件具體操作

查找/獲取：

html中不需要獲取直接使問的元素：

　　document.documentElement　　==>html

　　document.head　　==>head

　　document.body　　==>body

1、按照節點之間的層級關係：如果已經獲取到一個元素，想找其周圍元素

　　1>父子級：

　　     child.parentNode：獲取父節點--返回父節點

　　　  parent.childNodes：獲取位元組的--可以返回多個

　　　  parent.firstchild：獲取父節點中第一個位元組點

　　　  parent.lastchild：獲取父節點中最後一個位元組點

　　2>兄弟級：

　　　 elem.nextsibling：獲取下一個兄弟節點

　　　 elem.previoussibling：獲取上一個兄弟節點

　　問題：容易受到空字元影響！

 2、解決方案：元素樹：只包含元素的樹狀結構。元素樹並非新的一個樹，只是DOM樹結構的一部分

　　1>父子級：

　　　 child.parentElement：獲取父節元素--返回父級元素

　　　 parent.chidren：獲取子元素--可以返回多個

　　　 parent.firstElementchild：獲取父元素中第一個子元素

　　　 parent.lastElementchild：獲取父元素中最後一個子元素

　　2>兄弟級：

　　　 elem.nextElementSibling：獲取下一個兄弟元素

　　　 elem.previousElementSibling：獲取上一個兄弟元素

遍歷節點數/元素樹

方式1：遞歸

步驟：定義一個方法，查找一個父節點下麵所有的子節點--對遍歷到的每個位元組，再執行與父節點相同的方法。

步驟：定義一個方法，傳入一個節點對象，獲取並遍歷每一個子節點

function iterator(elem){

　　var children=elem.childNodes;

　　for (var i=0;i<children.length;i++co) {

　　　　console.log("當前節點類型是："+elem[i].nodeType);

　　　　console.log("當前節點名稱是："+elem[i].nodeName);

　　}

}

註意：遞歸的使用效率很低，不介意使用！

方式2：使用節點迭代對象

步驟1、創建一個節點迭代對象：var iteartor=document.createNodeIterator(parent,NodeFilter.SHOW_ALL,null,false);

步驟2、反覆調用iterator的nextNode()

作用：返回當前遍歷到的節點；自動跑到下一個節點；自動返回null退出。

類數組對象：長得像數組，但不是數組

動態集合：不實際存儲值，每次訪問都會重新去查找DOM樹！

問題： 每次迴圈判斷時都會去查找DOM樹，浪費性能

處理：在判斷之前，事先保存值。

操作DOM的步驟：

1、獲取目標元素

2、綁定事件：再獲取的元素對象上使用

　　elem.on事件名=function () {

　　　　3、獲取需要操作的元素

　　　　4、操作元素

}

查找元素的內容

1、按照父子級和兄弟關係查找節點/元素

2、按照HTML特性查找

　　1>根據元素的IDs屬性查找：var elem=document.getElementById("ID值");　

　　　　註意：只能通過document調用；只能返回一個元素!

　　2>根據元素的標記名查找：var elems=parent.getElementByTagName("標記名");

　　　　註意：返回一個類數組的動態集合；可以通過任意父節元素調用；查找不限層級！

　　3>根據元素的name屬性查找：var elems=document.getElementsByName("name屬性值");

　　　　註意：返回一個類數組的動態集合；只能用document調用！

　　4>根據元素的class屬性查找：var elems=parent.getElementsByClassName("class值");

　　　　註意：返回一個類數組的動態集合；可以通過任意父級元素調用；查找不限層級；只要元素包含指定的class取值即可！

3、根據css選擇器查找元素--重要

　　1>查找一個元素：var elem=parent.querySelector("選擇器");

　　2>查找多個元素：var elems=parent.querySelectorAll("選擇器");

註意：

1、以上兩個API返回的不是動態集合，即使反覆訪問也不會反覆查找DOM。

2、在低版本的瀏覽器中，不支持此類API。

總結：

1、已經獲取了一個元素，想查找附近的元素--通過元素之間的關係查找

2、如果只知道一個條件，想獲取元素--通過html特性查找

3、如果條件比較複雜--通過選擇器查找

修改元素的內容

1、.innerHTML：獲取/修改元素中內容區域的內容

內容區域：從起始標記到結束標記之間的區域

取值：elem.innerHTML　　//獲取元素elem的內容區域的內容

賦值：elem.innerHTML="新值";

註意：此API賦值的內容，瀏覽器會當作html代碼解析！

2、.textContent：獲取/修改元素elem的內容標記內的文本

取值：elem.textContent

賦值：elem.textContent="新值";

註意：此API賦值的內容，瀏覽器不會解析特殊字元，就是普通文本

3、.value：獲取表單元素的value屬性值

獲取：var style1=elem.style.屬性名；

修改：elem.style.屬性名=值；

套路：可以將需要的樣式設置在一個類中，通過修改class屬性引入這個類。

　　elem.className="類名";

DOM操作屬性

1、標準屬性：所有元素都支持的屬性（id，name，class，title，style......）,HTML標準中指定的屬性----w3c

2、核心DOM中的API：

　　1>獲取一個元素指定的屬性：elem.getAttribute("屬性名");

　　2>修改一個元素指定屬性的值：elem.setAttribute("屬性名"，"新值");

　　3>判斷一個元素是否具有指定屬性：elem.hasAttribute("屬性名");

　　4>移除一個元素指定的屬性：elem.removeAttribute("屬性名");

　　　註意：不僅將屬性值刪除，屬性名也會刪除。

HTML DOM操作屬性

在HTML DOM中，已經將元素支持的標準屬性封裝在家元素對象中，可以通過 . 之間訪問！

1、獲取屬性：elem.屬性名；

2、修改/添加：elem.屬性名="值";

3、判斷：elem.屬性名！=="";

4、刪除：elem.屬性名="";

操作頁面的元素

添加一個元素：

1>創建一個元素：var elem=document.createElement("新元素");

2>添加必要的屬性和內容：elem.屬性名1=值；elem.屬性名2=值；elem.innerHTML="百度一下";

3>將創建的新元素追加到DOM樹中指定的父節點下！

　　1、在父元素的末尾追加新元素：parent.appendChild(elem);

　　2、中間插入：將新元素插入到兄弟元素之間：parent.insertBefore(elem，兄弟元素);

　　3、替換：parent.replace(elem，被替換的元素);

DOM操作元素

如果進行了DOM操作元素，網頁將重新layout。如果頻繁的操作DOM，會造成性能浪費。

解決方法：如果需要向父節點中追加多個位元組點，可以先將需要添加的子元素先保存在一個虛擬的臨時父節點下。最後一次性將所有位元組點追加到DOM中真實父節點下！

　　步驟1：創建多個子節點：var zhy1=document.createElement("a");var zhy2=document.createElement("b");

　　步驟2：創建虛擬父節點：var frag=document.createElementFragment();

　　步驟3：將子節點追加到虛擬父節點：frag.appendChild(zhy1);frag.appendChild(zhy2);

　　步驟4：最後將虛擬父節點追加到真正的父節點中：parent.appendChild(frag);

註意：將臨時節點追加到DOM中，臨時的片段frag會被釋放，真正追加到DOM的只有那些子元素！

HTML DOM簡化操作

 在操作常見的HTML元素時，HTML DOM提供了一些簡化操作。包括了img，select，option，table/行分組/tr/td，from

1、img：var img=new Image();

2、select：value；selectdIndex；option；length

　　解析：value：獲取被選中的選項的value值；selectedIndex：獲取當前被選中的選擇的下標；option：獲取內部所有的option元素集合；length：獲取option所得集合的長度。

3、option：var opt=new Option();

4、table：外層的table管著行分組（thead，tbody，tfoot）；

5、創建行分組：已經獲取到table元素，可以直接調用table創建行分組元素

　　var thead=table.createTHead();

　　var tbody=table.createTBody();

　　var tfoot=table.createTFoot();

6、刪除行分組：調用table刪除內部的行分組，註意只能刪表頭和表尾。

　　table.deleteTHead();

　　table.deleteTFoot();

7、獲取表格中的行分組：可以有多個表主體。

　　table.tHead;

　　table.tBodies;

　　table.tFoot;

8、行分組控制行

　　創建行：行分組　insertRow(i);

　　刪除行：行分組.deleteRow(i);

　　獲取行：行分組.Rows;

9、行分組控制列

　　創建列：tr.insertCell(i);

　　刪除列：tr.deleteCell(i);

　　獲取列們：tr.Cells;

10、from：獲取頁面上的from元素：

　　document.from；獲取頁面元素中的表單元素

　　document.forms[i/id]；根據表單的序號，或者id值獲取對應表單！

　　from.elements；獲取表單中所有的表單元素！

　　返回一個類數組對象，具有length和下標！

花了半天的時間總結的DOM筆記，不足之處請多多指教！完結！


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

-Advertisement-
Play Games
更多相關文章
  • 瀏覽器獲取手機經緯度位置
    經緯度位置無法獲取的情況： 1. 網址必須為功能變數名稱，不能用ip直接訪問，否則手機瀏覽器直接拒絕改請求。 2. iphone的瀏覽器（包括微信掃碼進入網站） ，親測調用 http 的網站是不能獲取到經緯度的，是蘋果手機安全的考慮，如果使用https網站的話，證書也必須是有效證書（無效證書的時候瀏覽器訪問 ...
  • JS中的迴圈結構
    while迴圈： 語法： while (expression) { code... } 執行規則： 先對expression（表達式）做判定，如果為真，進入迴圈執行code，再判定…… 如果為假，就不會進入。 註： 如果expression第一次判定為假，則不會進入迴圈 註: 一定要在code部分修 ...
  • 在網頁中動態地給表格添加一行內容--HTML+CSS+JavaScript
    效果： 現在輸入：name: 小明 --> 點擊添加按鈕添加 ...
  • vue中監聽返回鍵
    問題：在項目中，我們常常有需求，當用戶在填寫表單時，點擊返回的時候，我們希望加一個彈窗，確認離開嗎，確認將保存為草稿 解決方案：利用 H5的 pushstate（個人理解為增加頁面棧）特性與onpopup事件 分析：pushstate 從該方法名我們可以知道 是增加某種狀態，會為history對象的 ...
  • HTML中的三元表達式,靈活的使用or邏輯判斷
    08.27自我總結 HTML中的三元表達式 ? : 靈活使用or邏輯判斷 比如我們某個變數為空的時候返回他另外個值 var a = msg || '沒有消息' ...
  • Vue的使用
    08.27自我總結 Vue的使用 一.掛載點 這樣設置好了後這個vue中的內容會與對應的css選擇器進行關聯 註意點: 掛載點只遍歷第一個匹配的結果 html與body標簽不可以作為掛載點 掛載點的只一般就採用id選擇器(唯一性) 二.插值表達式 :Vue中的msg變數發生變化的再沒其他約數條件下m ...
  • JS中的分支結構
    if語句 語法： if (expression1) { } else if (expression2) { } else { } 執行機制: 先對expression1做判定，如果為真，執行對應的代碼塊中的代碼執行完畢，分支結束 如果expression1為假，再根據這種機制往下對其它的表達式做判定 ...
  • Juqery插件編寫 基礎說明
    Juqery插件編寫 基礎說明 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類