前端——JavaScript操作BOM与DOM

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        返回匹配元素的滚动条的水平位置。