DOM解讀 DOM概念 - document object model：文檔對象模型 操作文檔的一套方法，document是一個對象，是dom的頂級對象，屬於window的一個對象，並且可以說是最出色的一個兒子。 DOM元素的獲取： document.getElementById("id名字") / ...
DOM概念 - document object model：文檔對象模型
操作文檔的一套方法，document是一個對象，是dom的頂級對象，屬於window的一個對象，並且可以說是最出色的一個兒子。
-
document.getElementById("id名字") //根據ID名字來獲取標簽；
-
document.getElementByTagName("標簽名") //根據標簽名來獲取；
-
document.getElementByClassName("類名") //根據類名來獲取；
-
document.getElementByName("name的屬性值") //根據name屬性來獲取；
-
document.querySelector(css選擇器) //根據CSS選擇器來獲取；
-
document.querySelectorAll(css選擇器) //根據CSS選擇器來獲取所有滿足條件的元素；
//3、5、6在IE中不相容
DOM元素的操作：
內容操作：
-
元素.innerText //文本內容操作；
-
元素.innerHTML //帶標簽的內容操作；
-
元素.value //表單元素的內容操作（input類型）
-
元素.outText //包含自身的標簽；
-
元素.outHTML //包含自身的標簽；
屬性操作：
-
元素.getAttribute("屬性名") //獲取屬性的值，只能獲取不能修改
-
元素.setAttribute("屬性名","屬性值") //修改屬性的值，相當於重新設置
-
元素.removeAttribute("屬性名") //刪除屬性
//也可以直接通過"."來操作 元素.屬性 = ""; //（通常不在標簽上顯示）
類名、樣式操作：
-
元素.style.css(屬性名) = "值"；//設置樣式；
-
元素.className = "值"; //設置class類名；
-
元素.className = ""; //清空class類名；
DOM節點：
概念：組成HTML頁面的所有內容，都叫做節點；
組成： //（元素、文本、註釋、屬性等節點）
元素節點：（主要介紹）
元素節點的獲取：
-
元素.children //獲取所有的子元素；
-
元素.firstElementChild //獲取第一個子元素；
-
元素.lastElementChild //獲取最後一個子元素；
-
元素.previousElementSibling //獲取上一個兄弟元素；
-
元素.nextElementSibling //獲取下一個兄弟元素；
-
元素.parentElement //獲取父元素；
元素節點的操作：
var td = document.createElement('td'); //創建標簽節點
插入節點：
父元素.appendChild(子元素) //在父元素最後追加；
父元素.insertBefore(新元素，舊元素) //將新的元素插入到指定的子元素前面；
刪除節點：父元素.remove(子元素)；
複製節點：父元素.cloneNode(true)；
//有true就會連標簽裡面的內容也複製出來，沒有true只會複製空標簽；
替換節點：父元素.replaceChild(新元素，舊元素) //使用新的子元素替換掉舊的元素；
獲取元素節點的樣式:
window.getComputedStyle(元素)
元素.currentStyle (IE相容)
封裝之後：
-
function getStyle(ele,attr){
-
if(window.getComputedStyle){
-
return window.getComputedStyle(ele)[attr]
-
}else{
-
return ele.currentStyle[attr]
-
}
-
}
-
var div = document.getElementsByTagName("div")[0];
-
var w = getStyle(div,"width");
-
console.log(w);
獲取元素位置：
元素.offsetLeft 元素.offsetTop //這個就是於offsetParent的距離
元素.offsetParent //獲取到定位是參考的那個設置過定位的父元素；
獲取節點：
-
元素.childNodes //獲取所有子節點；
-
元素.parentNode //獲取父節點；
-
元素.firstChild //獲取第一個子節點；
-
元素.lastChild //獲取最後一個子節點；
-
元素.previousSibling //獲取上一個兄弟節點；
-
元素.nextSibling //獲取下一個兄弟節點；
節點屬性：
節點屬性 nodeType節點類型 元素節點1 文本節點3 註釋節點8
nodeName節點名稱 元素節點大寫的標簽名 文本節點#text 註釋節點#comment
nodeValue節點的值 元素節點null 文本節點文本內容 註釋節點註釋的內容
獲取/設置滾動過的距離
有文檔聲明的時候 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標簽
