DOM
基本概念
所謂DOM是給檔案中的每一個標簽都對應的創建一個物件，
我們要為每一個HTML標簽創建一個物件的物件，
我們可以通過這個對應的物件來操作這個標簽（所有屬性，內容，樣式等等），
創建的這個物件和編程語言是無關的，
JS就實作了DOM模型，也就是說，在JS中默認就會為頁面的所有的標簽創建一個對應的物件模型，我們可以通過對應的API獲取這些物件模型，通過這些物件模型操作頁面的標簽，
通過JS操作DOM物件
DOM物件模型的最頂層是一個物件：document，表示整個檔案，這個物件是內置的，不需要你創建，直接可以使用， 就好像我們之前使用的一個API document.getElementById(id);
tips: JS是基于物件的語言， --- 我個人理解，JS更加的面向物件，
[1]獲取頁面中的標簽對應的DOM物件，
JS給我們提供了幾個API：（一些提供的方法,這些方法都是document物件的方法）
①通過元素的id直接獲取一個指定的標簽的DOM物件： document.getElementById(id)；
引數ID就是要獲取的元素的ID
案例：
var usernameDom = document.getElementById("username");
l(usernameDom);
alert(usernameDom);
瀏覽器控制臺輸出的效果：
瀏覽器格式化之后得到的效果，也就是物件的toString，
alert的效果：
上面的toString是[object HTMLInputElement]
tips：頁面上不能出現相同id的元素，如果出現相同id的元素，我們通過id獲取這個元素的時候，只能獲取到第一個，
②獲取頁面的所有的元素
document.all; 這里回傳的是一個陣列
var all = document.all;
l(all);
③獲取指定型別的元素
documetn.xxxx
-
Document.anchors
-
Document.body
-
Document.forms
-
Document.images
-
Document.links
④幾個常用的獲取頁面一組元素的API
document.getElementsByTagName(tagName) : 獲取指定標簽名的一組元素，回傳一個物件陣列，
Document.getElementsByClassName(): 獲取一組有相同的class的元素，
document.querySelector(selector)： 回傳第一個符合選擇器要求的dom元素,這里的selector就是CSS的選擇器
document.querySelectorAll(selector): 獲取所有的符合指定的選擇器的元素的陣列
案例：
// 通過標簽的名字獲取一組元素
var divs = document.getElementsByTagName("div");
l(divs);
alert(divs);
for(var x = 0 ; x < divs.length;x ++){
l(divs[x]);
}
alert一個HTMLdom元素集合：
object HTMLCollection
控制臺輸出：
HTMLCollection(2)[div,div]
這些集合可以按照陣列的方式進行遍歷，
其他的API的案例：
// 通過類名獲取
var es = document.getElementsByClassName("red");
l(es);
tips: 只要這個標簽擁有這個類名即可，不在乎是否還有其他的類名，
通過CSS 選擇器選擇元素：
// 通過類選擇器獲取一個元素(如果有多個，只獲取第一個)
var es = document.querySelector("table .red");
l(es);
// 通過類選擇器獲取一組元素
var es = document.querySelectorAll(".red,.blue");
l(es);
[2]使用DOM操作標簽的屬性
所謂操作標簽的屬性，就是給標簽的屬性賦值和獲取標簽的屬性值，
比如之前用過的 xxxx.value
基本的語法：
var xxDom = getxxxx/queryxxxx
// 獲取屬性值
var attrValue = https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/xxDom.屬性名
// 設定屬性值
xxDom.屬性名 = attrValue
幾乎所有的屬性值都可以操作，
幾個特殊的屬性值：
readonly，disabled，checked，selected
這些屬性在HTML標簽中存在即生效，但是在JS中，只有設定為true才，false就是不生效，
案例1：獲取和設定輸入框的value屬性
<h2>獲取和設定輸入框的value屬性</h2>
<input type="text" id="username">
<input type="button" value=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"哈哈" onclick="getUserName()">
<input type="text" id="result">
<script type="text/javascript">
function getUserName(){
var usernameDom = $("username");
var resultDom = $("result");
resultDom.value = usernameDom.value;
}
</script>
案例2：設定圖片的src屬性：
<div>
<img style="border: 1px solid;" id="bigImg" src=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"images/img-1.jpg" alt="">
</div>
<div>
<ul>
<li style="display: inline-block;">
<img onmouseover="showImg('1')" src=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"images/img-1.jpg" width="30" border="1px solid;" alt="">
</li>
<li style="display: inline-block;">
<img onmouseover="showImg('2')" src=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"images/img-2.jpg" width="30" border="1px solid;" alt="">
</li>
<li style="display: inline-block;">
<img onmouseover="showImg('3')" src=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"images/img-3.jpg" width="30" border="1px solid;" alt="">
</li>
<li style="display: inline-block;">
<img onmouseover="showImg('4')" src=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"images/img-4.jpg" width="30" border="1px solid;" alt="">
</li>
<li style="display: inline-block;">
<img onmouseover="showImg('5')" src=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"images/img-5.jpg" width="30" border="1px solid;" alt="">
</li>
<li style="display: inline-block;">
<img onmouseover="showImg('6')" src=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"images/img-6.jpg" width="30" border="1px solid;" alt="">
</li>
</ul>
</div>