JavaScript DOM常用操作代碼匯總

更新時間：2020年07月03日 14:52:34 作者：奔跑的太陽花

這篇文章主要介紹了JavaScript DOM常用操作代碼匯總,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

1.理解DOM：

　　DOM（Document Object Model ，文檔對象模型）一種獨立于語言，用于操作xml，html文檔的應用編程接口。

　　怎么說，我從兩個角度理解：

對于JavaScript，為了能夠使JavaScript操作Html，JavaScript就有了一套自己的dom編程接口。

對于Html，dom使得html形成一棵dom樹，類似于一顆家族樹一樣，一層接一層，子子孫孫。

　　所以說，有了DOM，在我看來就是相當于JavaScript拿到了鑰匙一樣可以去操作Html的每一個節(jié)點，觸摸Html每寸肌膚。（咳。。。）

2.介紹Html的DOM樹：

說明：html標簽通過瀏覽器的解析后才會形成dom樹，此后HTML中的每個標簽元素，屬性，文本都能看做是一個DOM的節(jié)點，JavaScript都能通過dom的提供的編程接口操作到每個節(jié)點，去了解瀏覽器的渲染機制能夠幫助我們了解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操作的常用方法和屬性：:

常用方法:

獲取節(jié)點：

document.getElementById(idName) //通過id號來獲取元素，返回一個元素對象
document.getElementsByName(name) //通過name屬性獲取id號，返回元素對象數(shù)組
document.getElementsByClassName(className) //通過class來獲取元素，返回元素對象數(shù)組（ie8以上才有）
document.getElementsByTagName(tagName) //通過標簽名獲取元素，返回元素對象數(shù)組

獲取/設置元素的屬性值：

element.getAttribute(attributeName) //括號傳入屬性名，返回對應屬性的屬性值
element.setAttribute(attributeName,attributeValue) //傳入屬性名及設置的值

創(chuàng)建節(jié)點Node：

document.createElement("h3") //創(chuàng)建一個html元素，這里以創(chuàng)建h3元素為例
document.createTextNode(String); //創(chuàng)建一個文本節(jié)點；
document.createAttribute("class"); //創(chuàng)建一個屬性節(jié)點，這里以創(chuàng)建class屬性為例

增添節(jié)點：

element.appendChild(Node); //往element內(nèi)部最后面添加一個節(jié)點，參數(shù)是節(jié)點類型
elelment.insertBefore(newNode,existingNode); //在element內(nèi)部的中在existingNode前面插入newNode

刪除節(jié)點：

element.removeChild(Node) //刪除當前節(jié)點下指定的子節(jié)點，刪除成功返回該被刪除的節(jié)點，否則返回null

常用屬性:

獲取當前元素的父節(jié)點：

element.parentNode //返回當前元素的父節(jié)點對象

獲取當前元素的子節(jié)點：