一： HTML DOM

1.HTML DOM：文檔對象模型
JS操作HTML文檔的接口，JS改變頁面中的所有HTML元素、HTML屬性、CSS樣式，對所有世間做出反應;DOM是JS操作HTML和CSS的橋樑。
樹型結構
eg:

2.nodeType
1 元素節點
3 文字節點
8 註釋節點
9 docunment節點
10 DTD節點
3.節點的關係

二: HTML DOM 方法和屬性

1.節點操作
(1)改變元素節點中的內容
innerHTML 以HTML語法設置節點中的內容
innerText 以純文本的形式設置節點中的內容
(2)改變元素節點的CSS樣式
例如：oBox.style.backgroundColor = 'blue';
(3)改變元素節點的HTML屬性
打點更改即可
如果不是w3c，要使用setAttribute()和getAttribute()來設置、讀取
(4)節點的創建、移除和克隆
1>創建：document.createElement()
創建出來的是孤兒節點，並沒有被掛載到DOM樹上，看不見，繼續使用appengChild()/insertBefore()方法將孤兒節點插入到DOM樹上。

父節點.appendChild(孤兒節點)；
父節點.insertBefore(孤兒節點)；

2>移動：appengChild(),insertBefore()

新父親節點.appendChild(已經有父節的節點)；
新父親節點.insertBefore(已經有父親的節點，標杆子節點)

3>刪除：removeChild()從DOM中刪除

父節點.removeChild()

4>克隆節點:cloneNode()

var 孤兒節點 = 老節點.cloneNode()
var 孤兒節點 = 老節點.cloneNode(true),該節點的所有後代節點也都會被克隆

2.方法和屬性
(1)訪問元素節點常用的方法
document.getElementById() 通過ID獲取元素
document.getElementByTagName() 通過標籤名得到元素數組
document.getElementClassNmae() 通過類名得到元素數組
document.querySelvctor() 通過選擇器得到元素
document.querySelectorAll() 通過選擇器得到元素數組
(2)改變HTML元素
element.innerHTML = new html content 改變元素的inner HTML
element.attribute = new value 改變元素的inner HTML
element.setAttribute(attribute,value) 改變HTML元素的屬性值
element.style.property = new style 改變HTML元素的樣式
(3添加和刪除元素
document.createElement(element) 創建 HTML 元素
document.removeChild(element) 刪除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替換 HTML 元素
document.write(text) 寫入 HTML 輸出流
3.事件監聽
(1)onxxx,例如：onclick
document.getElementById(id).onclick=function(){code}
向onclick事件添加事件處理程序
(2)addEventListener()
(3)頁面事件監聽
onload 當頁面/圖像被完全加載
onunload 當用户退出頁面
4.事件傳播
盒子嵌套時事件監聽的執行順序：先從外到內，再從內到外
捕獲階段，冒泡階段
5.事件對象
(1)鼠標位置
clientX,clientY 鼠標指針相對於瀏覽器的水平、垂直座標
pageX,pageY 鼠標指針相對於整張網頁的水平、垂直座標
OffsetX,offsetY 鼠標指針相對於事件源元素的水平、垂直座標
(2)e.preventDefault()方法，阻止事件產生的“默認動作”
6.事件委託
利用事件冒泡機制，將後代元素事件委託給祖先
e.target屬性 觸發此事件的最早元素，即“事件源元素”
e.currentTarget 事件處理程序附加到的元素
(1)批量添加事件監聽
(2)新增元素動態綁定事件
7.定時器和延時器
setInterval()函數可以重複調用一個函數，再每次調用之間具有固定的時間間隔
例如：
setInterval(function(){ },2000)
clearInterval()消除一個定時器
延時器：setTimeout()
指定時間到了，會執行函數一次，不再重複執行
setTimeout是異步語句
函數節流：一個函數執行一次後，只有大於設定的執行週期後才允許執行第二次，藉助setTimeout延時器
lock = true;

三：瀏覽器對象模型BOM

1.window對象：
當前JS腳本運行所處的窗口，這個窗口包含DOM結構，window.document屬性就是document對象
1>全局變量是window的屬性：多個JS文件之間共享全局作用域
2>內置函數普遍多是window方法 window.hasOwnProperty()
3>窗口尺寸相關屬性
innerHeight,innerWidth內容區域的高度、寬度
outerHeight,outerWidth瀏覽器窗口的外高、外寬
獲得不包括滾動條的窗口寬度用 document.documentElement.clientWidth
4>resize事件
窗口大小改變之後，就會觸發resize事件，使用 window.onresize/window.addEventListener('resize')來綁定事件處理函數
5>已捲動高度
window.scrollY:垂直方向已滾動的像素值
6>scroll事件
在窗口被捲動之後，就會觸發scroll事件、可以使用 window.onscrool/window.addEventListener('scroll')來綁定事件處理函
2.location對象
(1)window.location標識當前所在網址，可以通過給這個屬性賦值命令瀏覽器進行頁面跳轉
(2)重新加載當前頁面
可以調用location的reload方法以重新加載當前的頁面，參數true表示強制從服務器強制加載

window.location.reload(true);

(3)GET請求查詢參數
window.location.search 當前瀏覽器的GET請求查詢參數
3.history對象
window.history 模擬瀏覽器回退按鈕
history.back() 點擊瀏覽器回退按鈕
history.forward()
歷史記錄長度

const historyLength = history.length

4.Navigator對象
window.navigator可以檢索navigator對象，內含有用户此次活動的瀏覽器的相關屬性和標識
1>屬性
appName 瀏覽器官方名稱
appVersion 瀏覽器版本
userAgent 瀏覽器的用户代理
platform 用户操作系統
5.Cookie
通過document.cookie，您可以讀取和寫入瀏覽器的Cookie。Cookie是一種存儲在用户計算機上的小型文本文件，用於在多次訪問之間存儲和檢索數據
讀取：

const cookieValue = document.cookie

寫入：

document.cookie = 'username=John;  expires=Fri,  31  Dec  2022  23:59:59  GMT; path=/';