js的BOM
回歸一下，JS最初由網(wǎng)景公司創(chuàng)造，JS基本組成包括：
- 核心（ECMAScript）：描述了JS的語法和基本對象
- 瀏覽器對象模型（BOM）：與瀏覽器交互的方法和接口
- 文檔對象模型 （DOM）：處理網(wǎng)頁內(nèi)容的方法和接口
下面先來介紹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(函數(shù),毫秒值);
setTimeout(
function(){
alert("xx");
},
3000
);
clearTimeout(定時器的名稱);
var timer;
var fn = function(){
alert("x");
timer = setTimeout(fn,2000);
};
var closer = function(){
clearTimeout(timer);
};
fn();
setInterval(函數(shù),毫秒值);
clearInterval(定時器的名稱)
var timer = setInterval(
function(){
alert("nihao");
},
2000
);
var closer = function(){
clearInterval(timer);
};
注意：
setTimeout在執(zhí)行時，是在載入后延遲指定時間后，去執(zhí)行一次表達式，記住，次數(shù)是一次性的。
setInterval則不一樣，它從載入后，每隔指定的時間就執(zhí)行一次表達式，周而復(fù)始的。
需求：注冊后5秒鐘跳轉(zhuǎn)首頁
恭喜您注冊成功，<span id="second" style="color: red;">5</span>秒后跳轉(zhuǎn)到首頁，如果不跳轉(zhuǎn)請<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文件加載到內(nèi)存之后會形成一顆dom樹，根據(jù)這些節(jié)點對象可以進行腳本代碼的動態(tài)修改。
在dom樹中，一切皆為節(jié)點對象。
2、dom方法和屬性
(1)getElementById-通過id獲得元素節(jié)點對象
例子：
<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獲得節(jié)點對象集合（因為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");
//測試該數(shù)據(jù)的長度
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-通過標簽名稱獲得元素節(jié)點的集合
(4)hasChildNodes-查看元素節(jié)點是否含有子節(jié)點
(5)nodeName、nodeType、nodeValue屬性
每個節(jié)點都擁有包含著關(guān)于節(jié)點某些信息的屬性。這些屬性是：
nodeName（節(jié)點名稱）
nodeValue（節(jié)點值）
nodeType（節(jié)點類型）
1.nodeName
nodeName 屬性含有某個節(jié)點的名稱。
元素節(jié)點的 nodeName 是標簽名稱
屬性節(jié)點的 nodeName 是屬性名稱
文本節(jié)點的 nodeName 永遠是 #text
文檔節(jié)點的 nodeName 永遠是 #document
注釋：nodeName 所包含的 XML 元素的標簽名稱永遠是大寫的
2.nodeValue
對于文本節(jié)點，nodeValue 屬性包含文本。
對于屬性節(jié)點，nodeValue 屬性包含屬性值。
nodeValue 屬性對于文檔節(jié)點和元素節(jié)點是不可用的。
3.nodeType
nodeType 屬性可返回節(jié)點的類型。
最重要的節(jié)點類型是：
元素類型 節(jié)點類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
(6)childNodes屬性-子節(jié)點集合；parentNode(this.parentNode)-父節(jié)點
(7)replaceChild-父節(jié)點替換子節(jié)點
例子：
<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>
//點擊北京節(jié)點，將被反恐節(jié)點替換
var bj = document.getElementById("bj");
var fk = document.getElementById("fk");
bj.onclick = function(){
//
var parentNode = this.parentNode;
parentNode.replaceChild(fk,this);
};
(8)查找、設(shè)置屬性節(jié)點
例子：
<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)節(jié)點的創(chuàng)建與添加、刪除
例子：
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重慶</li>
</ul>
//增加城市節(jié)點 <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中的文本內(nèi)容
var div = document.getElementById("subject");
alert(div.innerHTML);
