JavaScript 学习笔记（三）

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