<span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
<sub id="h9j9p"><listing id="h9j9p"></listing></sub>

    <noframes id="h9j9p"><form id="h9j9p"></form>
    <form id="h9j9p"></form>
      <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

      <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></form>
        400-650-7353

        精品課程

        您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】dom獲取元素的方式

        【Web前端基礎知識】dom獲取元素的方式

        • 發布: Web前端培訓
        • 來源:優就業
        • 2021-09-28 14:22:04
        • 閱讀()
        • 分享
        • 手機端入口

        在原生js中我們會經常操作dom結構,通過獲取具體標簽進行操作,那我們知道常用的js獲取元素的方式有哪些嗎,并且這些方法之間的區別是什么呢,以及有哪些注意點呢!接下來我們就一起看一下吧!

        JavaScript獲取元素的的幾種方式以及區別

        (1) 通過ID名獲取getElementById(“id名”):

        通過id名是獲取具體的實際的一個標簽,是靜態獲取,即獲取的時候有就可以獲取得到,后續再添加該id名的標簽也獲取不到了。為何會說通過id名獲取是靜態獲取呢,我們通過具體的例子來看:

        1. <ul id="list"></ul> 

        Js代碼為:

        1. var oUl = document.getElementById("list"); 
        2.    var byId = document.getElementById("h"); 
        3.    console.log(byId); 
        4.    //在ul中添加一個li 
        5.    oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>"
        6.    console.log(byId); 

        最后的結果為:null null

        可以得出結論通過id名的獲取是靜態獲取,在后期添加的獲取不到

        注意:

        ① 上下文必須是document,至于原因我們留到最后再解釋;

        ② 通過id只獲取到一個元素,畢竟id是獨一無二的;

        ③ 通過id獲取是靜態獲取;

        (2) 通過name屬性獲取 getElementsByName('name屬性值')

        當我們的標簽有name屬性時,可以通過其name屬性來獲取標簽,如在單選按鈕中

        1. <input type="radio" name='sex' >男  
        2. <input type="radio" name='sex' checked>女 

        Js代碼為:

        1. var oSex = document.getElementsByName('sex'); 
        2. console.log(oSex); 

        結果如下圖是節點列表,為一個類數組:

        注意:

        ① 上下文必須是document;

        ② 獲取的結果是一個類數組,不是一個真正的數組,有length屬性,可以通過具體的下標獲取對應的元素;

        (3) 通過標簽名獲。篻etElementsByTagName('標簽名')

        通過標簽名獲取的元素是一個元素集合,為類數組形式,有length屬性;且通過標簽名獲取為動態獲取,即獲取的時候沒有該標簽,若后續進行手動添加后也能獲取到。舉例:

        1. <ul id="list"></ul> 

        Js代碼如下:

        1. var oUl = document.document.getElementById("list"); 
        2.     var byTagName = document.getElementsByTagName("li"); 
        3.     console.log(byTagName); 
        4.     //在ul中添加一個li 
        5.     oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>"
        6.     console.log(byTagName); 

        最后的結果為:

        可以看到在手動添加li標簽之后,可以動態地獲取到添加之后的標簽,但是我們也看到了通過標簽名獲取的元素是一個集合,就算只有一個元素也是一個集合,是以一個類數組的形式存在,并不是真正的數組。

        注意:

        ① 上下文可以是document,也可以是一個父元素;

        ② 是一個類數組,有長度屬性,通過[]可以獲取具體的某一項;

        ③ 在使用時要通過具體的下標,比如添加點擊事件時;

        (4) 通過類名獲取 getElementsByClassName(‘類名’)

        通過類名獲取元素的方式與用法基本一樣,也是動態獲取;

        注意:

        ① 上下文可以是document,也可以是一個父元素;

        ② 是一個類數組,有長度屬性,通過[]可以獲取具體的某一項;

        ③ 在使用時要通過具體的下標,比如添加點擊事件時;

        ④ 注意單詞拼寫,因為class是一個關鍵字,所以為getElementsByClassName

        (5) 快速獲取html元素 document.documentElement

        1. document對象有一個documentElement屬性,該屬性始終指向HTML頁面中的<html>元素。 
        2. var html = document.documentElement; //取得對<html>的引用   

        (6) 快速獲取body元素 document.body

        1. document 對象還有一個 body 屬性,直接指向<body>元素。 
        2. var body = document.body; //取得對<body>的引用 

        (7) 通過選擇器獲取一個元素 querySelector("css選擇器")

        該方法接收一個 CSS 選擇符,返回與該模式匹配的第一個元素。

        注意:

        ① 上下文可以是document,也可以是一個父元素;

        ② 參數是選擇器,如“div .active”;

        ③ 返回值只能獲取到第一個元素;

        ④ 與通過id獲取的方式一樣為靜態獲取;

        ⑤ Ie8以下存在兼容問題;

        (8) 通過選擇器獲取一組元素 querySelectorAll("css選擇器")

        該方法接收一個 CSS 選擇符,返回的是所有匹配的元素而不僅僅是一個元素。其結果為一個節點列表。

        注意:

        ① 上下文可以是document,也可以是一個父元素;

        ② 參數是選擇器,如“div .active”;

        ③ 返回值為一組節點列表,是一個類數組;

        ④ 與通過id獲取的方式一樣為靜態獲取;

        ⑤ Ie8以下存在兼容問題;

        使用原生JS獲取DOM元素的8個方法講完了,接下來在講一下為什么有的方法只能在document上使用。

        拿div舉例子,div是HTMLDivElement類的一個實例,document是HTMLDocument 的實例。

        他們的繼承關系:

        HTMLDivElement > HTMLElement > Element > Node > EventTarget

        HTMLDocument > Document > Node > EventTarget

        我們都知道子類繼承父類,子類就可以使用父類的屬性和方法。他們相同的繼承關系是Node和EventTarget,也就是說他們都可以使用Node和EventTarget上的方法。

        如Node上的nodeName、parentNode等,和EventTarget上的addEventListener等。

        getElementById只在Document類的原型上,HTMLDivElement 沒有繼承Document類,所以div不能使用getElementById方法。

        getElementsByTagName即在Document類的原型上也在Element類的原型上,所以div和document都可以使用getElementsByTagName方法。其它同理。

        學習疑問申請解答
        您的姓名
        您的電話
        意向課程
         

        中公優就業

        IT小助手

        掃描上方二維碼添加好友,請備注:599,享學習福利。

        >>本文地址:
        注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

        推薦閱讀

        優就業:ujiuye

        關注中公優就業官方微信

        • 關注微信回復關鍵詞“大禮包”,享學習福利
        QQ交流群
        在線疑問解答
        (加群備注“網站”)
        IT培訓交流群 加入群聊 +
        軟件測試 加入群聊 +
        全鏈路UI/UE設計 加入群聊 +
        Python+人工智能 加入群聊 +
        互聯網營銷 加入群聊 +
        Java開發 加入群聊 +
        PHP開發 加入群聊 +
        VR/AR游戲開發 加入群聊 +
        大前端 加入群聊 +
        大數據 加入群聊 +
        Linux云計算 加入群聊 +
        優就業官方微信
        掃碼回復關鍵詞“大禮包”
        享學習福利

        測一測
        你適合學哪門IT技術?

        1 您的年齡

        2 您的學歷

        3 您更想做哪個方向的工作?

        獲取測試結果
         
        課程資料、活動優惠 領取通道
         
         
        亚洲日韩中文字幕一区
        <span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
        <sub id="h9j9p"><listing id="h9j9p"></listing></sub>

          <noframes id="h9j9p"><form id="h9j9p"></form>
          <form id="h9j9p"></form>
            <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

            <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></form>