js常用DOM方法詳解

更新時(shí)間：2017年02月04日 15:38:13 作者：libra天秤

本文主要介紹了js常用的DOM方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

介紹幾個(gè)js DOM的常用方法

獲取元素節(jié)點(diǎn) getElementById getElementsByTagName getElementsByClassName

先寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)做測(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ì)象（ ）。見(jiàn)下圖：

2. getElementsByTagName

1.還是先定義變量 var contentTag = document.getElementsByTagName("p");

2.接著我輸出 contentTag ，它返回 HTMLCollection [ <p#contentId>, <p.contentClass> ] 共兩個(gè)，一個(gè)以#開(kāi)頭表示id，另一個(gè)以.開(kāi)頭表示Class name。

3.繼續(xù) contentTag[0] 輸出 

contentTag[1] 輸出 

由此可知 getElementsByTagName 返回的是數(shù)組！

3. getElementsByClassName

　1. var contentClass = document.getElementsByClassName("contentClass");

2. contentClass 輸出 HTMLCollection [ <p.contentClass> ] 返回一個(gè)元素對(duì)象數(shù)組，即使只有一個(gè)。

3. contentClass[0] 輸出 

我們常用的還有 getAttribute，setAttribute，ChildNodes, nodeType, nodeValue, firstChild, lastChild 方法獲取一些信息。

4.分別用 getAttribute 和 setAttribute 獲取和設(shè)置屬性：

改變style屬性后：

5.那么這是childNOdes：

也就是說(shuō)， 在遇到塊元素時(shí)，塊元素之間會(huì)有一個(gè)換行符 ,瀏覽器在查找子節(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í)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript和Vue分別實(shí)現(xiàn)逐字彈出(打字機(jī))效果
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)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)電量情況
在前端瀏覽器中我們可以通過(guò)使用JavaScript的navigator.getBattery()方法來(lái)獲取當(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ū)別在哪里，可能很多人不知道吧，接下來(lái)跟著小編一起來(lái)學(xué)習(xí)innerHTML，innerText，outerHTML的用法及區(qū)別吧。
2015-09-09
JavaScript 常見(jiàn)的繼承方式匯總
這篇文章主要匯總了JavaScript 常見(jiàn)的繼承方式，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-09-09
js獲取多個(gè)tagname的節(jié)點(diǎn)數(shù)組
寫(xiě)了個(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ǔ)篇]
上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎(chǔ)知識(shí)，支持亂碼兄弟為大家?guī)?lái)了js斷點(diǎn)與動(dòng)態(tài)調(diào)試方法，需要的朋友可以參考下
2014-06-06
原生態(tài)js,鼠標(biāo)按下后,經(jīng)過(guò)了那些單元格的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇原生態(tài)js,鼠標(biāo)按下后,經(jīng)過(guò)了那些單元格的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08