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：

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、元素节点：、、等都是元素节点，即标签。
• 2、文本节点: 向用户展示的内容，如
• ...
中的JavaScript、DOM、CSS等文本。
• 3、 属性节点: 元素属性，如标签的链接属性。

慕课网中**节点属性**

慕课网中**遍历节点树**

慕课网中**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)

最后那一个例子：

文档查询依然是: HTML DOM Element 对象。

学习笔记来源： W3Schhool JS 教程 、 慕课网。