DOM操作
-
getElementById() 返回帶走指定ID的元素
-
getElementByTagName() 返回指定標籤名稱的所有元素的節點（節點數組）
-
getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表(節點數組)
-
getElementsByTagName()返回包含帶有指定name屬性值的所有元素節點列表（節點數組）。
-
querySelector()返回文檔中匹配指定CSS選擇器的一個元素。
-
querySelectorAll()返回文檔中全部匹配指定CSS選擇器的所有元素。
-
nextSibling 獲取下一個兄弟節點（文檔 包括有空格換行等）
-
nextElementSibling 獲取下一個兄弟節點可以忽略文檔節點，直接獲取元素節點
-
previousSibling 獲取上一個兄弟節點 （文檔 包括有空格換行等）
-
previousElementSibling 獲取上一個兄弟節點 可以忽略文檔節點，直接獲取元素節點
-
lastChild 最後一個子節點，會返回指定節點的最後一個子節點，包含文本節點
-
lastElementChild 最後一個子節點，會忽略文本節點，直接獲取元素節點
-
childNodes 會返回包含指定節點所有子節點的數組，包括非元素節點
-
children 會返回包含指定節點所有元素子節點的數組，沒有兼容問題
-
parentNode 獲取父節點
-
document.createElement(‘標籤名’) 創建元素節點，會創建一個指定類型的標籤，類型是給定的標籤名
-
element.appendChild 會指定的節點插入到element節點的末尾
-
replaceChild(new,old) 用新節點替換掉指定的子節點
-
removeChild() 刪除當前節點指定的子節點。
-
remove() 刪除指定節點
-
設置或修改id，class屬性
//id 重新賦值
wrap.id = 'box';
wrap.className = 'box';
- 設置或修改style中的屬性
- 注：其他樣式寫法和示例相同,
所有在層疊樣式表中帶有“-”的屬性，在JS中全部用駝峯命名，省略中間的“-”！
element.style.width = '100px';
element.src = './imgs/0.png';
element.style.fontSize = '30px';
獲取滾動條的偏移量
Chrome支持
- 縱向滾動條 document.body.scrollTop
- 橫向滾動條 document.body.scrollTop
Firefor支持
-縱向滾動條 document.documentElement.scollTop
- 橫向滾動條 docuemnt.documentElement.scollLeft
safari支持
- 縱向滾動條 window.pageYOffset
- 橫向滾動條 window.pageXOffset
IE（有DOCTYPE）支持
- 縱向滾動條 document.documentElement.scollTop
- 橫向滾動條 document.documentElement.scollLeft
IE(沒有DOCTYPE聲明)
- 縱向滾動條 document.body.scollTop
- 橫向滾動條 document.body.scollLeft
兼容寫法
//兼容縱向滾動條
var scrollTop=document.Element.scrollTop||window.pageYofset||document.body.scrollTop
//兼容橫向滾動條
var scrollLeft=document.Element.scrollLeft||window.pageXOffset||document.body.scrollLeft
獲取窗口可見高度
- 獲取窗口可見高度
document.documentElement.clientHeight
- 獲取窗口可見寬度
document.documentElement.clientWidth
獲取頁面整體高度和寬度
- 獲取頁面整體的高度
document.document.scrollHeight
- 獲取頁面整體的寬度
document.documentElement.scrollWidth
滾動條高度+當前窗口的可見高度==頁面的整體高度
resize 事件
當窗口過框架被調整大小時發生
window.onresize = function(){...}