DOM概念 - document object model：文檔對象模型

操作文檔的一套方法，document是一個對象，是dom的頂級對象，屬于window的一個對象，并且可以說是最出色的一個兒子。

DOM元素的獲取：

1. document.getElementById("id名字") //根據(jù)ID名字來獲取標簽；

2. document.getElementByTagName("標簽名") //根據(jù)標簽名來獲取；

3. document.getElementByClassName("類名") //根據(jù)類名來獲取；

4. document.getElementByName("name的屬性值") //根據(jù)name屬性來獲?。?/p>

5. document.querySelector(css選擇器) //根據(jù)CSS選擇器來獲??；

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

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

DOM元素的操作：

內容操作：

1. 元素.innerText //文本內容操作；

2. 元素.innerHTML //帶標簽的內容操作；

3. 元素.value //表單元素的內容操作（input類型）

4. 元素.outText //包含自身的標簽；

5. 元素.outHTML //包含自身的標簽；

屬性操作：

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

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

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

   //也可以直接通過"."來操作 元素.屬性 = ""; //（通常不在標簽上顯示）

類名、樣式操作：

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

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

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

DOM節(jié)點：

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

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

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

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

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

2. 元素.firstElementChild //獲取第一個子元素；

3. 元素.lastElementChild //獲取最后一個子元素；

4. 元素.previousElementSibling //獲取上一個兄弟元素；

5. 元素.nextElementSibling //獲取下一個兄弟元素；

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

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

var td = document.createElement('td'); //創(chuàng)建標簽節(jié)點

插入節(jié)點：

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

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

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

復制節(jié)點：父元素.cloneNode(true)；

//有true就會連標簽里面的內容也復制出來，沒有true只會復制空標簽；

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

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

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 //這個就是于offsetParent的距離

元素.offsetParent //獲取到定位是參考的那個設置過定位的父元素；

獲取節(jié)點：

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

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

3. 元素.firstChild //獲取第一個子節(jié)點；

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

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

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

節(jié)點屬性：

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

nodeName節(jié)點名稱 元素節(jié)點大寫的標簽名 文本節(jié)點#text 注釋節(jié)點#comment

nodeValue節(jié)點的值 元素節(jié)點null 文本節(jié)點文本內容 注釋節(jié)點注釋的內容

獲取/設置滾動過的距離

有文檔聲明的時候 document.documentElement.scrollTop document.documentElement.scrollLeft 沒有文檔聲明的時候 document.body.scrollTop document.body.scrollLeft

//做一個回到頂部的效果

獲取瀏覽器大小

document.documentElement.clientWidth document.documentElement.clientHeight //不包含滾動條的尺寸

獲取html基本結構

document.documentElement是html標簽 document.bodybody標簽 document.headhead標簽 document.titletitle標簽