js學習（十一）-- DOM的簡介、事件簡單介紹、文件載入、DOM查詢
(https://www.w3school.com.cn/js/js_htmldom.asp)
DOM簡介(P91)
DOM全稱：Document Object Model文件物件模型
JS中通過DOM來對HTML文件進行操作，只要理解了DOM就可以隨心所欲的操作WEB頁面
- 文件
整個HTML網頁文件 - 物件
將網頁中的每一個部分都轉換為一個物件 - 模型
實用模型來表示物件之間的關係，方便獲取物件
節點
節點Node，是構成我們網頁的最基本組成部分，網頁中的每一部分都可以成為是一個節點
文件節點：整個HTML文件
元素節點： HTML文件中的HTML標籤
屬性節點： 元素的屬性
文字節點： HTML標籤中的文字內容
瀏覽器已經為我們提供了文件節點，這個物件是window屬性
可以在頁面中直接使用，文件節點代表的是整個網頁
<button id = "btn">按鈕</button> <script type = "text/javascript"> //獲取到按鈕物件 var btn = document.getElementById("btn"); //修改按鈕的文字 btn.innerHTML = "I`m Button"; </script>
- innerHTML
返回節點的內容包括html標籤 - innerText
返回節點的內容，去除html標籤
事件
(https://www.w3school.com.cn/jsref/dom_obj_event.asp)
事件就是文件或瀏覽器視窗中發生的一些特定的互動瞬間
js和HTML之間的互動是通過事件實現的
比如點選按鈕。滑鼠移動，關閉視窗
可以在事件對應的屬性中設定一些js程式碼，當事件被觸發時，這些程式碼將會執行
<button id = "btn" onclick="alert("hello world!");">按鈕</button> 這種寫法我們稱為結構和行為耦合，不方便維護，不推薦使用
（推薦使用）在js中寫，可以為按鈕的對應事件繫結處理函式的形式來響應事件
<button id = "btn" onclick="alert("hello world!");">按鈕</button>
<script type = "text/javascript">
//獲取到按鈕物件
var btn document.getElementById("btn");
//為按鈕繫結一個單擊事件
//當事件處觸發時，其對應的函式將會被呼叫
btn.onclick = function(){
alert("hello world!");
};
</script>
文件的載入
瀏覽器在載入一個頁面的時候，是按照至上向下的順序載入的
讀取到一行就執行一行
如果將script標籤寫到頁面的上邊
在執行程式碼時，頁面還沒有載入
使用onload讓頁面載入完成之後再執行
<script type = "text/javascript">
window.onload = function(){
//獲取到按鈕物件
var btn document.getElementById("btn");
//為按鈕繫結一個單擊事件
//當事件處觸發時，其對應的函式將會被呼叫
btn.onclick = function(){
alert("hello world!");
};
}
</script>
可用於開啟頁面後的自動載入，也可讓程式碼不受HTML的順序限制
DOM的查詢
(https://www.w3school.com.cn/jsref/dom_obj_document.asp)
獲取元素節點
通過document物件呼叫
getElementById()
通過id屬性獲取一個元素節點物件
getElementsByTagName()
通過標籤名獲取一組元素節點物件
var lis = document.getElementsByTagName("li");
這個方法會給我們返回一個類陣列物件，所有查詢到的元素都會封裝到物件中
getElementsByName()
通過name屬性獲取一組元素節點物件
<input type="radio" name="gender" value="male"/>
<script>
var inputs = documnet.getElementsByName("gender");
alert(inputs.length);
/*
*innerHTML用於獲取元素內部的HTML程式碼的內容，對於自結束標籤，這個屬性沒有意義
*/
</script>
獲取元素節點的子節點
通過具體的元素節點呼叫
getElementsByTagName()
方法，返回當前節點的指定標籤名後代節點
childNodes
屬性，表示當前節點的所有子節點
會獲取包括文字節點在內的所有節點
根據DOM標籤間空白也會當成文字節點
children
children屬性可以獲取當前元素的所有子元素，不包括空白部分
firstChild
屬性，表示當前節點的第一個子節點（包括空白文字節點）
firstElementChild
獲取當前元素的第一個子元素
lastChild
屬性，表示當前節點的最後一個子節點
<ul id = "city">
<li id="bj">beijing</li>
<li >shanghai</li>
<li >tokyo</li>
<li >shouer</li>
</ul>
<script>
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//獲取id為city的元素
var city = document.getElementById("city");
//查詢#city下所有li節點
city.getElementsByTagName("li");
//返回#city的所有子節點
var cns = city.childNodes;
}
</script>
獲取父節點和兄弟節點
通過具體的節點呼叫
parentNode
屬性，表示當前節點的父節點
previousSibling
屬性，表示當前節點的前一個兄弟節點（也可能獲取到空白文字）
previousElementSibling
獲取前一個兄弟元素，不包括空白
nextSibling
屬性，表示當前節點的後一個兄弟節點（也可能獲取到空白文字）
nextElementSibling
獲取後一個兄弟元素，不包括空白
節點的屬性
var fc = bj.firstChild;
alert(fc.nodeValue);
DOM查詢補充
獲取body標籤物件
var body = document.body;
獲取html根標籤
var html = document.documentElement;
獲取所有元素
var all = documnet.all;
或者 all = document.getElementsByTagName("*");
for(var i=0;i<all.length;i++){
console.log(all[i]);
}
根據元素的class屬性查詢一組元素的結點物件
- getElementsByClassName()返回的是陣列
var box1 = document.getElementsByClassName("box1");
ie8不支援，一般不用
querySelector和querySelectorAll
- querySelector
需要一個選擇器的字串作為引數，可以根據一個CSS選擇器來查詢一個元素節點物件
<body>
<div class = “box1”>
<div></div>
</div>
</body>
<script>
var div = documnet.querySelector(".box1 div");
</script>
只會找第一個class為box1的，後面的就管不著了
- querySelectorAll
可以找到所有的class為box1的元素，即使符合條件的元素只有一個，他也會返回陣列
練習
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var items = document.getElementsByName("items");
//全選按鈕，點選按鈕後，四個多選框全都被選中
//1，#checkAllBtn
//為id為checkedAllBtn的按鈕繫結一個單機響應函式
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
//設定四個多選框變成選中狀態
//遍歷items
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
checkedAllBox.checked=true;
}
//全不選
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
checkedAllBox.checked=false;
}
//反選
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
checkedAllBox.checked=true;
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
if(!items[i].checked){
checkedAllBox.checked=false;
}
}
}
//提交，獲取名字
var senBtn = document.getElementById("senBtn");
senBtn.onclick = function(){
var str="";
for(var i=0;i<items.length;i++){
if(items[i].checked){
str=str+items[i].value+",";
}
}
alert(str);
}
//checkbox的全選/全不選
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
if(checkedAllBox.checked){
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
}else{
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
}
}
for(var i=0;i<items.length;i++){
items[i].onclick = function(){
checkedAllBox.checked=true;
for(var j=0;j<items.length;j++){
if(!items[j].checked){
checkedAllBox.checked=false;
//一旦進入判斷得出結果，就break
break;
}
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="籃球" />籃球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 選" />
<input type="button" id="checkedNoBtn" value="全不選" />
<input type="button" id="checkedRevBtn" value="反 選" />
<input type="button" id="senBtn" value="提 交" />
</form>
</body>
</html>
圖片居中
margin：0 auto；
文字居中
text-align：center