一、DHTML 概述

1. DHTML 简介

DHTML 通过操作 HTML 以创造各种动态视觉效果，是一种浏览器端的动态网页技术。

（1）. DHTML 的功能

动态改变页面元素

与用户进行交互
DHTML 对象模型包括浏览器对象模型和 DOM 对象模型

2. DHTML对象模型

3. BOM 与DOM

BOM ：浏览器对象模型，用来访问和操纵浏览器窗口，使JavaScript 有能力与浏览器“对话”。

- 通过使用BOM，可移动窗口、更改状态栏文本、执行其他不与页面内容发生直接联系的操作

- 没有相关标准，但被广泛支持

DOM：文档对象模型，用来操作文档

- 定义了访问和操作 HTML 文档的标准方法

- 应用程序通过对 DOM 树的操作，来实现对 HTML 文档数据的操纵

二、window 对象

1. window 对象表示浏览器窗口

- 所有JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员

2. 常用属性

document：窗口中显示的 HTML 文档对象
history：浏览过窗口的历史记录
location：窗口文件地址
name：窗口名称
opener：打开当前窗口的 window 对象

3. 常用方法

alert()、confirm、prompt()：对话框
close()、open()：关闭、打开窗口
focus()、blur()：窗口获得焦点或者失去焦点
moveBy()、moveTo()：移动窗口
resizeBy()、resizeTo()：调整窗口大小
scrollBy()、scrollTo()：滚动窗口中网页的内容

三、窗口和对话框

1. 对话框

alert(str)：提示对话框，显示str 字符串的内容
confirm(str)：确认对话框，显示str 字符串的内容；按“确定”按钮返回 true，其他操作返回 false
prompt(str,value)：输入对话框，采用文本框输入信息；str 为提示信息，value 为初始值；按“确定”按钮返回输入值，其他返回 undefined

2. 窗口的打开与关闭

window.open([url],[name],[config])：

- url：打开的超链接

- name：窗口的名称

- config：窗口的配置参数

- 返回新窗口对象

window.close()

var config = "toolbar=yes,location=no,width=500,height=300";

//打开窗口
var openurl = "http://www.baidu.com";
var newWindow = window.open(openurl,"popwindow",config);

四、定时器

多用于网页动态时钟、制作倒计时、跑马灯效果等
周期性时钟：以一定的时间间隔执行代码，循环重复
一次性时钟：在一个设定的时间间隔之后执行代码，不是在函数被调用之后立即执行

1. 周期性定时器

setInterval(exp,time)：周期性触发代码exp

- exp：要执行的语句

- time：时间周期，单位为毫秒

- 返回已经启动的定时器对象

clearInterval(tID)：停止启动的定时器

- tID：启动的定时器对象

window.setInterval("alert('hello');",3000);
//或者
window.setInterval(func,3000);
function func(){
    alert("hello");
}

2. 一次性定时器

setTimeout(exp,time)：一次性触发代码exp
clearTimeout(tID)：停止启动的定时器

window.setTimeout("alert('hello');",3000);
//或者
window.setTimeout(func,3000);
function func(){
    alert("hello");
}

JavaScript之 window 对象