一、介紹
JavaScript分爲ECMAScript，DOM，BOM。
BOM（Browser Object Model）是指瀏覽器對象模型，它使JavaScript有能力與瀏覽器進行“對話”。
DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素。
二、window對象
所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
所有 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。
全局變量是 window 對象的屬性。全局函數是 window 對象的方法。
接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。
一些常用的Window方法：
window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open() - 打開新窗口
window.close() - 關閉當前窗口
三、window的子對象
1、navigator對象
瀏覽器對象，通過這個對象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關信息。
navigator.appName // Web瀏覽器全稱
navigator.appVersion // Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent // 客戶端絕大部分信息
navigator.platform // 瀏覽器運行所在的操作系統
2、screen對象（屏幕對象，不常用）
一些屬性：
screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度
3、history對象
window.history 對象包含瀏覽器的歷史。
瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或後退一個頁面。
history.forward() // 前進一頁
history.back() // 後退一頁
4、location對象
window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
常用屬性和方法：
location.href 獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 重新加載頁面
5、彈出框
可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。
（1）警告框
警告框經常用於確保用戶可以得到某些信息。
當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操作。
語法：
alert("頁面危險！");
（2）確認框（瞭解即可）
確認框用於使用戶可以驗證或者接受某些信息。
當確認框出現後，用戶需要點擊確定或者取消按鈕才能繼續進行操作。
如果用戶點擊確認，那麼返回值爲 true。如果用戶點擊取消，那麼返回值爲 false。
語法：
confirm("你確定嗎？")
（3）提示框（瞭解即可）
提示框經常用於提示用戶在進入頁面前輸入某個值。
當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。
如果用戶點擊確認，那麼返回值爲輸入的值。如果用戶點擊取消，那麼返回值爲 null。
語法：
prompt("請在下方輸入","你的答案")
6、計時相關
（1）setTimeout()
var t=setTimeout("JS語句",毫秒)
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 t 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。
setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。
第二個參數指示從當前起多少毫秒後執行第一個參數。
（2）clearTimeout()
clearTimeout(setTimeout_variable)
舉個例子：
var timer = setTimeout(function(){alert(123);}, 3000) // 在指定時間之後執行一次相應函數
clearTimeout(timer); // 取消setTimeout設置（3）setInterval()
setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
語法：
setInterval("JS語句",時間間隔)
（4）clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的 timeout。
clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。
語法：
clearInterval(setinterval返回的ID值)
舉個例子：
var timer = setInterval(function(){console.log(123);}, 3000) // 每隔一段時間就執行一次相應函數
clearInterval(timer); // 取消setInterval設置示例：定時器
<!DOCTYPE html>
<html>
<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 timeStr = (new Date()).toLocaleString();
var inputEle = document.getElementById("i1");
inputEle.value = timeStr;
}
function start() {
f();
if (intervalId === undefined) {
intervalId = setInterval(f, 1000);
}
}
function end() {
clearInterval(intervalId);
intervalId = undefined;
}
</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>四、DOM
DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造爲對象的樹。
1、查找標籤
（1）直接查找
document.getElementById 根據ID獲取一個標籤 document.getElementsByClassName 根據class屬性獲取 document.getElementsByTagName 根據標籤名獲取標籤合集
注意：
涉及到DOM操作的JS代碼應該放在文檔的哪個位置。
（2）間接查找
parentElement 父節點標籤元素
children 所有子標籤
firstElementChild 第一個子標籤元素
lastElementChild 最後一個子標籤元素
nextElementSibling 下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素
2、節點操作
（1）創建節點（重要內容）
語法：
createElement(標籤名)
示例：
var divEle = document.createElement("div");（2）添加節點
語法：
somenode.appendChild(newnode)； //追加一個子節點（作爲最後的子節點） somenode.insertBefore(newnode,某個節點); //把增加的節點放到某個節點的前邊。
示例：
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);（3）刪除節點
語法：
獲得要刪除的元素，通過父元素調用刪除。
removeChild(要刪除的節點)
（4）替換節點
語法：
somenode.replaceChild(newnode, 某個節點);
（5）屬性節點
獲取文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML設置文本節點的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")自帶的屬性還可以直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."
（6）獲取值操作
語法：
elementNode.value
適用於以下標籤：
.input
.select
.textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);（7）class的操作
className 獲取所有樣式類名(字符串)
classList.remove(cls) 刪除指定類
classList.add(cls) 添加類
classList.contains(cls) 存在返回true，否則返回false
classList.toggle(cls) 存在就刪除，否則添加
（8）指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS屬性的規律：
#1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
#2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
五、事件
1、常用事件
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onfocus 元素獲得焦點。 // 練習：輸入框
onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。
onselect 在文本框中的文本被選中時發生。
onsubmit 確認按鈕被點擊，使用的對象是form。
2、綁定方式：
（1）方式一：
<div id="d1" onclick="changeColor(this);">點我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意：
this是實參，表示觸發事件的當前元素。
函數定義過程中的ths爲形參。（2）方式二：
<div id="d2">點我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="你好";
}
</script>3、示例
（1）搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> 搜索框示例 </title>
</head>
<body>
<input id = "d1" type = "text" value = "請輸入關鍵字" onblur = "blurs()" onfocus = "focus()">
<script>
function focus(){
var inputEle = document.getElementById("d1");
if (inputEle.value == = "請輸入關鍵字"){
inputEle.value = "";
}
}
function blurs(){
var inputEle = document.getElementById("d1");
var val = inputEle.value;
if (!val.trim()){
inputEle.value = "請輸入關鍵字";
}
}
</script>
</body>
</html>（2）select聯動
<!DOCTYPE html>
<html>
<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>select聯動</title>
</head>
<body>
<select id="province">
<option>請選擇省:</option>
</select>
<select id="city">
<option>請選擇市:</option>
</select>
<script>
data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};
var p = document.getElementById("province");
var c = document.getElementById("city");
for (var i in data) {
var optionP = document.createElement("option");
optionP.innerHTML = i;
p.appendChild(optionP);
}
p.onchange = function () {
var pro = (this.options[this.selectedIndex]).innerHTML;
var citys = data[pro];
// 清空option
c.options.length = 0;
for (var i=0;i<citys.length;i++) {
var option_city = document.createElement("option");
option_city.innerHTML = citys[i];
c.appendChild(option_city);
}
}
</script>
</body>
</html>