- 一、浏览器对象
- 二、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 教程 、 慕课网。
