[JS-12] BOM 与 DOM

2018-12-10  本文已影响0人  地平线0530

浏览器对象

浏览器会提供很多的 API 接口和对象方便 JavaScript 的调用和操作。

window

它是客户端 JavaScript 程序的全局对象。

常用属性：

常用方法：

Web API 接口参考

计时器

const hello = '来了老弟！';
let timer;

function sayHello() {
  timer = window.setTimeout(() => {
    console.log(hello);
  }, 3000)
}

function stop() {
  window.clearTimeout(timer);   // 在定时器输出结果前终止它
}

sayHello();   // 3秒后： '来了老弟！'

const hello = '来了老弟！';
let timer;

function sayHello() {
  timer = window.setInterval(() => {
    console.log(hello);
  }, 1000)
}

function stop() {
  window.clearInterval(timer);   // 清除定时器
}

sayHello();

解析浏览器 URL

// 浏览器键入网址：http://localhost:8080/path/index.html?name=zhangfei&age=23#TOP

console.log(location);

/*
hash: '#TOP'
host: 'localhost:8080'
hostname: 'localhost'
href: 'http://localhost:8080/path/index.html?name=zhangfei&age=23#TOP'
origin: 'http://localhost:8080'
pathname: '/path/index.html'
port: '8080'
protocol: 'http'
search: '?name=zhangfei&age=23'

assign()   设置一个新 URL 地址
reload()   重新加载当前页
replace()   设置一个新的 URL 地址，与 assign() 不同的是，此方法替换的新页面不会被保存在会话历史 history 中
*/

浏览历史

对于现代web页面来说，由于大量使用 AJAX 和页面交互，不建议使用 history 对象，影响用户体验。

浏览器和屏幕信息

常用信息：

Screen

对话框

document

window.document 引用了 Document 对象，表示当前页面，可以说 Document 对象就是整个 DOM 树的根节点。

DOM

DOM 全称：文档对象模型 (Document Object Model)
DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

DOM 参考

什么是 DOM Levels？
DOM 的不同规范版本，类似于 CSS2、CSS3
大部分现代浏览器都能很好的支持 DOM2，并且部分支持 DOM3
DOM4 已于2015年发布

DOM4 规范

DOM Level1

DOM1 规范

分为两部分，核心和HTML。提供了一些基本接口。

DOM Level2

提供了六种不同的规范，面向更为广泛。

  1. DOM2 核心
  2. DOM2 视图
  3. DOM2 事件
  4. DOM2 样式
  5. DOM2 遍历和范围
  6. DOM2 HTML

DOM Level3

包含五种不同规范，进一步扩充。

  1. DOM3 核心
  2. DOM3 加载于保存
  3. DOM3 验证
  4. DOM3 事件
  5. DOM3 XPath

Node 接口

Node是一个接口，许多DOM类型从这个接口继承，并允许类似地处理（或测试）这些各种类型。

常用属性

常用方法

Element 接口

Element 是非常通用的基类，所有 Document 对象下的对象都继承它. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。

常用属性

常用方法

Event 接口

Event接口表示在DOM中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由API生成(例如指示动画已经完成运行的事件，视频已被暂停等等)。

常用属性

常用方法

Document 接口

Document 接口表示任何在浏览器中已经加载好的网页，并作为一个入口去操作网页内容（也就是DOM tree）

Document 接口参考

常用方法

上一篇 下一篇

猜你喜欢

热点阅读