獲取DOM節點的幾種方式

来源:https://www.cnblogs.com/lihuijuan/archive/2018/03/25/8641775.html
-Advertisement-
Play Games

DOM 是一個樹形結構,操作一個DOM節點,實際上就是這幾個操作:更新、刪除、添加、遍歷 在操作DOM節點之前,需要通過各種方式先拿到這個DOM節點,常用的方法有: 一、通過元素類型的方法來操作: 註意: 首碼為document,意思是在document節點下調用這些方法,當然也可以在其他的元素節點 ...


DOM 是一個樹形結構,操作一個DOM節點,實際上就是這幾個操作:更新、刪除、添加、遍歷

在操作DOM節點之前,需要通過各種方式先拿到這個DOM節點,常用的方法有:

一、通過元素類型的方法來操作:

  1. document.getElementById();//id名,在實際開發中較少使用,選擇器中多用class  id一般只用在頂級層存在 不能太過依賴id
  2. document.getElementsByTagName();//標簽名
  3. document.getElementsByClassName();//類名
  4. document.getElementsByName();//name屬性值,一般不用
  5. document.querySelector();//css選擇符模式,返回與該模式匹配的第一個元素,結果為一個元素;如果沒找到匹配的元素,則返回null
  6. document.querySelectorAll()//css選擇符模式,返回與該模式匹配的所有元素,結果為一個類數組

註意:

  • 首碼為document,意思是在document節點下調用這些方法,當然也可以在其他的元素節點下調用,如:

<div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
</div>
<p>jquery</p>

    <script>
        var div=document.getElementById("myDiv");
        var p1=div.getElementsByTagName("p");//在div下調用
        alert(p1.length);//3  div節點下的p元素只有三個
        var p2 = document.getElementsByTagName("p");
        alert(p2.length);//4  document節點下的p元素有四個

    </script>
  • querySelector()和querySelectorAll()方法,最後兩個為靜態的,不是實時的,保存的是當時的狀態,是一個副本,即:在以後的代碼中通過方法使所選元素髮生了變化,但該值依然不會改變,因此使用有局限性,一般不用,除非就想得到副本

舉例如下:

        <div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div=document.getElementById("myDiv");
        var p1=div.getElementsByTagName("p");
        alert(p1.length);//3
        var p2 = document.getElementsByTagName("p");
        alert(p2.length);//4
        var p3=document.querySelectorAll("p");
        alert(p3.length);//4
        document.body.appendChild(document.createElement("p"));//創建新元素P,並添加到body中
        alert(p1.length);//3   div節點下的p元素依然只有三個
        alert(p2.length);//5   在body中添加了一個新的P元素,該方法是“動態的”,因此,長度發生了變化
        alert(p3.length);//4   該方法是“靜態的”,因此,無論發生什麼變化,p3的值依然不會發生改變

二、根據關係樹來選擇(遍歷節點樹):

先簡單介紹一下節點:

DOM(文檔對象模型)可以將任何HTML、XML文檔描繪成一個多層次的節點樹。所有的頁面都表現為以一個特定節點為根節點的樹形結構。html文檔中根節點為document節點。

所有節點都有nodeType屬性,代表節點的不同類型,通過nodeType屬性可以來判斷節點的類型。經常使用的節點主要有以下幾種類型:

  1. Element類型(元素節點):nodeType值為 1
  2. Text類型(文本節點):nodeType值為 3
  3. Comment類型(註釋節點):nodeType值為 8
  4. Document類型(document節點):nodeType值為 9;其規定的一些常用的屬性有

    document.body    document.head  分別為HTML中的 <body><head>

    document.documentElement為<html>標簽

所有的節點都有   hasChildNodes()方法    判斷有無子節點  有一個或多個子節點時返回true

通過一些屬性可以來遍歷節點樹:

  1. parentNode//獲取所選節點的父節點,最頂層的節點為#document
  2. childNodes //獲取所選節點的子節點們 
  3. firstChild //獲取所選節點的第一個子節點
  4. lastChild //獲取所選節點的最後一個子節點
  5. nextSibling //獲取所選節點的後一個兄弟節點  列表中最後一個節點的nextSibling屬性值為null
  6. previousSibling //獲取所選節點的前一兄弟節點   列表中第一個節點的previousSibling屬性值為null
        <div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div = document.getElementById("myDiv");
        alert(div.childNodes.length);//7

