BOM 操作
window 对象
window 对象是整个 BOM 的核心，表示浏览器打开的窗口。
属性
属性 描述
history 用户访问过的 URL 信息(历史记录)
location 当前 URL 的信息。
screen 只读属性，包含客户端显示屏幕上的信息。
方法
方法 描述
alert() 弹出警告对话框。
confirm() 弹出消息对话框，
prompt() 弹出提示对话框
open(url,name,specs,
replace) 打开一个新的浏览器窗口。url:要打开的页面的 URL。name:指定target属性
或窗口名称。specs:窗口特征属性(窗口的宽度width、窗口的高度 height)，属
性间用逗号隔开。replace:是否替换浏览器历史中的当前文档。
close() 关闭浏览器窗口。
history 对象
history 对象保存着用户上网的历史记录。
history 对象是 window 对象的属性，每个浏览器窗口和标签页都有自己的 history 对象与特定的window 对象关联。
属性
属性 描述
length 返回历史记录列表中的网址数量。
方法
方法 描述
go(n) 加载 history 列表中的某个具体页面。n>0 时，前进n页。
forward () 加载 history 列表中的下一个 URL。
back () 加载 history 列表中的前一个 URL。
location 对象
location 对象提供了与当前窗口中加载文档有关的信息，以及一些导航功能。
属性
属性 描述
host 返回服务器名称和端口号。
hostname 返回不带端口号的服务器名称。
href 返回当前加载页面的完整 URL。
方法
方法 描述
reload() 重新加载当前文档(刷新)。
replace() 用新的文档替换当前文档(不会留下历史记录)。
document 对象
document 对象既是 window 对象的一部分，又代表了整个 HTL 文档，可以用来访问页面中所有的HTML 元素。
属性
属性 描述
referrer 返回载入当前文档的 URL(网页的来源)。
url 返回当前文档的 URL。
方法
方法 描述
getElementById() 返回拥有指定 id 的第一个 HTML 元素
getElementsByName() 返回拥有指定 name 的 HTML 元素的集合。
getElementsByTagName() 返回拥有指定标签名的 HTML 元素的集合
getElementByClassName() 返回拥有指定class的HTML 元素的集合:
querySelector() 返回第一个符合选择器的元素，
querySelectorAll() 返回所有符合选择器的元素。
write() 向 HTML 文档写入文本。
Date 对象
Date 对象用于操作日期和时间。
基本用法
var 日期实例 = new Date(参数);
日期实例.方法;
对象参数
参数 描述
无参数 返回当前日期和时间。
milliseconds 时间戳
dateString 日期字符串。
year, month, 年，月
day,hours, 日，时
minutes,seconds,分，秒
milliseconds 毫秒。
方法
方法 描述
getDate() 从 Date 对象返回一个月中的某一天，其值为1~31。
getDay() 从 Date 对象返回一周中的某一天，其值为0~6。0表示周日，1表示周一。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date对象的小时，其值为023
getMinutes() 返回 Date 对象的分钟，其值为059。
getSeconds() 返回 Date 对象的秒数，其值为059.
getMonth() 从 Date对象返回月份，其值为011。0表示1月，1表示2月。
getTime() 返回当前时间戳。
toLocaleString()根据本地时间格式，把Date对象转换为字符串。
Math 对象
Math 对象包含若干数字常量和函数，用于执行常用的数学任务。
基本用法
Math.方法:
方法:
方法 描述
ceil() 对数进行向上舍入。
floor () 对数进行向下舍入。
round () 把数四舍五入为最接近的数。
random() 返回 0~1中的随机数。
定时函数
在 window 对象中，有两个用于实现定时执行代码的定时函数。
setInterval:每隔固定时间后执行一次函数，循环执行setTimeout:在等待指定时间后执行数，只执行一次。
基本用法
// 创建定时器
定时器名称 = setInterval(执行的函数，间隔时间毫秒数);var
var 定时器名称=setTimeout(执行的函数，等待时间毫秒数);
// 清除定时器
clearInterval(要清除定时的定时器名称);
clearTimeout(要清除定时的定时器名称);
DOM 操作
DOM 操作分类
使用 JavaScript 操作 DOM 时分为三个方面:
DOM Core:定义了一套标准的针对任何结构化文档的对象。
HTML DOM:提供了一些更简单的标记描述各种 HTML 元素的属性。
CSS DOM:用于获取和设置 style 对象的各种属性，即 CSS 属性。
节点与节点的关系
节点就是 HTML 文档中每一个标签或者元素。
整个文档是一个文档节点。.
每个 HTML 标签是一个元素节点。
包含在 HTML 元素中的文本是文档节点。
每个 HTML 属性是一个属性节点。
注释属于注释节点。
一个 HTML 文档是由各个不同的节点组成的。
节点与节点之间的关系:根节点(root)、父节点(parent)、子节点(child)、兄弟节点
(sibling)。
节点信息
每个节点都拥有包含节点某些信息的属性。节点信息常见的属性:
属性 描述
nodeName 节点名称。
nodeValue 文本节点的名称永远是#text，文档节点的名称永远是 #document。
节点的值。对于文本节点，节点的值树文本内容,对于属性节点，节点的值包含属
性值。nodeValue属性对于文档节点和元素节点无效。
nodeType 节点类型，1元素/2属性/3文本/8注释/9文档
访问节点
访问 HTML 文档的节点主要有两种方式:
通过 getElement 系列方法访问指定节点:
通过 querySelector 系列方法访问指定节点。
通过节点的层次关系访问节点，
节点层次关系的节点属性
属性 描述
parentNode 获取当前节点的父节点。
childNodes 获取当前节点的子节点集合。
firstChild 获取当前节点的第一个子节点。
firstElementChild 获取当前节点的第一个子节点，不包含文本节点和注释节点。
lastChild 获取当前节点的最后一个子节点。
lastElementChild 获取当前节点的最后一个子节点，不包含文本节点和注释节点获取当前节
点的下一个节点。
nextSibling 获取当前节点的下一个节点
nextElementSibling 获取当前节点的下一个节点，不包含文本节点和注释节点。
previousSibling 获取当前节点的上一个节点。
previousElementSibling 获取当前节点的上一个节点，不包含文本节点和注释节点。
操作节点
操作节点方法
方法 描述
node.getAttribute(attr) 获取节点的 attr属性值，支持获取自定义属性的值。
node.attr 获取节点的attr属性值，只支持节点自带的属性的值。
node.setAttribute(attr,value)设置节点的 attr 属性的值。
创建和插入节点
创建和插入节点常用的方法:
方法 描述
document.createElement(element) 创建一个element 标签的元素节点。
nodeA. appendChild (nodeB) 将B节点追加到A节点的末尾。
nodeA.insertBefore(nodeB,nodeC) 在A节点中，将C节点插入到B节点之前
nodeA.clone(deep) 复制A节点。 deep:是否递归复制A节点的子节点。
删除和替换节点
删除和替换节点常用的方法:
方法 描述
nodeA.removeChild(nodeB) 在A节点中删除B节点。
nodeA.replaceChild(nodeB.nodeC) 在A节点中使用B节点替换C节点
操作节点样式
操作节点样式的基本用法:
// 获取节点样式
节点.style.样式属性
// 设置节点样式
节点.style.样式属性 ="样式属性值”;
节点.className=“样式类名";
获取元素位置
在 HTML 元素中，提供了 offset、client、scrol1 三大属性家族。
offset:使用 offset 系列属性可以获取 HTMK 元素的偏移位置、大小等。
client:使用 client 系列属性可以获取 HTML 元素可视区的相关信息。
scro11:使用 scro1l 系列属性可以获取 HTML 元素的大小、滚动距离等。
offset 属性
属性 描述
offsetParent 返回作为该元素带有定位的父级元素，如果父级元素都没有定位，则返回 body 元素。
offsetTop 返回当前元素左边界到它上级元素的上边界的距离。
offsetLeft 返回当前元素上边界到它上级元素的左边界的距离，
offsetWidth 返回元素的宽度(border+paddingtcontentWidth)
offsetHeight 返回元素的高度(border+padding+contentHeight)。
client 属性
属性 描述
clientWidth 返回元素的可见宽度(padding+contentWidth)
clientHeight 返回元素的可见高度(padding+contentHeight)
scroll 属性
属性 描述
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置。