今天大概過了一下DOM的基本操作，如何獲取元素、事件基礎、如何操作元素對象。看着視頻學習的，知識量有的大，練習今天下午還沒有整完，就練習了一部分的知識點。就大概記錄一下今天的學習筆記吧。
DOM的概念
API的中文意思：應用程序編程接口
Web APIS ：DOM（文檔）和是BOM（瀏覽器）
DOM：文檔模型對象， 是一個供開發者直接使用的接口，不需要定義的。我們可以通過DOM對網頁的內容、結構和樣式進行操作。
DOM樹
網頁中的所有標籤都存在與DOM樹中，什麼是DOM樹呢？emmmmmm，就是樹狀結構嘛。
DOM樹由三部分組成：文檔、元素、節點
文檔：一個頁面就是一個文檔，DOM中用document 表示
元素：頁面中所有的標籤都是元素，DOM中用element 表示
節點：網頁中所有的內容都是節點(標籤、屬性、文本、註釋等) ，DOM中用node 表示
注意：DOM把以上文檔、元素、節點都看成對象
emmmmm，文字總是太枯燥了，反正現在先記住這三點就行了。具體含義，到後面學的多了就知道了。
獲取元素
ID獲取
getElementById('ID')
標籤名獲取
getElementByTagName('tagName')
獲取的是一個標籤名的集合，以僞數組的形式存儲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
我是一個div
</div>
<div>
這裏是一個盒子
</div>
<ul id="lis">
<li>知否知否，應是綠肥紅瘦</li>
<li>知否知否，應是綠肥紅瘦</li>
<li>知否知否，應是綠肥紅瘦</li>
</ul>
<ul>
<li>愛前端更愛學習11</li>
<li>愛前端更愛學習22</li>
<li>愛前端更愛學習33</li>
</ul>
<script>
//通過getElementsByTagName()方法 獲取的是有一個標籤名的集合，以爲僞數組的形式存儲的
var div = document.getElementsByTagName('div');
console.log(div);
var lis = document.getElementsByTagName('li');
console.log(lis);
// 如果想取出標籤集合中的元素對象，可以採用遍歷的方式
// 在方法的使用當中，如果是html標籤裏面的內容改變時，我們的js結構是不需要改變的
for (var i = 0; i < lis.length; i++) {
// lis[i] // 當前元素對象
console.log(lis[i]);
}
</script>
</body>
</html>
h5新增方法
getElementsByClassName('className') 類名---返回的是某些元素的集合
querySelector('selector') 返回指定選擇器的第一個元素對象
querySelectorAll('selector') 返回指定選擇器的所有元素對象
特殊元素的獲取方式 body html
document.body 獲取body元素對象
document.doucumentElement 獲取html元素對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
我是一個div
</div>
<ul class="lis">
<li>知否知否，應是綠肥紅瘦</li>
<li>知否知否，應是綠肥紅瘦</li>
<li>知否知否，應是綠肥紅瘦</li>
</ul>
<p class="meage">我是一個段落p1</p>
<p class="lis">p2</p>
<p>p3</p>
<script>
// 1.getElementsByClassName()方法返回的是某些元素的集合 通過獲取元素的類名獲取元素
var lisByClass = document.getElementsByClassName('lis');
console.log(lisByClass);
// 2.querySelector()通過獲取選擇器 獲取元素 只能獲取指定選擇器的第一個元素對象
// 類 .類名
// id #i名
var p = document.querySelector('p');
console.log(p); // 獲取了第一個p
// 3.querySelectorAll() 獲取的是指定選擇器的所有對象
var ps = document.querySelectorAll('p');
console.log(ps); // 獲取了文檔中所有的p標籤,是一個集合
// 獲取body 和html
var body = document.body;
var html = document.documentElement;
console.log(body);
console.log(html);
</script>
</body>
</html>
事件基礎
事件三要素
事件源: 事件被觸發的對象----是誰
事件類型: 如何觸發什麼事件----比如:鼠標經過 鼠標點擊(onclik) 敲擊鍵盤等事件
事件處理程序: 通過一個函數賦值的方式完成
執行事件步驟
獲取事件源---註冊事件(綁定事件)---添加事件處理程序(函數)
比如: 點擊按鈕,關閉窗口
事件源: 按鈕被點擊 窗口盒子不顯示， 事件源是按鈕和窗口盒子
事件類型: 被點擊 onclick事件
事件處理程序: function(){}
案例：點擊div，控制檯輸出“我被點擊了”
<div class="box">123</div>
<script>
// 點擊div 控制檯顯示 我被選中了
// 1.獲取事件源
var div = document.querySelector('.box');
// 2. 註冊事件
// div.onclick
// 3. 事件處理程序
div.onclick = function () {
console.log('我被選中了');
}
</script>
開關燈案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>開關燈</button>
<script>
// 默認爲開燈，點擊按鈕，是關燈，再點擊是開燈
// 一個按鈕兩個狀態 是一個算法：用一個變量flag，判斷flag的值，
// 如果是1就切換爲黑色 flag置0
// 如果是0就切換爲白色，flag置1
// 1.獲取事件源 按鈕被點擊 body背景發生變化
var btn = document.querySelector('button');
var body = document.body;
var flag = 0;
// 2.註冊事件 事件處理程序
// 點擊按鈕時 出發事件
btn.onclick = function () {
// flag = 0 背景爲黑色 關燈
// flag = 1 背景爲白色 開燈
if (flag == 0) {
body.style.backgroundColor = 'black';
flag = 1;
} else {
body.style.backgroundColor = '#fff';
flag = 0;
}
}
</script>
</body>
</html>
效果：點擊一下關燈，再點一下開燈，再點關燈.........這樣可以一直點。
一個按鈕兩個狀態 體現了一個算法：用一個變量flag，判斷flag的值
如果是1就切換爲黑色 flag置0
如果是0就切換爲白色 flag置1
操作對象
操作對象是DOM的核心重點。DOM操作可以改變網頁的內容、結構、樣式。可以利用DOM操作元素來改變元素裏面的內容。以下介紹的都是對象的屬性。
改變元素內容
element.innerText = '更改後的內容'
識別不了HTML標籤 去除空格和換行 非標準
element.innerHTML = '更改後的內容'
可以識別HTML標籤 在控制檯輸出是時可以輸出標籤
保留空格和換行
W3C標準 推薦使用
innerText方法和inner HTML方法的主要區別：
常用元素的屬性操作
src、href、title、alt等屬性的操作。今天主要學習的是src的操作。
案例：點擊按鈕，實現圖片的轉換；不同時間，顯示不同的照片和問候語
emmmmm，這案例吧，應該分開做的，爲了放便我放一起了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 200px;
}
div {
margin-top: 20px;
}
button {
margin-left: 20px;
}
</style>
</head>
<body>
<!-- 實現圖片的切換 -->
<button class="lyf">李易峯</button>
<button class="xzq">薛之謙</button>
<div>
<img src="./img/lyf.jpg" title="李易峯">
<p>親，早上好，記得寫代碼</p>
</div>
<script>
// 點擊按鈕， 實現圖片的轉換
// 1.獲取事件源
var lyf = document.querySelector('.lyf'); //類選擇器
var xzq = document.querySelector('.xzq');
var img = document.querySelector('img'); // 元素選擇器
// 2.註冊事件 程序處理
lyf.onclick = function () {
img.src = './img/lyf.jpg';
img.title = '李易峯';
}
xzq.onclick = function () {
img.src = './img/xzq.jpg';
img.title = '薛之謙';
}
// 案例中出現的錯誤
// onclick寫錯
// 獲取元素方法使用不熟練
// 事件源沒有找全
// 實現分時顯示不同圖片，顯示不同問候語 ----- 改變的是元素的內容
var toTalk = document.querySelector('p');
var zly = document.querySelector('.zly');
var date = new Date();
var hour = date.getHours();
if (hour < 12) {
img.src = './img/lyf.jpg';
toTalk.innerHTML = '李易峯問候：親，早上好，記得寫代碼';
} else if (hour < 17) {
img.src = './img/xzq.jpg';
toTalk.innerHTML = '薛之謙問候：親，下午好，記得寫代碼'
} else {
img.src = './img/zly.jpg';
toTalk.innerHTML = '趙麗穎問候：親，晚上好，記得寫代碼'
}
</script>
</body>
</html>
點擊顯示圖片切換：不會弄動圖，要是想看看效果的話，隨便在網上找個圖換個圖試試就行。
根據當下時間自動切換圖片和問候語：因爲現在是晚上所以顯示晚上
今天就學習了這麼多，表單屬於的操作和對樣式的具體操作，今天是整不完了，明天再繼續完善。
加油加油！！！ 每天進步一點點。