在上邊的例子中可以看出,div元素節點的所有子節點一共有7個,在後臺查看可以得知:div元素節點的所有子節點包括  4個文本節點(在此全為空文本)和三個元素節

        <div id="myDiv">第一個 
     文本節點<p>html</p>第二個  
     文本節點<p>css</p>第三個 
     文本節點<p>javascript</p>第四個
文本節點</div>

由於文檔中的節點類型較多,遍歷子節點的結果很多時候並不能得到我們想要的結果,使用遍歷元素節點則很方便

三、基於元素節點樹的遍歷(遍歷元素節點樹):

  1. parentElement //返回當前元素的父元素節點(IE9以下不相容)
  2. children  // 返回當前元素的元素子節點
  3. firstElementChild //返回的是第一個元素子節點(IE9以下不相容)
  4. lastElementChild  //返回的是最後一個元素子節點(IE9以下不相容)
  5. nextElementSibling  //返回的是後一個兄弟元素節點(IE9以下不相容)
  6. previousElementSibling  //返回的是前一個兄弟元素節點(IE9以下不相容)
        <div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div = document.getElementById("myDiv");
        alert(div.children.length);//3

遍歷元素節點雖然方便,但是除了children屬性外,其他的屬性則IE9以下不相容

 註意一點:這些獲取節點的方式,返回值要麼是一個特定的節點,要麼是一個集合HTMLCollection,這個節點的集合是一個類數組

 


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

-Advertisement-
Play Games
更多相關文章
  • 引子用戶行為統計(User Behavior Statistics, UBS)一直是移動互聯網產品中必不可少的環節,也俗稱埋點。在保證移動端流量不會受較大影響的前提下,PM們總是希望埋點覆蓋面越廣越好。目前常規的做法是將埋點代碼封裝成工具類,但凡工程中需要埋點(如點擊事件、頁面跳轉)的地方都插入埋點 ...
  • android QMI機制 概論 android QMI機制 QMUX android QMI機制 Qcril初始化流程 android QMI機制 QCRIL消息發送 android QMI機制 底層消息發送 android QMI機制 Modem消息接收 android QMI機制 modem消 ...
  • 關於 微信公眾號:前端呼啦圈(Love-FED) 我的博客:勞卜的博客 知乎專欄:前端呼啦圈 前言 Hello,大家好,又與大家見面了,這次給大家分享下前端異常監控中需要瞭解的異常捕獲與上報機制的一些要點,同時包含了實戰性質的參考代碼和流程。 首先,我們為什麼要進行異常捕獲和上報呢? 正所謂百密一疏 ...
  • 調用方解決跨域的方法只有一種,那就是隱藏跨域。 何為隱藏跨域? 隱藏跨域的核心思路是通過反向代理隱藏跨域以欺騙瀏覽器 什麼是反向代理?反向代理是指通過中間伺服器使得訪問同一個功能變數名稱的兩個不同url最終會去往兩個不同的伺服器 一:反向代理 - Nginx配置 在之前的被調用方解決跨域中,訪問的請求是絕對 ...
  • Javascript作為前端開發必須掌握的一門語言,因為語言的靈活性,有些知識點看起來簡單,在真正遇到的時候,卻不一定會直接做出來,今天我們就一起來看看幾道題目吧 題目1 var val = 'smtg'; console.log(' Value is' + (val 'smtg') ? 'Some ...
  • 數組:使用單獨的變數名來存儲一系列的值。 數組元素:數組裡面的每一項 數組長度:數組裡面元素的個數 表示方法:數組名.length 數組下標(索引):數組元素在數組的位置,從0開始 如:var a = [12,45,7] 這個數組名為a 有三個元素,分別是12 45 7 ,45的位置是第1位。 還可 ...
  • 初級的文章和demo已經基本完成了,代碼也已經上傳到了我的github上,如果你對webpack的使用並不是十分瞭解,那麼建議你回頭看下走近系列,裡面包括了當前項目中使用頻繁的插件,loader的講解。以及基本的webpack配置,相關依賴等。如果你已經有了一定的webpack使用經驗。那麼你直接看 ...
  • 邏輯非(!)操作符,首先它的操作數轉換為一個布爾值,然後對其反求。 兩個邏輯非(!!)操作符,第一個(!)操作符,首先對她的操作數轉換為一個布爾值,然後對其求反,得到布爾值;第二個邏輯非(!)操作符則對這個布爾值再求反。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...