DOM概念 - document object model：文檔對(duì)象模型

操作文檔的一套方法，document是一個(gè)對(duì)象，是dom的頂級(jí)對(duì)象，屬于window的一個(gè)對(duì)象，并且可以說(shuō)是最出色的一個(gè)兒子。

DOM元素的獲?。?/h2>

1. document.getElementById("id名字") //根據(jù)ID名字來(lái)獲取標(biāo)簽；

2. document.getElementByTagName("標(biāo)簽名") //根據(jù)標(biāo)簽名來(lái)獲??；

3. document.getElementByClassName("類名") //根據(jù)類名來(lái)獲??；

4. document.getElementByName("name的屬性值") //根據(jù)name屬性來(lái)獲??；

5. document.querySelector(css選擇器) //根據(jù)CSS選擇器來(lái)獲取；

6. document.querySelectorAll(css選擇器) //根據(jù)CSS選擇器來(lái)獲取所有滿足條件的元素；

   //3、5、6在IE中不兼容

DOM元素的操作：

內(nèi)容操作：

1. 元素.innerText //文本內(nèi)容操作；

2. 元素.innerHTML //帶標(biāo)簽的內(nèi)容操作；

3. 元素.value //表單元素的內(nèi)容操作（input類型）

4. 元素.outText //包含自身的標(biāo)簽；

5. 元素.outHTML //包含自身的標(biāo)簽；

屬性操作：

1. 元素.getAttribute("屬性名") //獲取屬性的值，只能獲取不能修改

2. 元素.setAttribute("屬性名","屬性值") //修改屬性的值，相當(dāng)于重新設(shè)置

3. 元素.removeAttribute("屬性名") //刪除屬性

   //也可以直接通過(guò)"."來(lái)操作 元素.屬性 = ""; //（通常不在標(biāo)簽上顯示）

類名、樣式操作：

1. 元素.style.css(屬性名) = "值"；//設(shè)置樣式；

2. 元素.className = "值"; //設(shè)置class類名；

3. 元素.className = ""; //清空class類名；

DOM節(jié)點(diǎn)：

概念：組成HTML頁(yè)面的所有內(nèi)容，都叫做節(jié)點(diǎn)；

組成： //（元素、文本、注釋、屬性等節(jié)點(diǎn)）

元素節(jié)點(diǎn)：（主要介紹）

元素節(jié)點(diǎn)的獲?。?/p>

1. 元素.children //獲取所有的子元素；

2. 元素.firstElementChild //獲取第一個(gè)子元素；

3. 元素.lastElementChild //獲取最后一個(gè)子元素；

4. 元素.previousElementSibling //獲取上一個(gè)兄弟元素；

5. 元素.nextElementSibling //獲取下一個(gè)兄弟元素；

6. 元素.parentElement //獲取父元素；

元素節(jié)點(diǎn)的操作：

var td = document.createElement('td'); //創(chuàng)建標(biāo)簽節(jié)點(diǎn)

插入節(jié)點(diǎn)：

父元素.appendChild(子元素) //在父元素最后追加；

父元素.insertBefore(新元素，舊元素) //將新的元素插入到指定的子元素前面；

刪除節(jié)點(diǎn)：父元素.remove(子元素)；

復(fù)制節(jié)點(diǎn)：父元素.cloneNode(true)；

//有true就會(huì)連標(biāo)簽里面的內(nèi)容也復(fù)制出來(lái)，沒有true只會(huì)復(fù)制空標(biāo)簽；

替換節(jié)點(diǎn)：父元素.replaceChild(新元素，舊元素) //使用新的子元素替換掉舊的元素；

獲取元素節(jié)點(diǎn)的樣式:

window.getComputedStyle(元素)

元素.currentStyle (IE兼容)

封裝之后：

1. function getStyle(ele,attr){

2. if(window.getComputedStyle){

3. return window.getComputedStyle(ele)[attr]

4. }else{

5. return ele.currentStyle[attr]

6. }

7. }

8. var div = document.getElementsByTagName("div")[0];

9. var w = getStyle(div,"width");

10. console.log(w);

獲取元素位置：

元素.offsetLeft 元素.offsetTop //這個(gè)就是于offsetParent的距離

元素.offsetParent //獲取到定位是參考的那個(gè)設(shè)置過(guò)定位的父元素；

獲取節(jié)點(diǎn)：

1. 元素.childNodes //獲取所有子節(jié)點(diǎn)；

2. 元素.parentNode //獲取父節(jié)點(diǎn)；

3. 元素.firstChild //獲取第一個(gè)子節(jié)點(diǎn)；

4. 元素.lastChild //獲取最后一個(gè)子節(jié)點(diǎn)；

5. 元素.previousSibling //獲取上一個(gè)兄弟節(jié)點(diǎn)；

6. 元素.nextSibling //獲取下一個(gè)兄弟節(jié)點(diǎn)；

節(jié)點(diǎn)屬性：

節(jié)點(diǎn)屬性 nodeType節(jié)點(diǎn)類型 元素節(jié)點(diǎn)1 文本節(jié)點(diǎn)3 注釋節(jié)點(diǎn)8

nodeName節(jié)點(diǎn)名稱 元素節(jié)點(diǎn)大寫的標(biāo)簽名 文本節(jié)點(diǎn)#text 注釋節(jié)點(diǎn)#comment

nodeValue節(jié)點(diǎn)的值 元素節(jié)點(diǎn)null 文本節(jié)點(diǎn)文本內(nèi)容 注釋節(jié)點(diǎn)注釋的內(nèi)容

獲取/設(shè)置滾動(dòng)過(guò)的距離

有文檔聲明的時(shí)候 document.documentElement.scrollTop document.documentElement.scrollLeft 沒有文檔聲明的時(shí)候 document.body.scrollTop document.body.scrollLeft

//做一個(gè)回到頂部的效果

獲取瀏覽器大小

document.documentElement.clientWidth document.documentElement.clientHeight //不包含滾動(dòng)條的尺寸

獲取html基本結(jié)構(gòu)

document.documentElement是html標(biāo)簽 document.bodybody標(biāo)簽 document.headhead標(biāo)簽 document.titletitle標(biāo)簽