溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹關于JavaScript中DOM的簡介，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
1.理解DOM：
DOM（Document Object Model ，文檔對象模型）一種獨立于語言，用于操作xml，html文檔的應用編程接口。
怎么說，我從兩個角度理解：
對于JavaScript，為了能夠使JavaScript操作Html，JavaScript就有了一套自己的dom編程接口。
對于Html，dom使得html形成一棵dom樹，類似于一顆家族樹一樣，一層接一層，子子孫孫。
所以說，有了DOM，在我看來就是相當于JavaScript拿到了鑰匙一樣可以去操作Html的每一個節點，觸摸Html每寸肌膚。（咳。。。）
2.介紹Html的DOM樹：
說明：html標簽通過瀏覽器的解析后才會形成dom樹，此后HTML中的每個標簽元素，屬性，文本都能看做是一個DOM的節點，JavaScript都能通過dom的提供的編程接口操作到每個節點，去了解瀏覽器的渲染機制能夠幫助我們了解dom。
Html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>
</head>
<body>
<div>
<a href="www.baidu.com" rel="external nofollow" >百度</a>
</div>
</body>
</html>對應的DOM樹結構圖：
3.認識JavaScript中的DOM編程接口：
上面說了html形成的dom樹，接著說下通過js的dom編程接口去操作這棵dom樹。
JavaScriptDOM操作的常用方法和屬性：:
常用方法:
獲取節點：
獲取/設置元素的屬性值：
創建節點Node：
增添節點：
刪除節點：
element.removeChild(Node) //刪除當前節點下指定的子節點，刪除成功返回該被刪除的節點，否則返回null
常用屬性:
獲取當前元素的父節點 ：
element.parentNode //返回當前元素的父節點對象
獲取當前元素的子節點：
獲取當前元素的同級元素：
獲取當前元素的文本：
獲取當前節點的節點類型：node.nodeType //返回節點的類型,數字形式（1-12）常見幾個1：元素節點，2：屬性節點，3：文本節點。
設置樣式：element.style.color=“#eea”; //設置元素的樣式時使用style，這里以設置文字顏色為例。
大家都會覺得用jQuery來操作dom會更加的方便且好用，因為jq對js的dom進行了封裝，使得我們Write Less, Do More。但是我覺得還是要總結一下原生js的dom，從根本上了解js對dom的操作，只會有利而無害。
以上是關于JavaScript中DOM的簡介的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
