###js的BOM
迴歸一下，JS最初由網景公司創造，JS基本組成包括：
- 核心（ECMAScript）：描述了JS的語法和基本物件
- 瀏覽器物件模型（BOM）：與瀏覽器互動的方法和介面
- 文件物件模型 （DOM）：處理網頁內容的方法和介面
下面先來介紹BOM。
(1)window物件
彈框的方法：
提示框：alert("提示資訊");
確認框：confirm("確認資訊");
有返回值：如果點選確認返回true 如果點選取消 返回false
var res = confirm("您確認要刪除嗎？");
alert(res);
輸入框：prompt("提示資訊");
有返回值：如果點選確認返回輸入框的文字 點選取消返回null
var res = prompt("請輸入密碼？");
alert(res);
open方法：
window.open("url地址");
open("../jsCore/demo10.html");
定時器：
setTimeout(函式,毫秒值);
setTimeout(
function(){
alert("xx");
},
3000
);
clearTimeout(定時器的名稱);
var timer;
var fn = function(){
alert("x");
timer = setTimeout(fn,2000);
};
var closer = function(){
clearTimeout(timer);
};
fn();
setInterval(函式,毫秒值);
clearInterval(定時器的名稱)
var timer = setInterval(
function(){
alert("nihao");
},
2000
);
var closer = function(){
clearInterval(timer);
};
注意：
setTimeout在執行時，是在載入後延遲指定時間後，去執行一次表示式，記住，次數是一次性的。
setInterval則不一樣，它從載入後，每隔指定的時間就執行一次表示式，周而復始的。
需求：註冊後5秒鐘跳轉首頁
恭喜您註冊成功，<span id="second" style="color: red;">5</span>秒後跳轉到首頁，如果不跳轉請<a href="../jsCore/demo10.html">點選這裡</a>
<script type="text/javascript">
var time = 5;
var timer;
timer = setInterval(
function(){
var second = document.getElementById("second");
if(time>=1){
second.innerHTML = time;
time--;
}else{
clearInterval(timer);
location.href="../jsCore/demo10.html";
}
},
1000
);
</script>
(2)location物件
location.href="url地址";
(3)history物件
back();
forward();
go();
<a href="demo7.html">後一頁</a>
<input type="button" value="上一頁" onclick="history.back()">
<input type="button" value="下一頁" onclick="history.forward()">
<input type="button" value="上一頁" onclick="history.go(-1)">
<input type="button" value="下一頁" onclick="history.go(1)">
複製程式碼###JS的DOM
####1、理解一下文件物件模型 html檔案載入到記憶體之後會形成一顆dom樹，根據這些節點物件可以進行指令碼程式碼的動態修改。 在dom樹中，一切皆為節點物件。
####2、dom方法和屬性
(1)getElementById-通過id獲得元素節點物件
例子：
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="哈哈" id="mid" onchange="">
<input type="button" name="ok" value="確定"/>
</form>
//輸出id為mid的標籤的資訊
var inputNode = document.getElementById("mid");
alert("type:" + inputNode.type + "\nvalue:" + inputNode.value);
(2)getElementsByName-通過name獲得節點物件集合（因為name同名可以有多個）
例子：
<form name="form1" action="test.html" method="post">
<input type="text" name="myname" value="哈哈1" id="tid_1"><br>
<input type="text" name="myname" value="哈哈2" id="tid_2"><br>
<input type="text" name="myname" value="哈哈3" id="tid_3"><br>
<input type="button" name="ok" value="確定"/>
</form>
//通過元素的name屬性獲取所有元素的引用
var inputNodes = document.getElementsByName("myname");
//測試該資料的長度
alert(inputNodes.length);
//遍歷元素,輸出所有value屬性的值
for (var i = 0; i < inputNodes.length; i++) {
var inputNode = inputNodes[i];
alert(inputNode.value);
}
//為每個文字框(<input type="text">)增加chanage事件,當值改變時,輸出改變的值
for (var i = 0; i < inputNodes.length; i++) {
var inputNode = inputNodes[i];
inputNode.onchange = function () {
alert(this.value);
};
}
(3)getElementsByTagName-通過標籤名稱獲得元素節點的集合
(4)hasChildNodes-檢視元素節點是否含有子節點
(5)nodeName、nodeType、nodeValue屬性
每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是：
nodeName（節點名稱）
nodeValue（節點值）
nodeType（節點型別）
1.nodeName
nodeName 屬性含有某個節點的名稱。
元素節點的 nodeName 是標籤名稱
屬性節點的 nodeName 是屬性名稱
文字節點的 nodeName 永遠是 #text
文件節點的 nodeName 永遠是 #document
註釋：nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的
2.nodeValue
對於文字節點，nodeValue 屬性包含文字。
對於屬性節點，nodeValue 屬性包含屬性值。
nodeValue 屬性對於文件節點和元素節點是不可用的。
3.nodeType
nodeType 屬性可返回節點的型別。
最重要的節點型別是：
元素型別 節點型別
元素 1
屬性 2
文字 3
註釋 8
文件 9
(6)childNodes屬性-子節點集合；parentNode(this.parentNode)-父節點
(7)replaceChild-父節點替換子節點
例子：
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重慶</li>
</ul>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔獸</li>
<li id="cq1" value="chuanqi">傳奇</li>
</ul>
//點選北京節點，將被反恐節點替換
var bj = document.getElementById("bj");
var fk = document.getElementById("fk");
bj.onclick = function(){
//
var parentNode = this.parentNode;
parentNode.replaceChild(fk,this);
};
(8)查詢、設定屬性節點
例子：
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重慶</li>
</ul>
var bj = document.getElementById("bj");
alert(bj.getAttribute("value"));
bj.setAttribute("value", "哈哈");
alert(bj.getAttribute("value"));
(9)節點的建立與新增、刪除
例子：
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重慶</li>
</ul>
//增加城市節點 <li id="tj" v="tianjin">天津</li>放置到city下
var li = document.createElement("li");
li.setAttribute("id", "tj");
li.setAttribute("value", "tianjin");
var txt = document.createTextNode("天津");
li.appendChild(txt);
var city = document.getElementById("city");
city.appendChild(li);
//city.insertBefore(tj, cq);
//city.removeChild(tj);
(10)innerHTML屬性(比較重要)
例子：
<div id="subject">jquery</div>
//將<h1>今天</h1>寫到div的層中
var div = document.getElementById("subject");
div.innerHTML = "<h1>今天</h1>";
//使用innerHTML讀出id=subject中的文字內容
var div = document.getElementById("subject");
alert(div.innerHTML);
複製程式碼