<ins id="6k1m6"><video id="6k1m6"></video></ins>

    <ruby id="6k1m6"><option id="6k1m6"></option></ruby>
    <code id="6k1m6"><option id="6k1m6"></option></code>
  1. <output id="6k1m6"></output>
    400-650-7353
    您所在的位置:首頁(yè) > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎知識】dom獲取元素的方式

    【W(wǎng)eb前端基礎知識】dom獲取元素的方式

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

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

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

    通過(guò)id名是獲取具體的實(shí)際的一個(gè)標簽,是靜態(tài)獲取,即獲取的時(shí)候有就可以獲取得到,后續再添加該id名的標簽也獲取不到了。為何會(huì )說(shuō)通過(guò)id名獲取是靜態(tài)獲取呢,我們通過(guò)具體的例子來(lái)看:

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

    Js代碼為:

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

    最后的結果為:null null

    可以得出結論通過(guò)id名的獲取是靜態(tài)獲取,在后期添加的獲取不到

    注意:

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

    ② 通過(guò)id只獲取到一個(gè)元素,畢竟id是獨一無(wú)二的;

    ③ 通過(guò)id獲取是靜態(tài)獲取;

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

    當我們的標簽有name屬性時(shí),可以通過(guò)其name屬性來(lái)獲取標簽,如在單選按鈕中

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

    Js代碼為:

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

    結果如下圖是節點(diǎn)列表,為一個(gè)類(lèi)數組:

    注意:

    ① 上下文必須是document;

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

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

    通過(guò)標簽名獲取的元素是一個(gè)元素集合,為類(lèi)數組形式,有length屬性;且通過(guò)標簽名獲取為動(dòng)態(tài)獲取,即獲取的時(shí)候沒(méi)有該標簽,若后續進(jìn)行手動(dòng)添加后也能獲取到。舉例:

    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中添加一個(gè)li 
    5.     oUl.innerHTML = "<li id='h' style='width:100px;height:100px;background:red'></li>"
    6.     console.log(byTagName); 

    最后的結果為:

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

    注意:

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

    ② 是一個(gè)類(lèi)數組,有長(cháng)度屬性,通過(guò)[]可以獲取具體的某一項;

    ③ 在使用時(shí)要通過(guò)具體的下標,比如添加點(diǎn)擊事件時(shí);

    (4) 通過(guò)類(lèi)名獲取 getElementsByClassName(‘類(lèi)名’)

    通過(guò)類(lèi)名獲取元素的方式與用法基本一樣,也是動(dòng)態(tài)獲取;

    注意:

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

    ② 是一個(gè)類(lèi)數組,有長(cháng)度屬性,通過(guò)[]可以獲取具體的某一項;

    ③ 在使用時(shí)要通過(guò)具體的下標,比如添加點(diǎn)擊事件時(shí);

    ④ 注意單詞拼寫(xiě),因為class是一個(gè)關(guān)鍵字,所以為getElementsByClassName

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

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

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

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

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

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

    注意:

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

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

    ③ 返回值只能獲取到第一個(gè)元素;

    ④ 與通過(guò)id獲取的方式一樣為靜態(tài)獲取;

    ⑤ Ie8以下存在兼容問(wèn)題;

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

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

    注意:

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

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

    ③ 返回值為一組節點(diǎn)列表,是一個(gè)類(lèi)數組;

    ④ 與通過(guò)id獲取的方式一樣為靜態(tài)獲取;

    ⑤ Ie8以下存在兼容問(wèn)題;

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

    拿div舉例子,div是HTMLDivElement類(lèi)的一個(gè)實(shí)例,document是HTMLDocument 的實(shí)例。

    他們的繼承關(guān)系:

    HTMLDivElement > HTMLElement > Element > Node > EventTarget

    HTMLDocument > Document > Node > EventTarget

    我們都知道子類(lèi)繼承父類(lèi),子類(lèi)就可以使用父類(lèi)的屬性和方法。他們相同的繼承關(guān)系是Node和EventTarget,也就是說(shuō)他們都可以使用Node和EventTarget上的方法。

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

    getElementById只在Document類(lèi)的原型上,HTMLDivElement 沒(méi)有繼承Document類(lèi),所以div不能使用getElementById方法。

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

    文章“【W(wǎng)eb前端基礎知識】dom獲取元素的方式”已幫助

    更多內容

    >>本文地址:http://www.littlerockbway.com/zhuanye/2021/70199.html

    THE END  

    聲明:本站稿件版權均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉載。

    1 您的年齡

    2 您的學(xué)歷

    3 您更想做哪個(gè)方向的工作?

    獲取測試結果
    • 大前端大前端
    • 大數據大數據
    • 互聯(lián)網(wǎng)營(yíng)銷(xiāo)互聯(lián)網(wǎng)營(yíng)銷(xiāo)
    • JavaJava
    • Linux云計算Linux
    • Python+人工智能Python
    • 嵌入式物聯(lián)網(wǎng)嵌入式
    • 全域電商運營(yíng)全域電商運營(yíng)
    • 軟件測試軟件測試
    • 室內設計室內設計
    • 平面設計平面設計
    • 電商設計電商設計
    • 網(wǎng)頁(yè)設計網(wǎng)頁(yè)設計
    • 全鏈路UI/UE設計UI設計
    • VR/AR游戲開(kāi)發(fā)VR/AR
    • 網(wǎng)絡(luò )安全網(wǎng)絡(luò )安全
    • 新媒體與短視頻運營(yíng)新媒體
    • 直播帶貨直播帶貨
    • 智能機器人軟件開(kāi)發(fā)智能機器人
     

    快速通道fast track

    近期開(kāi)班時(shí)間TIME

    两个人在线观看免费播放_国产精品天干天干_亚洲婷婷月色婷婷五月小蛇_男人的好小说全文免费阅读