一、BOM對象
BOM（Browser Object Model）是指瀏覽器對象模型，可以對瀏覽器窗口進行訪問和操作。使用 BOM，開發者可以移動窗口、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。
使 JavaScript 有能力與瀏覽器"對話"。
1. window對象
window對象是客戶端JavaScript最高層對象之一，由於window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，可以省略window對象的引用。例如：window.document.write()可以簡寫成：document.write()。
- 所有瀏覽器都支持 window 對象。它表示瀏覽器窗口；
- 概念上講：一個html文檔對應一個window對象；
- 功能上講：控制瀏覽器窗口的；
- 使用上講：window對象不需要創建對象，直接使用即可；
- 所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員；
- 全局變量是 window 對象的屬性。全局函數是 window 對象的方法。
接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。
window對象方法
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt() 顯示可提示用戶輸入的對話框。
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close() 關閉瀏覽器窗口。
setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
setTimeout() 在指定的毫秒數后調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
window.alert("Hello world！");
或者直接alert("Hello world！");
var ret=confirm("您確定要刪除嗎?"); // 有返回值
console.log(ret);
// prompt()：彈出一個窗口，用戶輸入什么就返回什么
var ret=prompt("請輸入...")
console.log(ret)
//open()：打開一個新的窗口並進入指定網址
open("http://www.baidu.com");
參數1什么都不填就是打開一個新窗口，參數2填入新窗口的名字(一般可以不填)，參數3新打開窗口的參數
open('','','width=200,resizable=no,height=100');
//close()：將當前文檔窗口關閉
close();
setInterval()和clearInterval()
// 每隔一段時間就執行一次相應函數 let timer = setInterval(function(){ alert("Hello World!")}, 3000); // 取消setInterval設置；語法：clearInterval(setinterval的返回值); clearInterval(timer);
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>定時器</title>
<script>
var intervalId;
function f() {
var current_time = (new Date()).toLocaleString();
var inputEle = document.getElementById("i1");
inputEle.value = current_time;
}
function start() {
f();
if (intervalId === undefined) {
intervalId = setInterval(f, 1000); // 每過1秒就調用函數f。
}
}
function end() {
clearInterval(intervalId);
intervalId = undefined; // 取消setInterval設置
}
</script>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="開始" id="start" onclick="start();">
<input type="button" value="結束" id="end" onclick="end();">
</body>
</html>
setTimeout()和clearTimeout()
var ID = setTimeout(f,2000); // 只調用一次對應函數 function f() { alert('Hello world！'); } // clearTimeout(ID); 觸發什么行為后再執行着這句
2. Location對象
Location 對象包含有關當前 URL 的信息。
Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。
Location 對象方法：
location.reload() //重新加載頁面，即刷新 // 跳轉到指定頁面（可以返回上一個頁面） location.assign("URL") location.href="URL" // 跳轉到指定頁面（不可以返回上一個頁面） location.replace("URL")
3. History對象 （了解即可）
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。
history.forward() // 前進一頁 history.back() // 后退一頁
二、DOM對象
1. 什么是DOM？
DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素。
DOM 是 W3C（萬維網聯盟）的標准。DOM 定義了訪問 HTML 和 XML 文檔的標准：
"W3C 文檔對象模型（DOM）是中立於平台和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"
W3C DOM 標准被分為 3 個不同的部分：
- 核心 DOM - 針對任何結構化文檔的標准模型
- XML DOM - 針對 XML 文檔的標准模型
- HTML DOM - 針對 HTML 文檔的標准模型
什么是 XML DOM？
XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法。
什么是 HTML DOM？
HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。
2. DOM節點
根據 W3C 的 HTML DOM 標准，HTML 文檔中的所有內容都是節點(NODE)：
- 整個文檔是一個文檔節點（document對象）
- 每個 HTML 元素是元素節點（element 對象）
- HTML 元素內的文本是文本節點（text對象）
- 每個 HTML 屬性是屬性節點（attribute對象）
- 注釋是注釋節點（comment對象）
畫dom樹是為了展示文檔中各個對象之間的關系，用於對象的導航。這里只需要記住 Document 對象和 Element 對象即可。
節點（自身）屬性：
- attributes - 節點（元素）的屬性節點
- nodeType – 節點類型
- nodeValue – 節點值
- nodeName – 節點名稱
- innerHTML - 節點（元素）的文本值（記住這個就可以了）
導航屬性：
- parentNode - 節點（元素）的父節點 （一般用這個）
- firstChild – 節點下第一個子元素
- lastChild – 節點下最后一個子元素
- childNodes - 節點（元素）的子節點
JavaScript 可以通過DOM創建動態的 HTML：
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
3. 查找標簽
直接查找
document.getElementsByClassName 根據class屬性獲取 document.getElementsByTagName 根據標簽名獲取標簽合集 document.getElementById 根據id屬性值獲取一個標簽 document.getElementsByName() 根據name屬性值獲取一個標簽 示例： var ele=document.getElementsByClassName("c1")[0]; console.log(ele)
間接查找
parentElement //父節點標簽元素 children //所有子標簽 firstElementChild //第一個子標簽元素 lastElementChild //最后一個子標簽元素 nextElementtSibling //下一個兄弟標簽元素 previousElementSibling //上一個兄弟標簽元素 示例: var ele1=document.getElementsByTagName("a")[0]; var ele2=ele1.parentElement; console.log(ele2);
4. 節點操作
創建節點：
var divEle = document.createElement("div");
添加節點：
// 追加一個子節點（作為最后的子節點） Anode.appendChild(Bnode)； // 把增加的節點放到某個節點的前邊。 Anode.insertBefore(Bnode,Cnode); // 在Anode節點下，將Cnode節點插入Bnode節點前面 // 示例 var imgEle = document.createElement("img"); imgEle.src = "#"; var d1Ele = document.getElementById("d1"); d1Ele.appendChild(imgEle);
替換節點：
Anode.replaceChild(Bnode,Cnode);
屬性節點：
// 獲取文本節點的值 var ele = document.getElementById("d1") // 1.如果id為d1的標簽內嵌套其他標簽 ele.innerText // 只取d1標簽內的所有文本內容 ele.innerHTML // d1標簽內嵌套的標簽和所有文本內容都取 // 2.如果id為d1的標簽內只有文本內容；那么這兩個都是取文本
設置文本節點的值：
var ele = document.getElementById("d1") ele.innerText = "在干嘛" ele.innerHTML = "<p>在干嘛<p/>"
attribute操作
var ele = document.getElementsByClassName("c1")[0]; ele.setAttribute("hobby","swimming"); console.log(ele.getAttribute("hobby")); ele.removeAttribute("hobby"); // 自帶的屬性可以直接.屬性名來獲取和設置 ele.id; ele.id = "xxx";
獲取值操作
語法：節點名.value
適用於標簽：input、select、textarea
var ele = document.getElementById("i1"); console.log(ele.value);
class的操作
// elementNode（節點名，簡化用ele，像上面那樣） ele.className 獲取所有樣式類名(字符串)
ele.classList.remove(cls) 刪除指定類 ele.classList.add(cls) 添加類 ele.classList.contains(cls) 存在返回true，否則返回false ele.classList.toggle(cls) 存在就刪除，否則添加
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>class相關操作</title>
<style>
.c1 {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: grey;
}
.c2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="c1 c2 c3" onclick="change(this);">div</div>
<div class="c1 c2 c3">div</div>
<div class="c1 c2 c3">div</div>
<div class="c1 c2 c3">div</div>
<script>
// function change(ths) {
// ths.classList.toggle("c2");
// }
// 第二種綁定事件的方式
var divEle = document.getElementsByTagName("div");
for (var i=0;i<divEle.length;i++){
divEle[i].onclick=function () {
this.classList.toggle("c2");
}
}
</script>
</body>
</html>
指定CSS操作
var ele = document.getElementById("d1"); ele.style.color = "red";
JS操作CSS屬性的規律：
①對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
ele.style.margin
ele.style.width
ele.style.left
ele.style.position
②對含有中橫線的CSS屬性，將中橫線后面的第一個字母換成大寫即可。如：
ele.style.marginTop
ele.style.borderLeftWidth
ele.style.zIndex
ele.style.fontFamily
5.事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。
常用事件：
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素獲得焦點。 //練習：輸入框 onblur 元素失去焦點。 //應用場景：用於表單驗證，用戶離開某個輸入框時，代表已經輸入完了，我們可以對它進行驗證。 onchange 域的內容被改變。//應用場景：通常用於表單元素,當元素內容被改變時觸發，（三級聯動） onkeydown 某個鍵盤按鍵被按下。//應用場景: 當用戶在最后一個輸入框按下回車按鍵時，表單提交。 onkeypress 某個鍵盤按鍵被按下並松開。 onkeyup 某個鍵盤按鍵被松開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
綁定方式：
方式1
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>xx</title>
</head>
<body>
<div id="d1" onclick="changeColor(this);">點我字體變顏色</div>
<script>
function changeColor(that) {
that.style.color="red";
}
</script>
</body>
</html>
注意：this是實參，表示觸發事件的當前元素；函數定義過程中的that為形參，可以取其他名字。
方式2：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>xx</title>
</head>
<body>
<div id="d1">點我改變文本內容</div>
<script>
var ele= document.getElementById("d1");
ele.onclick = function () {
this.innerText="想干嘛呢？";
}
</script>
</body>
</html>
onload
onload 屬性開發中只給 body元素加。
這個屬性的觸發 標志着 頁面內容被加載完成。
應用場景：當有些事情我們希望頁面加載完立刻執行，那么可以使用該事件屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function f() {
var ele = document.getElementsByClassName("c1")[0];
ele.style.color = "red";
}
</script>
</head>
<body onload="f()">
<div class="c1">i'm div1.</div>
</body>
</html>
onsubmit
當表單在提交時觸發，該屬性也只能給 form 元素使用；應用場景：在表單提交前驗證用戶輸入是否正確，如果驗證失敗，在該方法中我們應該阻止表單的提交。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form">
<input type="text"/>
<input type="submit" value="點我!" />
</form>
<script type="text/javascript">
// 阻止表單提交方式1
// onsubmit命名的事件函數，可以接受返回值；其中返回false表示攔截表單提交，其他為放行。
var ele = document.getElementById("form");
ele.onsubmit = function(event) {
// alert("驗證失敗，表單不會提交!");
// return false;
// 阻止表單提交方式2
alert("驗證失敗，表單不會提交!");
event.preventDefault(); // 通知瀏覽器不要執行與事件關聯的默認動作。
}
</script>
</body>
</html>
Event 對象
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了，並且會在事件函數被調用時傳給事件函數，我們獲得僅僅需要接收一下即可。
比如onkeydown，我們想知道哪個鍵被按下了，需要問下event對象的屬性，這里就是KeyCode。
事件傳播
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 200px;
height: 200px;
background-color: antiquewhite;
}
.inner{
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<script>
var ele1 = document.getElementsByClassName("inner")[0];
ele1.onclick = function (e) {
alert("I am inner!");
e.stopPropagation();
};
var ele2 = document.getElementsByClassName("outer")[0];
ele2.onclick = function () {
alert("I am outer!")
};
</script>
</body>
</html>