這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹JavaScript如何操作DOM，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來(lái)堅(jiān)持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺(jué)傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！

在了解DOM之前，我們先來(lái)看一下window對(duì)象

Window對(duì)象保存著瀏覽器的信息，可以說(shuō)是“瀏覽器本身”吧。

這么說(shuō)可能有點(diǎn)難以理解，我們來(lái)實(shí)際看看對(duì)象的內(nèi)容吧。

在基本的HTML文件的基礎(chǔ)上，用console.log調(diào)用Window對(duì)象。

代碼如下

運(yùn)行效果如下

將指向window的三角形打開(kāi)，結(jié)果如下

通過(guò)這種方式，Window對(duì)象的所有屬性和方法都出現(xiàn)了。

簡(jiǎn)單的屬性包括以下的內(nèi)容

outerHeight →瀏覽器高度屬性

outerWidth  →瀏覽器寬度屬性

screenX  →表示瀏覽器左上角X坐標(biāo)的屬性

screenY  →表示瀏覽器左上角Y坐標(biāo)的屬性

另外，如果打開(kāi)location屬性，在location屬性具有的對(duì)象中，有對(duì)此選項(xiàng)卡當(dāng)前訪問(wèn)位置的顯示。

例如，href屬性包含此選項(xiàng)卡正在訪問(wèn)的網(wǎng)頁(yè)的URL。

通過(guò)這種方式，Window對(duì)象存儲(chǔ)當(dāng)前打開(kāi)的選項(xiàng)卡具有的所有信息。

接下來(lái)我們?cè)賮?lái)看看document對(duì)象 

document屬性是此Window對(duì)象的一個(gè)非常重要的屬性。此外，有document屬性的是document對(duì)象。

所謂的document對(duì)象是保存在HTML中所表現(xiàn)的內(nèi)容的對(duì)象。

簡(jiǎn)單地說(shuō)，Window對(duì)象是瀏覽器本身，而document對(duì)象是正在訪問(wèn)的Web站點(diǎn)的本身。

當(dāng)你向內(nèi)看時(shí)，有各種各樣的屬性。例如，body表示HTML body標(biāo)記的內(nèi)容。

某些屬性不會(huì)出現(xiàn)在HTML中，但它們也會(huì)分散在文檔對(duì)象中。

最后我回到DOM，顧名思義，文檔對(duì)象模型（DOM）允許你通過(guò)文檔對(duì)象獲取和操作各個(gè)元素。

實(shí)際上，我們可以進(jìn)行基本操作，例如獲取，刪除和添加網(wǎng)站的各個(gè)元素。

下面我們就來(lái)看看DOM樹(shù)結(jié)構(gòu)

讓我們看看如何操作DOM。

在個(gè)別的操作方法之前，我們先看一下“樹(shù)結(jié)構(gòu)”的DOM的結(jié)構(gòu)。

在將HTML轉(zhuǎn)換為docuent對(duì)象時(shí)，Window對(duì)象以樹(shù)結(jié)構(gòu)的形式保存信息。

總之，就是父元素下有多個(gè)子元素，子元素作為父元素下又有多個(gè)子元素.......

在基本HTML文件中利用

和

標(biāo)簽添加了一些元素。

代碼如下

  
    
    
  
  
    
標(biāo)題
    
元素1
    
元素2
    
  

運(yùn)行結(jié)果如下

在查看器（element）中可以很容易看到HTML轉(zhuǎn)換為了DOM。

在父元素下，你可以很清楚的看到兩個(gè)元素和，

然后，將和作為父元素，下面有< meta > < title >元素，有< h2 > < p > < script >要素作為子要素并行存在著。

這樣，每個(gè)子元素都會(huì)成為父元素，也擁有了子元素......這就進(jìn)一步的形成了一個(gè)嵌套結(jié)構(gòu)。

最后，我們就來(lái)詳細(xì)看看JavaScript中如何操作DOM

獲取元素的方法：getElementById（id）;

首先，獲取元素有一個(gè)名為getElementById（id）的便捷方法;

基于給予元素的id（ById），我們得到一個(gè)具有該id（get）的元素。

我們來(lái)看具體的代碼示例：

這樣就會(huì)取得id為title的h2的元素

運(yùn)行結(jié)果如下

元素內(nèi)文本的取得和改變：textContent屬性

如果只想獲取h2中的字符串“標(biāo)題”，那么可以使用textContent屬性。

代碼如下

運(yùn)行結(jié)果如下

通過(guò)這種方式，你就可以看到僅獲取了文本部分的“標(biāo)題”。

還可以使用textContent屬性改變文本的內(nèi)容。

代碼如下

運(yùn)行結(jié)果如下

創(chuàng)建元素的方法：createElement(tag_type);和createTextNode(text);

元素具有h2和p等標(biāo)簽類型。它也被指定為字符串。

此外，如果要使該元素具有文本，可以使用createTextNode（text）創(chuàng)建它;

已經(jīng)有了“元素1”和“元素2”的p標(biāo)簽，再創(chuàng)建一個(gè)有“元素3”的文字的p標(biāo)簽吧。

首先，我們這樣寫(xiě)

  
    
    
  
  
    
標(biāo)題
    
元素1
    
元素2
    
  

運(yùn)行效果如下

但是你卻沒(méi)有看到增加的元素3，這是因?yàn)檫€沒(méi)有指定p標(biāo)簽和文本“元素3”屬于哪個(gè)父元素，所以為了顯示“元素3”，我們需要將其中一個(gè)現(xiàn)有元素指定為父元素，并將其添加為子元素。

所以，下面我們就來(lái)看看添加元素的方法：appendChild（element）;

在制作中，新制作了具有“要素3”的文字的p要素。但是，因?yàn)橹皇亲隽?，所以還在樹(shù)結(jié)構(gòu)中還沒(méi)有被組合的狀態(tài)。當(dāng)然，不能在瀏覽器上顯示。因此，必須把擁有“要素3”這個(gè)文本的p要素作為作為父母要素的子要素追加。

為了在特定的父母要素下追加子元素的方法是蘋(píng)果。

（一個(gè)要素（elemen）作為孩子（Chil）追加（蘋(píng)果）！很容易理解。

指定父母，把制作了的p要素作為孩子要素進(jìn)行追加。

這次，因?yàn)橄肱c已經(jīng)某個(gè)p要素（要素1、要素2）并行排列，所以將BOdy標(biāo)簽指定為父母。

我們新創(chuàng)建了一個(gè)帶有文本“元素3”的p元素。但是，因?yàn)樗皇莿?chuàng)建了，所以還在樹(shù)結(jié)構(gòu)中但處于沒(méi)有被組合的狀態(tài)，因此不能在瀏覽器上顯示。所以我們需要添加帶有文本“元素3”的p元素作為某個(gè)父元素的子元素。

在特定的父元素下添加子元素的方法是appendChild(element);

下面將指定父元素并嘗試將創(chuàng)建的p元素添加為子元素。

在這種情況下，由于我們想要并行排列已存在的p標(biāo)簽（元素1，元素2），我們將body標(biāo)記指定為父元素。

代碼如下

  
    
    
  
  
    
標(biāo)題
    
元素1
    
元素2
    
  

運(yùn)行結(jié)果如下

關(guān)于JavaScript如何操作DOM就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文名稱：JavaScript如何操作DOM
文章來(lái)源：http://weahome.cn/article/jhjisp.html