js常用DOM方法詳解
介紹幾個(gè)js DOM的常用方法
獲取元素節(jié)點(diǎn) getElementById getElementsByTagName getElementsByClassName
先寫一個(gè)簡(jiǎn)單的網(wǎng)頁做測(cè)試：
/* test.html */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">這段的id是contentId。</p> <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">這段的class name是contentClass。</p> </body> </html>
1. getElementById
1.先定義變量 var contentId = document.getElementById("contentId");
2.然后輸出對(duì)象 contentId 就返回id為 contentId 的元素對(duì)象（ <p id="contentId" style="width:500px; height: 30px;background-color: #ccc"> ）。見下圖：
2. getElementsByTagName
1.還是先定義變量 var contentTag = document.getElementsByTagName("p");
2.接著我輸出 contentTag ，它返回 HTMLCollection [ <p#contentId>, <p.contentClass> ] 共兩個(gè)，一個(gè)以#開頭表示id，另一個(gè)以.開頭表示Class name。
3.繼續(xù) contentTag[0] 輸出 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">
contentTag[1] 輸出 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">
由此可知 getElementsByTagName 返回的是數(shù)組！
3. getElementsByClassName
1. var contentClass = document.getElementsByClassName("contentClass");
2. contentClass 輸出 HTMLCollection [ <p.contentClass> ] 返回一個(gè)元素對(duì)象數(shù)組，即使只有一個(gè)。
3. contentClass[0] 輸出 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">
我們常用的還有 getAttribute，setAttribute，ChildNodes, nodeType, nodeValue, firstChild, lastChild 方法獲取一些信息。
4.分別用 getAttribute 和 setAttribute 獲取和設(shè)置屬性：
改變style屬性后：
5.那么這是childNOdes：
也就是說， <p></p> 在遇到塊元素時(shí)，塊元素之間會(huì)有一個(gè)換行符 <br> ,瀏覽器在查找子節(jié)點(diǎn)時(shí)會(huì)將它視為一個(gè)文本節(jié)點(diǎn)。從圖中也可以看出 childNodes 返回的也是數(shù)組。
那如果是<p#contentId>呢？
nodeType 的值有12種，常用的也就三種：1表示元素節(jié)點(diǎn)，2表示屬性節(jié)點(diǎn)，3表示文本節(jié)點(diǎn)。
nodeValue 不僅可以獲取文本節(jié)點(diǎn)的值，還可以改變文本節(jié)點(diǎn)的值。
js的dom方法還有好多，可以看看這個(gè)W3school JS參考手冊(cè)，相信對(duì)初學(xué)者有很大幫助。
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
JavaScript和Vue分別實(shí)現(xiàn)逐字彈出(打字機(jī))效果
這篇文章主要為大家詳細(xì)介紹了如何通過CSS、JavaScript和Vue分別實(shí)現(xiàn)逐字彈出(打字機(jī))效果,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2024-01-01
javascript創(chuàng)建對(duì)象的3種方法
這篇文章主要介紹了javascript創(chuàng)建對(duì)象的3種方法,對(duì)比分析js創(chuàng)建對(duì)象三種方式的優(yōu)缺點(diǎn)，感興趣的小伙伴們可以參考一下2016-11-11
原生js實(shí)現(xiàn)針對(duì)Dom節(jié)點(diǎn)的CRUD操作示例
這篇文章主要介紹了原生js實(shí)現(xiàn)針對(duì)Dom節(jié)點(diǎn)的CRUD操作,結(jié)合實(shí)例形式分析了javascript操作dom節(jié)點(diǎn)的創(chuàng)建、獲取、增刪改查等相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
利用JS實(shí)現(xiàn)獲取當(dāng)前系統(tǒng)電量情況
在前端瀏覽器中我們可以通過使用JavaScript的navigator.getBattery()方法來獲取當(dāng)前系統(tǒng)的電池情況,本文將介紹如何使用這個(gè)API以及它在實(shí)際應(yīng)用中的使用,需要的可以參考下2023-12-12
JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果
這篇文章主要介紹了JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果的相關(guān)資料,非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JavaScript中innerHTML，innerText，outerHTML的用法及區(qū)別
在javascript中如果我們要獲取對(duì)象內(nèi)容，js為我們提供了三種方法outerhtml、innerhtml和innertext,但他們之間具體怎么使用與具體的區(qū)別在哪里，可能很多人不知道吧，接下來跟著小編一起來學(xué)習(xí)innerHTML，innerText，outerHTML的用法及區(qū)別吧。2015-09-09
這篇文章主要匯總了JavaScript 常見的繼承方式，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
js獲取多個(gè)tagname的節(jié)點(diǎn)數(shù)組
寫了個(gè)獲取多個(gè)tagname節(jié)點(diǎn)集合的小方法。類似于jQuery的$(‘iput,select,textarea’,'#form’)的效果，返回是按節(jié)點(diǎn)在原有文檔流中的順序返回的2013-09-09![js調(diào)試系列 斷點(diǎn)與動(dòng)態(tài)調(diào)試[基礎(chǔ)篇]](http://img.jbzj.com/images/xgimg/bcimg8.png)
js調(diào)試系列 斷點(diǎn)與動(dòng)態(tài)調(diào)試[基礎(chǔ)篇]
上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎(chǔ)知識(shí)，支持亂碼兄弟為大家?guī)砹薺s斷點(diǎn)與動(dòng)態(tài)調(diào)試方法，需要的朋友可以參考下2014-06-06
原生態(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄鷳B(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08