DOM是什么?
- DOM(文檔對(duì)象模型)是針對(duì) HTML 和 XML 文檔的一個(gè) API,通過(guò) DOM 可以去改變文檔。
- 一個(gè) web 網(wǎng)頁(yè)就是一個(gè)文檔,使用 DOM 改變文檔就是使用 DOM 定義的一些方法操作具體的節(jié)點(diǎn)。
eg:用getElementById 來(lái)根據(jù)元素 id 來(lái)查找元素節(jié)點(diǎn)
<html lang="en">
<head>
<title>我是title</title>
</head>
<body>
<a href="#">我是文本鏈接</a>
<p id="myId">我是p標(biāo)簽</p>
</body>
</html>
對(duì)于一個(gè) HTML 來(lái)說(shuō),文檔節(jié)點(diǎn) Document (是看不到的)就是它的根節(jié)點(diǎn),這個(gè)根節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象就是 document ,我們可以通過(guò)根節(jié)點(diǎn)來(lái)訪問(wèn)它的子節(jié)點(diǎn)(Element 、Text)
Document 類型
Document 是整個(gè)文檔的根節(jié)點(diǎn),我們想要訪問(wèn)某個(gè)節(jié)點(diǎn)的時(shí)候都必須通過(guò) document 這個(gè)實(shí)例對(duì)象
常用屬性:
document.documentElement // 可以直接拿到 html 節(jié)點(diǎn)的引用
document.title // 可以直接獲取 title 節(jié)點(diǎn)的文本 “我是title”
document.URL // 獲取 URL
常用方法:
ocument.getElementById // docment.getElementById('myId') 可以獲取到屬性 id 為 ‘myId’ 的節(jié)點(diǎn),在上面的代碼中獲取的也就是 p 節(jié)點(diǎn)
document.getElementsByTagName //docment.getElementByTagName('p') 可以獲取到節(jié)點(diǎn)為 p 的所有節(jié)點(diǎn)集
Element 類型
- 使用 document 對(duì)象來(lái)獲取節(jié)點(diǎn)時(shí),返回的節(jié)點(diǎn)類型就是 Element 類型
- 想要對(duì)獲取的節(jié)點(diǎn)進(jìn)行操作,我們只需要使用 Element 包含的屬性和方法
常用的屬性:
var myNode = document.getElementById('myId');
myNode.id // 獲取該節(jié)點(diǎn)的 id ,即 ‘myId‘
myNode.tagName // 獲取該節(jié)點(diǎn)的節(jié)點(diǎn)名,即 'P',大部分瀏覽器返回的標(biāo)簽名都是大寫(xiě)
myNode.className //獲取該節(jié)點(diǎn)的 class
操作節(jié)點(diǎn)屬性的常用方法:
//假如我們有一個(gè) input,我們想要獲取 input 的 type 屬性,并對(duì) type 屬性進(jìn)行操作
<input type='text' id='input'/>
var myNode = document.getElementById('input')
myNode.getAttribute('type') // 獲取屬性值,即 ‘text’
myNode.setAttribute('type','password') // 將 type 屬性值改為 password 類型
myNode.removeAttribute('type') // 移除 type 屬性