上回書說道，JS中變數、運算符、分支結構、迴圈和嵌套迴圈等內容。本回就由本K給大伙嘮嘮JS中的BOM、DOM和事件。 一、“花心大蘿蔔”——BOM 1、震驚，FFF團為何對BOM舉起了火把——BOM簡介 BOM(Browser Object Model) 是指瀏覽器對象模型，在JS中BOM是個不折不 ...
上回書說道，JS中變數、運算符、分支結構、迴圈和嵌套迴圈等內容。本回就由本K給大伙嘮嘮JS中的BOM、DOM和事件。
一、“花心大蘿蔔”——BOM
1、震驚，FFF團為何對BOM舉起了火把——BOM簡介
BOM(Browser Object Model) 是指瀏覽器對象模型，在JS中BOM是個不折不扣的花心大蘿蔔，因為它有很多個對象，其中代表瀏覽器視窗的Window對象是BOM的“正室”、也就是最重要的，其他對象都是正室的下手、或者叫側室也不足為過。
2、細數BOM的那些風流——BOM對象詳解
2.1 BOM的正室——window對象。
window對象代表瀏覽器視窗，是JS的BOM中最常用到的對象，下麵就跟大家介紹一下領悟window對象的常用方法。
① prompt：彈窗接受用戶輸入；
② alert：彈窗警告；
③ confirm：帶有確認/取消按鈕的提示框；
④ close：關閉瀏覽器視窗；
⑤ open：重新打開新視窗，傳入參數URL/視窗名稱/視窗特征；
⑥ setTimeout：設置延時執行，只會執行一次（兩個參數：需要執行的function/毫秒數）；
⑦ setInterval：設置定時器，迴圈每隔N毫秒執行一次（傳入參數：調用setInterval時返回一個ID，通過變數接受ID，傳入clearInterval）；
⑧ clearTimeout：清除延遲；
⑨ clearInterval：清除定時器；
在這九種方法中，最常用到也是這裡面最麻煩的四種是setTimeout/clearTimeout和setInterval/clearInterval，它們兩兩對應，常放在一起搭配使用。下麵就給大伙舉一個這方面的慄子~
（慄子：setTimeout/clearTimeout）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首先是setTimeout與clearTimeout</title>
<!--要記得首先打開控制台喲~-->
<script type="text/javascript">
var timeoutid = setTimeout(function(){
console.log("setTimeout");
},5000) ;
function clearTimeoutBtn(){
clearTimeout(timeoutid);
}
</script>
</head>
<body>
<button onclick="clearTimeoutBtn()">clearTimeout</button>
</body>
</html>
（慄子：setInterval/clearInterval）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>然後是setInterval與clearInterval</title>
<!--要記得首先打開控制台喲~-->
<script type="text/javascript">
var num = 10;
var timeinterval = setInterval(function(){
num--;
console.log(num);
if (num==0){
clearInterval(timeinterval);
}
},1000)
function clearIntervalBtn(){
clearInterval(timeinterval);
}
</script>
</head>
<body>
<button onclick="clearIntervalBtn()">clearIntervar</button>
</body>
</html>
2.2 BOM的側室們——其他對象簡述。
因為除window對象外的其他BOM對象在實際的JS撰寫中很少出現，所以本K就以代碼的形式給大家簡單提一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM的側室們</title>
<!--要記得首先打開控制台喲~-->
<script type="text/javascript">
// screen對象
console.log(screen);
console.log(screen.width);//寬度
console.log(screen.height);//高度
console.log(screen.availHeight);//可用高度=屏幕高度-底部任務欄
console.log(screen.availWidth);//可用寬度
// location對象
// 完整的url路徑：
// 協議：// 主機名（IP地址）:埠號（預設80埠）/文件路徑?傳遞的參數（參數名0=參數值0&參數名1=參數值1）#錨點
console.log(location);
console.log(location.href);//完整路徑
console.log(location.protocol);//路徑協議http: https: ftp: file: mailto:
console.log(location.pathname);//路徑部分 /開始
console.log(location.port);//埠號
console.log(location.search);//從?開始往後的部分
console.log(location.hostname);//IP地址
console.log(location.host);//主機名+埠號
console.log(location.hash);//從#開始的錨點
// 使用JS設置頁面跳轉
// window.location="http://www.baidu.com";
function locationReload(){
//重新載入當前頁面
location.reload(true);//reload(true)表示從伺服器重新載入當前頁面；reload()在本地刷新當前頁面
}
function locationAssign(){
location.assign("http://www.baidu.com"); //載入新的文檔，替換以後可以回退
}
function locationReplace(){
location.replace("http://www.baidu.com");//使用新的文檔替換當前文檔，替換後不能回退
}
// history
// length : 瀏覽歷史列表的個數
// history.forward(); ： 前進到前一個頁面
// history.back(); ： 後退到後一個頁面
// history.go(); : 跳轉到歷史瀏覽歷史的任意位置；當前頁為第0個，前一個頁面為第1個，後一個頁面為第-1個
console.log(history.length);
function historyForword(){
history.forward();
}
function historyBack(){
history.back();
}
function historyGo(){
history.go();
// 0
// 1 = history.forward();
// -1 = history.back();
}
// Navigator
console.log(navigator.appName);//產品名稱
console.log(navigator.appVersion);//產品版本號
console.log(navigator.userAgent);//用戶代理信息
console.log(navigator.platform);//系統代理平臺
console.log(navigator.plugins);//檢查瀏覽器安裝的插件信息
// 返回一個數組，檢測瀏覽器安裝的所有插件(↓主要屬性↓)
// description ： 插件描述信息
// filename ： 插件在本地磁碟的文件名
// length ： 插件的個數
// name ： 文件名
console.log(navigator.mimeTypes);//瀏覽器插件所支持的文件類型(↓主要屬性↓)
// description：MIME類型描述
// enabledPlugin：支持此類型的瀏覽器插件
// suffixes：此類型可能的尾碼名
// type：MIME類型的寫法，例如：image/x-icon text/css
</script>
</head>
<body>
<button onclick="locationAssign()">載入新的文檔</button>
<br />
<button onclick="locationReload()">重新載入當前文檔</button>
<br />
<button onclick="locationReplace()">使用新的文檔替換當前文檔</button>
<br />
<button onclick="historyForword()">這個是historyForword</button>
<br />
<button onclick="historyBack()">這個是historyBack</button>
<br />
<button onclick="historyGo()">這個是historyGo</button>
</body>
</html>
二、“N世同堂”——DOM
1、朝陽群眾又立功，代碼中竟出現如此神秘的“龐大組織”——DOM簡介
DOM（Document Object Model），是指文檔對象模型，是W3C組織推薦的處理可擴展標誌語言的標準編程介面。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型，而DOM中的每一條分支都被稱作一個“節點”，所有節點及節點屬性構成的結構圖會呈現出很強的層次性（慄子如下圖，源於萬能的度娘）。
DOM節點分為三大類：元素節點，文本節點，屬性節點。文本節點、屬性節點為元素節點的兩個子節點，通過gelElement系列方法，可以取到元素節點。
2、如此組織，其真相竟然是...——DOM操作詳解
DOM操作是JS中應用性非常強的一部分，所以本K就以代碼的形式來給大家敘述。
2.1 獲取節點與樣式修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM代碼詳述（一）</title>
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById("div1");//通過ID獲取唯一的節點；多個同名ID只會取第一個
console.log(div1);
console.log(div1.tagName);//查看節點：①屬性；獲取節點的標簽名
console.log(div1.innerHTML);//②設置或者獲取節點內部的所有HTML代碼
console.log(div1.innerText);//③設置或者獲取節點內部的所有文字
console.log(window.getComputedStyle(div1,null));//查看所有屬性（非IE屬性）
console.log(div1.currentStyle);//查看所有屬性（IE屬性）
}
function getById(){
//取到元素節點的樣式屬性節點
var div1 = document.getElementById("div1").style;//獲取
div1.backgroundColor = "#FF00FF";//行級樣式表權重1000;所有節點屬性，一律駝峰命名法
//取到元素節點
var divDoc = document.getElementById("div1");//獲取
divDoc.innerHTML = "<s>king_land</s>";//重置修改div中的HTML代碼
}
//——————————————分割線——————————————————
function getByName(){//通過Name取到一個數組，包含1到多個節點;
var div = document.getElementsByName("div1");
console.log(div.length);
//使用方式：通過迴圈，取到每一個節點，迴圈次數從0開始，<數組.length
for(var n = 0 ;n < div.length ; n++){
div[n].style.backgroundColor = "#FFFF00";
}
//div1.backgroundColor = "#FFFF00";
//div[0].style.backgroundColor = "#FFFF00";//★
}
//——————————————分割線——————————————————
//document.getElementsByTagName();//同Name
function getByTagName(){
var div = document.getElementsByTagName("div");
div[0].style.backgroundColor = "#00FF00";
}
//——————————————分割線——————————————————
//document.getElementsByClassName();//同Name
function getByClass(){
var div = document.getElementsByClassName("div1");
div[0].style.backgroundColor = "#00FFFF";
}
//——————————————分割線——————————————————
function getAttr () {
var img1 = document.getElementById("img1");
alert(img1.getAttribute("src"));
}//查看屬性節點 getAttribute("屬性名");
//——————————————分割線——————————————————
function setAttr () {
var img1 = document.getElementById("img1");
img1.setAttribute("src","../../2-CSS基礎語法/img/bg_flower_multi.gif");
img1.setAttribute("style","width: 100px;height: 100px;");
}//設置屬性節點 getAttribute("屬性名","屬性值");
//——————————————分割線——————————————————
//JS修改樣式總結
//1、.className：為元素設置一個新的class名字 例如：div1.className = "div2";
//2、.style：為元素設置新的樣式 例如：div1.style.background-color = "blue";
//3、.style.cssText：為元素同時修改多個樣式 例如：div1.style.cssText = "width:100px;height:200px;";
</script>
<style type="text/css">
.div1{
height: 100px;
width: 100px;
background-color: #000000;
color: #FFFFFF;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1" name="div1" class="div1">
這裡是測試區
</div>
<div id="div1" name="div1" class="div1">
這裡是測試區
</div>
<div id="div1" name="div1" class="div1">
這裡是測試區
</div>
<img src="../../2-CSS基礎語法/img/bg_flower_multi.gif" id="img1"/>
<br />
<button onclick="getById()">通過ID修改divcolor</button>
<br />
<button onclick="getByName()">通過Name修改divcolor</button>
<br />
<button onclick="getByTagName()">通過TagName修改divcolor</button>
<br />
<button onclick="getByClass()">通過ClassName修改divcolor</button>
<br />
<button onclick="getAttr()">取到img的src屬性值</button>
<br />
<button onclick="setAttr()">修改img的src屬性值</button>
</body>
</html>
2.2 層次節點常用操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function (){
//獲取層次節點的常用屬性
var ul1 = document.getElementById("ul1");
// var lis = ul1.getElementsByTagName("li"); //只取到ul1中所有li
// var lis = document.getElementsByTagName("li"); //取到頁面中所有的li
console.log(ul1.childNodes);//獲取元素的所有子節點（包含元素節點、文本節點）
console.log(ul1.firstChild);//獲取元素的第一個子節點
console.log(ul1.lastChild);//獲取元素的最後一個子節點
console.log(ul1.ownerDocument);//獲取當前文檔根節點，在html文檔中為document節點
console.log(ul1.parentNode);//獲取當前節點的父節點
console.log(ul1.previousSibling);//獲取當前節點的前一個兄弟節點
console.log(ul1.nextSibling);//獲取當前節點的後一個兄弟節點
//上述屬性均會獲得所有的元素節點和文本節點，如果只需要元素節點，需要使用對應Element屬性，例如：firstChild→firstElementChild
console.log(ul1.attributes);//獲取當前節點的所有屬性節點
}
//——————————————創建並新增節點——————————————————
//方法一：.creatElement("標簽名")創建一個新節點，需要配合setAttribute()方法設置屬性；
//方法二：.appendChild(節點名)在元素的最後追加一個新節點
//方法三：.insertBefore(新節點名,目標節點名)：將新節點插入到目標節點之前
//方法四：克隆對象.cloneNode(true/false)：需要克隆誰，就用誰去調用克隆節點；傳遞參數可以為true/false，true表示克隆當前節點及子節點；false表示只克隆當前節點，不克隆子節點。
function appendImg(){
//1、創建一個圖片節點
var img = document.createElement("img");
//2、給img節點設置屬性
img.setAttribute("src","../../1-HTML基本標簽/ivicon.png");
//3、將設置好的img節點追加到body最後
document.body.appendChild(img)//.setAttribute("src","../../img/2017-02-25_143342.png");
}
function insertImg(){
//1、創建一個圖片節點
var img = document.createElement("img");
//2、給img節點設置屬性
img.setAttribute("src","../../1-HTML基本標簽/ivicon.png");
//3、在兩個ul之間插入圖片
var ul2 = document.getElementById("ul2");
document.body.insertBefore(img,ul2);
}
var count = 2;
function copyUl(){
//1、取到ul2節點
var ul2 = document.getElementById("ul2");
//2、克隆節點
var ul2Clon = ul2.cloneNode(true);
count ++;
ul2Clon.setAttribute("id","ul"+count)
//3、在原ul2節點之前，插入新克隆節點
document.body.insertBefore(ul2Clon,ul2);
}
//——————————————刪除和替換節點——————————————————
//1、.removeChild(需刪除節點)：從父容器中刪除指定節點；
//2、.replaceChild(新節點，被替換節點)：用新節點替換被指定節點，如果新節點為頁面中已有節點，會將此節點刪除後替換到指定節點。
function deleteUl1(){
//取到ul1
var ul1 = document.getElementById("ul1");
if (ul1){
//從父容器body中刪除ul1節點
document.body.removeChild(ul1);
}else{
alert("憋刪了，早沒了");
}
}
function ul1ReplaceUl2(){
var div = document.createElement("div");
div.setAttribute("style","width: 100px;height: 100px;background-color: #20B2AA;");
var ul2 = document.getElementById("ul2");
document.body.replaceChild(div,ul2);
}
</script>
<style type="text/css">
ul{
width: 600px;
list-style: none;
padding: 0;
background-color: #20B2AA;
display: flex;
justify-content: space-around;
margin-top: 20px;
}
</style>
</head>
<body>
<ul id="ul1">
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li>
</ul>
<ul id="ul2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li>第4項</li>
</ul>
<button onclick="appendImg()">在最後插入一幅圖片</button>
<button onclick="insertImg()">在兩個ul之間插入一幅圖片</button>
<button onclick="copyUl()">copy一個ul2</button>
<br />
<button onclick="deleteUl1()">刪除ul1</button>
<button onclick="ul1ReplaceUl2() ">用ul1替換ul2</button>
</body>
</html>
2.3 表格操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作表格</title>
<script type="text/javascript">
//表格對象：
//1、rows屬性：返回表格中的所有行，數組；
//2、insertRow(index)：在表格的第index+1行，插入一個新行；
//3、deleteRow(index)：刪除表格的第index+1行；
//表格的行對象：
//1、cells屬性：返回當前行中的所有單元格，數組；
//2、rowIndex屬性：返回當前行在表格中的索引順序，從0開始；
//3、insertCell(index)：在當前行的index+1處插入一個td；
//4、deleteCell(index)：刪除當前行的第index+1個td；
//表格的單元格對象：
//1、cellIndex屬性：返回單元格在該行的索引順序，從0開始；
//2、innerHTML屬性：設置或者返回當前單元格中的HTMl代碼；
//3、align（valign）屬性：設置當前單元格的水平對齊方式；
//4、className屬性：設置單元格的class名稱。
function newRow(){
var book = prompt("書名：");
var price = prompt("價格：");
var table = document.getElementsByTagName("table");
//在表格的最後一行插入一個新行
var newRow = table[0].insertRow(table[0].rows.length-1);
//給新行設置單元格
var cell0 = newRow.insertCell(0);
cell0.innerHTML = book;
var cell1 = newRow.insertCell(1);
cell1.innerHTML = price;
getSum();
}
function deleteRow(){
var table = document.getElementsByTagName("table");
if(table[0].rows.length>2){
table[0].deleteRow(table[0].rows.length-2);
}else{
alert("刪刪刪！刪你妹啊刪！")
}
getSum();
}
function changeTitle(){
var color = prompt("請輸入6位十六進位顏色值：");
var table = document.getElementsByTagName("table");
table[0].rows[0].style <
