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

10多年的靈山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整靈山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“靈山網(wǎng)站設(shè)計(jì)”,“靈山網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

在了解DOM之前，我們先來看一下window對象

Window對象保存著瀏覽器的信息，可以說是“瀏覽器本身”吧。

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

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

代碼如下

運(yùn)行效果如下

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

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

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

outerHeight →瀏覽器高度屬性

outerWidth  →瀏覽器寬度屬性

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

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

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

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

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

接下來我們再來看看document對象

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

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

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

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

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

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

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

下面我們就來看看DOM樹結(jié)構(gòu)

讓我們看看如何操作DOM。

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

在將HTML轉(zhuǎn)換為docuent對象時(shí)，Window對象以樹結(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)。

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

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

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

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

我們來看具體的代碼示例：

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

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

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

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

代碼如下

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

通過這種方式，你就可以看到僅獲取了文本部分的“標(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)簽吧。

首先，我們這樣寫

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

運(yùn)行效果如下

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

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

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

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

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

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

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

我們新創(chuàng)建了一個(gè)帶有文本“元素3”的p元素。但是，因?yàn)樗皇莿?chuàng)建了，所以還在樹結(jié)構(gòu)中但處于沒有被組合的狀態(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)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章名稱：JavaScript如何操作DOM-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://weahome.cn/article/dsgeoh.html