- 一羡铲、瀏覽器對(duì)象
- 二、DOM 對(duì)象儡毕，控制HTML 元素
一也切、瀏覽器對(duì)象
window對(duì)象是BOM的核心，window對(duì)象指當(dāng)前的瀏覽器窗口腰湾。
1-1雷恃、 JavaScript 計(jì)時(shí)器
在JavaScript中，我們可以在設(shè)定的時(shí)間間隔之后來(lái)執(zhí)行代碼费坊，而不是在函數(shù)被調(diào)用后立即執(zhí)行倒槐。
- setInterval() ： 指定的延遲時(shí)間之后執(zhí)行代碼
setInterval(代碼,交互時(shí)間);
// 周期性執(zhí)行或調(diào)用表達(dá)式之間的時(shí)間間隔，以毫秒計(jì)（1s=1000ms）附井。
- clearInterval()
clearInterval(id_of_setInterval)
//id_of_setInterval：由 setInterval() 返回的 ID 值讨越。
- setTimeout() ： 每隔指定的時(shí)間執(zhí)行代碼
setTimeout(代碼,延遲時(shí)間);
- clearTimeout()
clearTimeout(id_of_setTimeout)
// id_of_setTimeout：由 setTimeout() 返回的 ID 值两残。該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊。
Example：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計(jì)時(shí)器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
// 每隔100毫秒調(diào)用clock函數(shù)把跨，并將返回值賦值給i
var i=setInterval("clock()",100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>
1-2人弓、 History 對(duì)象
history對(duì)象: 記錄了用戶曾經(jīng)瀏覽過(guò)的頁(yè)面(URL)，并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退相似導(dǎo)航的功能着逐。
- 返回前一個(gè)瀏覽的頁(yè)面
window.history.back(); - 返回下一個(gè)瀏覽的頁(yè)面
window.history.forward(); - 返回瀏覽歷史中的其他頁(yè)面
window.history.go(number);
1-3崔赌、 screen 對(duì)象
screen對(duì)象用于獲取用戶的屏幕信息。
window.screen.屬性
window.screen
詳細(xì)的再次進(jìn)入Browser 對(duì)象參考手冊(cè)滨嘱。
二峰鄙、DOM 對(duì)象，控制HTML 元素
文檔對(duì)象模型DOM（Document Object Model）定義訪問(wèn)和處理HTML文檔的標(biāo)準(zhǔn)方法太雨。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）魁蒜。
慕課網(wǎng)中**DOM節(jié)點(diǎn)層次圖**
HTML文檔可以說(shuō)由節(jié)點(diǎn)構(gòu)成的集合囊扳，DOM節(jié)點(diǎn)有:
- 1、元素節(jié)點(diǎn)：<html>兜看、<body>锥咸、等都是元素節(jié)點(diǎn)，即標(biāo)簽细移。
- 2搏予、文本節(jié)點(diǎn): 向用戶展示的內(nèi)容，如
<li>...</li>中的JavaScript弧轧、DOM雪侥、CSS等文本。 - 3精绎、 屬性節(jié)點(diǎn): 元素屬性速缨，如
<a>標(biāo)簽的鏈接屬性。
慕課網(wǎng)中**節(jié)點(diǎn)屬性**
慕課網(wǎng)中**遍歷節(jié)點(diǎn)樹**
慕課網(wǎng)中**DOM操作**
節(jié)點(diǎn)屬性
2-1代乃、訪問(wèn)子結(jié)點(diǎn)childNodes
elementNode.childNodes
2-2旬牲、訪問(wèn)子節(jié)點(diǎn)的第一和最后項(xiàng)
node.firstChild
node.lastChild
2-3、訪問(wèn)父節(jié)點(diǎn)parentNode
elementNode.parentNode
2-4搁吓、訪問(wèn)兄弟節(jié)點(diǎn)
nodeObject.nextSibling // 下一個(gè)
nodeObject.previousSibling // 前一個(gè)
//如果無(wú)此節(jié)點(diǎn)原茅，則該屬性返回 null。
2-5堕仔、插入節(jié)點(diǎn) appendChild()
appendChild(newnode)
2-6擂橘、插入節(jié)點(diǎn) insertBefore()
insertBefore(newnode,node);
2-7、刪除節(jié)點(diǎn) removeChild()
nodeObject.removeChild(node)
2-8贮预、替換元素節(jié)點(diǎn) replaceChild()
node.replaceChild (newnode,oldnew )
2-9贝室、創(chuàng)建元素節(jié)點(diǎn) createElement
document.createElement(tagName)
2-10契讲、創(chuàng)建元素文本節(jié)點(diǎn) createTextNode
document.createTextNode(data)
最后那一個(gè)例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test </title>
<style type="text/css">
.message{
width:200px;
height:200px;
background-color:#CCC;}
</style>
</head>
<body>
<script type="text/javascript">
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("I Want To Learn Some");
element.appendChild(textNode);
document.body.appendChild(element);
</script>
</body>
</html>
文檔查詢依然是: HTML DOM Element 對(duì)象。
學(xué)習(xí)筆記來(lái)源： W3Schhool JS 教程 滑频、 慕課網(wǎng)捡偏。
