~~~ /* * 操作DOM的屬性和方法 * [獲取元素或者元素集合] * getElementById * ->上下文只能是document（只有document這個實例的原型鏈上才能找到這個方法，其它實例都找不到） * ->ID重復了獲取第一個 * ->IE6~7中會把表單元素的name當做id使用 * getElementsByTagName * ->獲取當前上下文中，所有子子孫孫中標簽名叫做XXX的元素 * getElementsByClassName * ->IE6~8中不兼容 * getElementsByName * ->在IE瀏覽器中只對表單元素的name起作用 * ->上下文也只能是document * querySelector * querySelectorAll * ->不兼容IE6~8 * ->沒有DOM映射 * document.documentElement * document.body * document.head * ... * * [描述節點和節點之間關系的屬性] * nodeType nodeName nodeValue * 元素節點 1 大寫標簽名 null * 文本節點 3 #text 文本內容 * 注釋節點 8 #comment 注釋內容 * 文檔節點 9 #document null * * childNodes：所有子節點 * children：所有元素子節點（IE6~8中會把注釋當做元素節點） * parentNode * previousSibling / previousElementSibling * nextSibling * firstChild * lastChild * * [動態操作DOM] * createElement * createDocumentFragment * appendChild * insertBefore * cloneNode(true/false) * removeChild * set/get/removeAttribute * * [散] * xxx.style.xxx=xxx 設置行內樣式 * =>xxx.style.xxx 獲取行內樣式 * * xxx.className='xxx' * * xxx.onclick=function... * * ... */ /* * JS盒子模型屬性 * =>在JS中通過相關的屬性可以獲取(設置)元素的樣式信息, * 這些屬性就是盒子模型屬性（基本上都是有關于樣式的） * * client * top * left * width * height * * offset * top * left * width * height * parent * * scroll * top * left * width * height */ ~~~