DOM:是文檔對(duì)象模型，是一套操作HTML和XML文檔的API
DOM的作用:
1.找對(duì)象(元素)
getElementById() //根據(jù)id屬性獲取一個(gè)DOM對(duì)象
getElementsByTagName()//根據(jù)標(biāo)簽返回多個(gè)DOM對(duì)象
H5中新增:
1. getElementsByClassName() 通過(guò)類名獲取元素，以類數(shù)組形式存在
2.document.querySelector() 通過(guò)css選擇器獲取元素捏膨，返回匹配條件的第一個(gè)元素
3.document.querySelectorAll() 通過(guò)CSS選擇器獲取元素塘淑，以類數(shù)組形式存在亏镰。
DOM對(duì)象的屬性和HTML的標(biāo)簽屬性幾乎是一致的
src title className href
DOM對(duì)象中的表單對(duì)象擁有的屬性:
type value checked selected disabled
DOM對(duì)象的解析:
innerHTML會(huì)把內(nèi)容解析到DOM樹上
-獲取標(biāo)簽之間的內(nèi)容
-設(shè)置標(biāo)簽之間的內(nèi)容
2.設(shè)置對(duì)象的屬性
getAttribute()
setAttribute()
removeAttribute()
直接使用.屬性的方式不可以設(shè)置自定義屬性(IE除外)淆衷，getAttribute什么時(shí)候都可以使用
設(shè)置元素的樣式
1.className
2.style
無(wú)論設(shè)置還是獲取都只能操作行內(nèi)樣式
DOM的style屬性只能獲取標(biāo)簽中使用style設(shè)置的樣式
無(wú)法獲取嵌入或外部樣式
style.cssText獲取style里面的字符串
style里面的常用屬性:
backgroundColor
backgroundImage
color
width
height
border
opacity
注意DOM對(duì)象style的屬性和標(biāo)簽中style內(nèi)的值不一樣，因?yàn)镴S中-不能作為表示符
h5新增:
1、Node.classList.add('class') 添加class
2纳寂、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切換class泻拦，有則移除毙芜，無(wú)則添加
4、Node.classList.contains('class') 檢測(cè)是否存在class
Node指一個(gè)有效的DOM節(jié)點(diǎn)争拐，是一個(gè)通稱腋粥。
h5中可以自定義屬性:
在HTML5中我們可以自定義屬性，其格式如下data-*=""陆错，例如
data-info="我是自定義屬性"灯抛，通過(guò)Node.dataset['info'] 我們便可以獲取到自定義的屬性值。
Node.dataset是以類對(duì)象形式存在的
當(dāng)標(biāo)簽的自定義屬性格式為:data-my-name時(shí),則需要以駝峰格式才能正確獲取:Node.dataset['myName']
<!--給標(biāo)簽添加自定義屬性,必須以data-開(kāi)頭-->
例子:
<div class="box" title="盒子" data-my-name="zs" data-content="我是一個(gè)div">div</div>
<script>
var box = document.querySelector(".box")
//獲取標(biāo)簽的自定義屬性 需要通過(guò)dataset[]方式來(lái)獲取
console.log(box.dataset["content"])
//給自定義的屬性賦值
box.dataset["content"] = "這是一個(gè)測(cè)試而已"
//當(dāng)標(biāo)簽的自定義屬性格式為:data-my-name時(shí),則需要以駝峰格式才能正確獲取:Node.dataset['myName']
console.log(box.dataset['myName'])
3.動(dòng)態(tài)的創(chuàng)建和刪除元素
方式一:innerHTML
方式二:createElement()
方式三:document.write()
appendChild()
removeChild()
insertBefore()
replaceChild()
4.動(dòng)態(tài)的創(chuàng)建和刪除表格
方式1
createElement()
方式2
rows (只讀音瓷，table和textarea能用)
insertRow() (只有table能調(diào)用)
deleteRow() (只有table能調(diào)用)
cells (只讀对嚼，table和textarea能用)
insertCell() (只有tr能調(diào)用)
deleteCell() (只有tr能調(diào)用)
5.事件-觸發(fā)響應(yīng)
事件源
事件名稱
事件程序
