您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“js如何獲取dom節(jié)點(diǎn)”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“js如何獲取dom節(jié)點(diǎn)”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
1、通過id來獲取dom節(jié)點(diǎn)
getElementById 是通過標(biāo)簽的 id 名稱來獲取標(biāo)簽的,返回的是一個(gè)HTML的節(jié)點(diǎn)信息。
<div id="box">我是通過ID選擇器選擇的</div> <script> var divid = document.getElementById("box"); console.log(divid); </script>
2、通過class來獲取dom節(jié)點(diǎn)
getElementsByClassName 是通過標(biāo)簽的 class 名稱來獲取標(biāo)簽的,返回的是一個(gè)HTMLCollection對(duì)象。
<div class="box"></div> <div class="box"></div> <script> let boxCollection= document.getElementsByClassName("box"); let box1 = boxList[0]; let box2 = boxList[1]; </script>
3、通過name來獲取dom節(jié)點(diǎn)
getElementsByName 是通過過標(biāo)簽的name名稱來獲取標(biāo)簽的返回的是一個(gè)NodeList對(duì)象。
<div id="box"> <input type="text" name="user" /> </div> <script> let userInput= document.getElementsByName("user"); </script>
4、通過tagName(標(biāo)簽名)來獲取dom節(jié)點(diǎn)
getElementsByTagName 是通過過標(biāo)簽的標(biāo)簽名稱來獲取標(biāo)簽的,返回的是一個(gè)HTMLCollection對(duì)象。
<body> <div></div> <script> var box = document.getElementsByTagName('div') console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>
讀到這里,這篇“js如何獲取dom節(jié)點(diǎn)”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。