2021.8.6今日小結
今天重新瞭解了DOM,什麼是DOM就是一個文件物件模型，怎麼來操作DOM，怎麼來查詢DOM，然後如何修改DOM。利用JavaScript程式碼來進行頁面元素的修改。做出一個點選切換圖片的修改，一個全選和全不選的小功能。
什麼是DOM
Document Object Model
文件物件模型，通過DOM可以來任意來修改網頁中各個內容
文件
文件指的是網頁，一個網頁就是一個文件
物件
物件指將網頁中的每一個節點都轉換為物件
轉換完物件以後，就可以以一種純面向物件的形式來操作網頁了
模型
模型用來表示節點和節點之間的關係，方便操作頁面
節點（Node）
節點是構成網頁的最基本的單元，網頁中的每一個部分都可以稱為是一個節點
雖然都是節點，但是節點的型別卻是不同的
常用的節點
文件節點 （Document），代表整個網頁
元素節點（Element），代表網頁中的標籤
屬性節點（Attribute），代表標籤中的屬性
文字節點（Text），代表網頁中的文字內容
DOM操作
DOM查詢
在網頁中瀏覽器已經為我們提供了document物件，
它代表的是整個網頁，它是window物件的屬性，可以在頁面中直接使用。
document查詢方法：
根據元素的id屬性查詢一個元素節點物件：
document.getElementById("id屬性值");
根據元素的name屬性值查詢一組元素節點物件:
document.getElementsByName("name屬性值");
根據標籤名來查詢一組元素節點物件：
document.getElementsByTagName("標籤名");
元素的屬性：
讀取元素的屬性：
語法：元素.屬性名
例子：ele.name
ele.id
ele.value
ele.className
修改元素的屬性：
語法：元素.屬性名 = 屬性值
innerHTML
使用該屬性可以獲取或設定元素內部的HTML程式碼
事件（Event）
事件指的是使用者和瀏覽器之間的互動行為。比如：點選按鈕、關閉視窗、滑鼠移動。。。
我們可以為事件來繫結回撥函式來響應事件。
繫結事件的方式：
1.可以在標籤的事件屬性中設定相應的JS程式碼
例子：
<button onclick="js程式碼。。。">按鈕</button>
2.可以通過為物件的指定事件屬性設定回撥函式的形式來處理事件
例子：
<button id="btn">按鈕</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
文件的載入
瀏覽器在載入一個頁面時，是按照自上向下的順序載入的，載入一行執行一行。
如果將js程式碼編寫到頁面的上邊，當代碼執行時，頁面中的DOM物件還沒有載入，
此時將會無法正常獲取到DOM物件，導致DOM操作失敗。
解決方式一：
可以將js程式碼編寫到body的下邊
<body>
<button id="btn">按鈕</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
</body>
解決方式二：
將js程式碼編寫到window.onload = function(){}中
window.onload 對應的回撥函式會在整個頁面載入完畢以後才執行，
所以可以確保程式碼執行時，DOM物件已經載入完畢了
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
};
};
</script>
怎麼DOM查詢
通過具體的元素節點來查詢
元素.getElementsByTagName()
通過標籤名查詢當前元素的指定後代元素
元素.childNodes
獲取當前元素的所有子節點
會獲取到空白的文字子節點
元素.children
獲取當前元素的所有子元素
元素.firstChild
獲取當前元素的第一個子節點
元素.lastChild
獲取當前元素的最後一個子節點
元素.parentNode
獲取當前元素的父元素
元素.previousSibling
獲取當前元素的前一個兄弟節點
元素.nextSibling
獲取當前元素的後一個兄弟節點
innerHTML和innerText
這兩個屬性並沒有在DOM標準定義，但是大部分瀏覽器都支援這兩個屬性
兩個屬性作用類似，都可以獲取到標籤內部的內容，
不同是innerHTML會獲取到html標籤，而innerText會自動去除標籤
如果使用這兩個屬性來設定標籤內部的內容時，沒有任何區別的
讀取標籤內部的文字內容
<h1>h1中的文字內容</h1>
元素.firstChild.nodeValue
document物件的其他的屬性和方法
document.all
獲取頁面中的所有元素，相當於document.getElementsByTagName("*");
document.documentElement
獲取頁面中html根元素
document.body
獲取頁面中的body元素
document.getElementsByClassName()
根據元素的class屬性值查詢一組元素節點物件
這個方法不支援IE8及以下的瀏覽器
document.querySelector()
根據CSS選擇器去頁面中查詢一個元素
如果匹配到的元素有多個，則它會返回查詢到的第一個元素
document.querySelectorAll()
根據CSS選擇器去頁面中查詢一組元素
會將匹配到所有元素封裝到一個數組中返回，即使只匹配到一個
DOM修改
document.createElement()
可以根據標籤名建立一個元素節點物件
document.createTextNode()
可以根據文字內容建立一個文字節點物件
父節點.appendChild(子節點)
向父節點中新增指定的子節點
父節點.insertBefore(新節點,舊節點)
將一個新的節點插入到舊節點的前邊
父節點.replaceChild(新節點,舊節點)
使用一個新的節點去替換舊節點
父節點.removeChild(子節點)
刪除指定的子節點
推薦方式：子節點.parentNode.removeChild(子節點)