- 一、瀏覽器對象
- 二、DOM 對象，控制HTML 元素
一、瀏覽器對象
window對象是BOM的核心，window對象指當前的瀏覽器窗口。
1-1、 JavaScript 計時器
在JavaScript中，我們可以在設定的時間間隔之后來執行代碼，而不是在函數被調用后立即執行。
- setInterval() ： 指定的延遲時間之后執行代碼
setInterval(代碼,交互時間);
// 周期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。
- clearInterval()
clearInterval(id_of_setInterval)
//id_of_setInterval：由 setInterval() 返回的 ID 值。
- setTimeout() ： 每隔指定的時間執行代碼
setTimeout(代碼,延遲時間);
- clearTimeout()
clearTimeout(id_of_setTimeout)
// id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。
Example：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
// 每隔100毫秒調用clock函數，并將返回值賦值給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 對象
history對象: 記錄了用戶曾經瀏覽過的頁面(URL)，并可以實現瀏覽器前進與后退相似導航的功能。
- 返回前一個瀏覽的頁面
window.history.back(); - 返回下一個瀏覽的頁面
window.history.forward(); - 返回瀏覽歷史中的其他頁面
window.history.go(number);
1-3、 screen 對象
screen對象用于獲取用戶的屏幕信息。
window.screen.屬性
window.screen
詳細的再次進入Browser 對象參考手冊。
二、DOM 對象，控制HTML 元素
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
慕課網中**DOM節點層次圖**
HTML文檔可以說由節點構成的集合，DOM節點有:
- 1、元素節點：<html>、<body>、等都是元素節點，即標簽。
- 2、文本節點: 向用戶展示的內容，如
<li>...</li>中的JavaScript、DOM、CSS等文本。 - 3、 屬性節點: 元素屬性，如
<a>標簽的鏈接屬性。
慕課網中**節點屬性**
慕課網中**遍歷節點樹**
慕課網中**DOM操作**
節點屬性
2-1、訪問子結點childNodes
elementNode.childNodes
2-2、訪問子節點的第一和最后項
node.firstChild
node.lastChild
2-3、訪問父節點parentNode
elementNode.parentNode
2-4、訪問兄弟節點
nodeObject.nextSibling // 下一個
nodeObject.previousSibling // 前一個
//如果無此節點，則該屬性返回 null。
2-5、插入節點 appendChild()
appendChild(newnode)
2-6、插入節點 insertBefore()
insertBefore(newnode,node);
2-7、刪除節點 removeChild()
nodeObject.removeChild(node)
2-8、替換元素節點 replaceChild()
node.replaceChild (newnode,oldnew )
2-9、創建元素節點 createElement
document.createElement(tagName)
2-10、創建元素文本節點 createTextNode
document.createTextNode(data)
最后那一個例子：
<!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 對象。
學習筆記來源： W3Schhool JS 教程 、 慕課網。
