一、總結
一句話總結:
dom操作有用原生js的dom操作,也可以用對js封裝過的jquery等插件來更加友善的進行dom操作
- dom是什麼?
對于JavaScript,為了能夠使JavaScript操作Html,JavaScript就有了一套自己的dom程式設計接口。
對于Html,dom使得html形成一棵dom樹,類似于一顆家族樹一樣,一層接一層,子子孫孫。
- Html的DOM樹是什麼?
HTML中的每個标簽元素,屬性,文本都能看做是一個DOM的節點,這些dom節點構成了一個樹形結構
- 原生的dom操作指的是什麼?
就是用原生的js進行的操作,相對的就是非原生操作,比如用jquery操作dom
二、DOM操作基礎介紹
-
了解DOM:
DOM(Document Object Model ,文檔對象模型)一種獨立于語言,用于操作xml,html文檔的應用程式設計接口。怎麼說,我從兩個角度了解:
- 對于JavaScript,為了能夠使JavaScript操作Html,JavaScript就有了一套自己的dom程式設計接口。
- 對于Html,dom使得html形成一棵dom樹,類似于一顆家族樹一樣,一層接一層,子子孫孫。
是以說,有了DOM,在我看來就是相當于JavaScript拿到了鑰匙一樣可以去操作Html的每一個節點,觸摸Html每寸肌膚。(咳。。。)
-
介紹Html的DOM樹:
說明:html标簽通過
後才會形成浏覽器的解析
,此後HTML中的每個dom樹
,标簽元素
,屬性
都能看做是一個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">百度</a>
</div>
</body>
</html>
對應的DOM樹結構圖:
-
認識JavaScript中的DOM程式設計接口:
上面說了html形成的dom樹,接着說下通過js的dom程式設計接口去操作這棵dom樹。
JavaScriptDOM操作的常用方法和屬性:
(常用方法)
擷取節點:
document.getElementById(idName) //通過id号來擷取元素,傳回一個元素對象
document.getElementsByName(name) //通過name屬性擷取id号,傳回元素對象數組
document.getElementsByClassName(className) //通過class來擷取元素,傳回元素對象數組(ie8以上才有
document.getElementsByTagName(tagName) //通過标簽名擷取元素,傳回元素對象數組
document.qurySelectorAll('選擇器') // 通過選擇器擷取一組元素
document.querySelector("選擇器") // 通過選擇器擷取單個元素
擷取/設定元素的屬性值:
element.getAttribute(attributeName) //括号傳入屬性名,傳回對應屬性的屬性值
element.setAttribute(attributeName,attributeValue) //傳入屬性名及設定的值
建立節點Node:
document.createElement("h3") //建立一個html元素,這裡以建立h3元素為例
document.createTextNode(String) //建立一個文本節點
document.createDocumentFragment() //建立一個DOM片段
添加、移除、替換、插入(父元素調用)
element.appendChild() //添加
element.removeChild() //移除
element.replaceChild() //替換
element.insertBefore() //插入
(常用屬性)
擷取目前元素的父節點 :
element.parentNode //傳回目前元素的父節點對象
擷取目前元素的子節點:
element.chlidren //傳回目前元素所有子元素節點對象,隻傳回HTML節點
element.chilidNodes //傳回目前元素所有子節點,包括文本,HTML,屬性節點。(回車也會當做一個節點)
element.firstChild //傳回目前元素的第一個子節點對象
element.lastChild //傳回目前元素的最後一個子節點對象
擷取目前元素的同級元素:
element.nextElementSibling //傳回目前元素的下一個同級元素 沒有就傳回null
element.previousElementSibling //傳回目前元素上一個同級元素 沒有就傳回null
擷取目前元素的文本:
element.innerHTML //傳回元素的所有文本,包括html代碼
element.innerText //傳回目前元素的自身及子代所有文本值,隻是文本内容,不包括html代碼
擷取目前節點的節點類型:
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的操作,隻會有利而無害。