1. 創(chuàng)建元素
document.write 方法寫入一個(gè)元素, 這種方式寫起來(lái)非常便捷演怎，但是對(duì)于復(fù)雜的內(nèi)容悠汽、元素關(guān)系拼接并不方便驾茴；
步驟
- 步驟一：創(chuàng)建一個(gè)元素费坊；
- 步驟二：插入元素到DOM的某一個(gè)位置；
創(chuàng)建元素： document.createElement(tag)
2. 插入元素
- node.append(...nodes or strings) —— 在 node 末尾 插入節(jié)點(diǎn)或字符串同窘，
- node.prepend(...nodes or strings) —— 在 node 開(kāi)頭 插入節(jié)點(diǎn)或字符串玄帕，
- node.before(...nodes or strings) —— 在 node 前面 插入節(jié)點(diǎn)或字符串，
- node.after(...nodes or strings) —— 在 node 后面 插入節(jié)點(diǎn)或字符串想邦，
- node.replaceWith(...nodes or strings) —— 將 node 替換為給定的節(jié)點(diǎn)或字符串裤纹。
3. 移除和克隆元素
移除元素我們可以調(diào)用元素本身的remove方法：
復(fù)制一個(gè)現(xiàn)有的元素，可以通過(guò)cloneNode方法：
可以傳入一個(gè)Boolean類型的值丧没，來(lái)決定是否是深度克掠ソ贰；
深度克隆會(huì)克隆對(duì)應(yīng)元素的子元素呕童，否則不會(huì)漆际；
4. 舊的元素操作方法
parentElem.appendChild(node)：
? 在parentElem的父元素最后位置添加一個(gè)子元素parentElem.insertBefore(node, nextSibling)：
在parentElem的nextSibling前面插入一個(gè)子元素；parentElem.replaceChild(node, oldChild)：
在parentElem中夺饲，新元素替換之前的oldChild元素奸汇；parentElem.removeChild(node)：
在parentElem中，移除某一個(gè)元素往声；
5. 元素的大小擂找、滾動(dòng)
? clientWidth：contentWith+padding（不包含滾動(dòng)條）
? clientHeight：contentHeight+padding
? clientTop：border-top的寬度
? clientLeft：border-left的寬度
? offsetWidth：元素完整的寬度
? offsetHeight：元素完整的高度
? offsetLeft：距離父元素的x
? offsetHeight：距離父元素的y
? scrollHeight：整個(gè)可滾動(dòng)的區(qū)域高度
? scrollTop：滾動(dòng)部分的高度
6. window的大小、滾動(dòng)
- window的width和height
- innerWidth浩销、innerHeight：獲取window窗口的寬度和高度（包含滾動(dòng)條）
- outerWidth贯涎、outerHeight：獲取window窗口的整個(gè)寬度和高度（包括調(diào)試工具、工具欄）
- documentElement.clientHeight慢洋、documentElement.clientWidth：獲取html的寬度和高度（不包含滾動(dòng)條）
- window的滾動(dòng)位置：
- scrollX：X軸滾動(dòng)的位置（別名pageXOffset）
- scrollY：Y軸滾動(dòng)的位置（別名pageYOffset）
- 也有提供對(duì)應(yīng)的滾動(dòng)方法：
- 方法 scrollBy(x,y) ：將頁(yè)面滾動(dòng)至 相對(duì)于當(dāng)前位置的 (x, y) 位置塘雳；
- 方法 scrollTo(pageX,pageY) 將頁(yè)面滾動(dòng)至 絕對(duì)坐標(biāo)陆盘；
