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(){...}