JavaScript制作弹出框口特效

BOM对象模型参考

当用户在浏览器中打开一个页面是，浏览器就会自动创建一些对象，因为这些对象存放了浏览器窗口属性和其他相关信息，被称为浏览器对象。浏览器对象模型BOM描述了这些层次化对象的关系。window是BOM的顶级对象，其下一层是document、navigator、frames、location、history和screen对象。document的下一层是form、anchor、link、cookie、image等对象的集合。每个层次上的对象都是其父对象的属性，可以通过“父对象.子对象”的方式访问。

 document对象既是BOM顶级对象，window的一个属性，也是DOM模型中的顶级对象；location对象既是window对象的属性，同时也是document对象的属性。

BOM的主要对象描述及用途

属性	描述及用途
window	窗体对象，表示浏览器中打开窗口。若HTML文档包含框架（fram),浏览器会为每个框架创建一个额外的window对象，是BOM的顶层对象
document	每个载入浏览器的HTML文档。利用document可以实现对HTML可以实现对HTML页面中的所有元素进行访问
navigator	浏览器对象，包含有关浏览器的信息，例如，浏览器名称、厂商】版本等
screen	客户端显示器对象，包含有关显示浏览器屏幕的信息，例如，高度、宽度、色彩等。运用这些信息可以优化显示效果，实现用户的显示要求
history	历史对象。记录在浏览器窗口中访问过的URL
location	浏览器窗口中当前文档的URL
frames	窗口中所有命名的框架，是window对象的数组

window对象的常用方法

window对象常用的方法

方法	属性
open()	打开一个新的浏览器窗口
close()	关闭浏览器窗口
alert()	弹出警告框，显示一条提示消息和一个“确认”按钮
confirm()	弹出确认框，显示一条提示信息，一个“确认”按钮“，一个”取消“按钮
prompt()	弹出提示框，是一个提示用户输入的对话框
scrollTo()	把内容滚动到指定的坐标
setInterval()	按照一定的时间间隔循环执行指定的方法。循环间隔即为周期，以毫秒为单位
setTimeout()	经过特定时间段后执行一次指定的方法，时间段以毫秒为单位
clearInterval()	取消setInterval效果
clearTimeout()	取消setTimeout效果

注意：由于document也有open方法，为了不产生混淆，在调用open方法是不能单独使用，必须写明确调用的对象是window.open()还是document.open().

打开新窗口

使用window.open()方法打开新窗口，语法为window.open(URL,name,features,replace).

参数说明：

1.URL：字符串。要打开新窗口的页面URL。

2.name：字符串。新窗口的名字，该名称可用作标记<a>和<form>的属性target的值。可省略。

3.features：字符串。由逗号分隔的特征值，指定新窗口的显示效果，如位置、高度、菜单、工具栏等。若省略改参数，则按默认特征设置

特征字符串参数

设置	值	说明
left	number	说明新创建的窗口的左标表。不能为负数
top	number	说明新创建的窗口的上坐标。不能为负数
height	number	设置新创建的窗口的高度。该数字不能小于100
width	number	设置新创建的窗口的宽度。该数字不能小于100
resizable	yes，no	判断新窗口是否能通过拖动边线调正大小。默认值为no
scrollable	yes，no	判断新窗口容不下显示内容时是否允许滚动。默认值为no
toolbar	yes，no	判断新窗口是否显示工具栏。默认值为no
status	yes，no	判断新窗口是否显示状态栏，默认值为no
location	yes,no	判断新窗口是否显示位置，默认值为no

4.replace：布尔值。打开新窗口是在浏览历史中创建一个新条目，或替换当前条目，true为替换。可省略。

特征值由逗号分隔，注意逗号前后不能有空格。

对话框

window对象的alert()、confirm()、prompt()方法向用户弹出对话框。

（1）alset()弹出警告对话框。

（2）confirm()弹出确认对话框。

（3）prompt()弹出提示输入框。

sessionStorage

sessionStorage是HTML5新增的一个会话存储对象，用于临时保存同一窗口（或标签页）的三个数据（key/value），在关闭窗口或标签页后将会删除这些数据，是window下的对象。

sessionStorage特点

（1）只在本地存储：sessionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。

（2）存储方式：sessionStorage的存储方式采用key、value的方式。value的值必须为字符串类型。

（3）存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

sessionStorage只能存储字符串数据，对于js中常用的数组或对象不能直接存储，可以通过JSON.stringify()将JSON数据类型转化成字符串，再存储到storage中，获取数据时在使用JSON.parse()将读取的字符串转换成对象即可。

sessionStorage的常用方法

（1）保存或设置数据到sessionStorage：sessionStorage.setItem('key','value')。

（2）获取某个sessionStorage：sessionStorage.getItem('key')。

（3）从sessionStorage删除某个保存的数据：sessionStorage.removeItem('key').

（4）从sessionStorage删除所有保存的数据：sessionStorage.clear().

localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储使用的，解决了cookie存储空间不足的问题，localStorage中一般浏览器支持的是5M大小，并且不同的浏览器中localStorage会有所不同。

localStorage的特点

（1）localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

（2）只能存储字符串类型的对象

（3）localStorage的生命周期是永久的，即使用localStorage信息，既是是将浏览器关闭了，数据也不会消失。这意味着除非用户主动清除localStorage中的信息，否则这些信息将永久保存。

（3）不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于想用域名和端口），但是不同页面或标签页面间无法共享sessionStorage的信息

localStorage的常用方法

（1）保存或设置数据到localStorage：localStorage.setItem('key','value')

(2)获取某个localStorage：localStorage.getItem('key').

(3)从localStorage删除某个保存的数据：localStorage.removeItem('key').

(4)从localStorage删除所有保存的数据：localStorage.clear().

什么是DOM

DOM的全称是document object model，即文档对象模型。当用户访问一个Web页面时，浏览器会解析每个HTML元素，DOM将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合，形成DOM的分层节点，即DOM树。树中的所有节点都可以通过脚本语言（如JavaScript）进行访问。所有HTML元素节点都可以被创建，添加或者删除。

在DOM分层节点中，页面用分层节点图表示。

（1）整个文档是一个文档节点，就像树的根一样。

（2）每个HTML元素都是元素节点。

（3）HTML元素内的文本都是文本节点。

（4）每个HTML属性都是属性节点。

当访问该页面是，浏览器会解析每个HTML元素，创建了HTML文档的虚拟结构，并将其保存在内存中。接着，HTML页面被转换成树状结构，每个HTML元素成为一个子节点，连接到父分支。

 节点树中的节点彼此拥有层级关系。可以使用父（parent）、子（child）和兄弟（sibling）等术语描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点，节点间的关系可以使用下图描述。

常用节点属性

节点属性	说明
nodeType	返回节点类型的数字值（1~12）
nodeName	元素节点：标签名称（大写）属性节点，属性名称，文本节点：#text，文档节点，#document
innerHTML	元素节点中的文字内容，可以包括HTML元素内容
parentNode	父节点
parentElement	父节点标签元素
childNodes	所有子节点
firstChild	第一个子节点，Node对象形式
firstElementChild	第一个子标签元素
lastChild	最后一个子节点
lastElementChild	最后一个子标签元素
previousSibling	上一个兄弟节点
previousELementSibling	上一个兄弟标签元素
nextSibling	下一个兄弟节点
nextElementSibling	下一个兄弟标签元素

 可以通过节点的层次关系，使用节点的parentNode、firstElementChild、lastElementChild等属性在文档结构中导航节点。

获取页面元素的方法

getElementById()方法

getElementById()方法通过节点的id，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。

document.getElementById("myDiv");
//静态方法。返回带有指定id为muDIv的元素对象，{Object}

getElementsByName()方法

getElementsByName()方法是通过节点的name获取节点，这个方法返回的不是一个节点元素，二十具有同样名称的节点数组。然后可以通过要获取节点的某个属性来循环判断是否为需要的节点。name属性值一般只应用与表单元素的处理。

var a=document.getElementsByName("myname");
//返回一个实时更新的NodeList集合

getElementsByTagName()方法

在指定上下文（容器）中，该方法时通过节点的Tag获获取节点，同样该方法也是返回一个数组。

document.getElementsByTagName("div");
//动态方法，返回指定标签名的元素集合

getElementsByClassName()方法

在指定上下文中，该方法是通过节点的类名获取节点返回一个数组。

document.getElementsByClassName("example color");
//返回文档中所有指定类名的元素集合，是NodeList对象

querySelector()方法

指定上下文中，通过选择器获取到指定的元素对象，哪怕页面有多个符合的元素对象，也只获得第一个。

var box=document.querySelector("#box");
//返回id为box元素
<div id="myDiv" class="example exp">
document.querySelector(".example.exp");
//返回样式应用example exp的元素

querySelectorAll()方法

在指定上下文中，通过选择器获取到指定的集合

document.querySelectorAll("#box");
//返回页面所有应用btns样式的元素
document.querySelectorAll(".example,.exp");
//返回页面应用example和exp样式的所有元素
var box=document.querySelector("#box");
var links=box.querySelectorAll("a");
//获取id为box元素下的所有a链接
links=document.querySelectorAll("#box a");//该语句与上两行语句等价

如果想动态改变页面中某些元素的属性，可以使用JavaScript中提供的获取和改变元素属性的方法

（1）getAttribute("属性名")：用来获取元素的属性值。

（2）setAttribute("属性名","属性名")：用来设置元素的属性值。

（3）createAttribute("属性名")：用来创建元素的属性。

创建和增加节点

创建节点和增加节点的主要方法

名称	描述
createElement(tagName)	按照给定的标签名称创建一个新的元素节点
createTextNode(sting)	按给定的字符串创建一个新的文本节点
appendChild(nodeName)	向已存在节点列表的末尾添加新的子节点
insertBefore(newNode,oldNode)	向指定的节点之前插入一个新的子节点
cloneNode(deep)	赋值某个指定的节点

（1）insertBefore(newNode,oldNode)的两个参数中，newNode是必须项，表示新插入的节点；oldNode是可选项，表示新节点被插入oldNode节点的前面。

（2）cloneNode(deep)中的参数deep是布尔值。当deep的值为true时，会赋值指定的节点及他的所有子节点；当deep的值为false时，只复制指定的节点和它的属性。

删除和替换节点

删除和替换节点

名称	描述
removeChild(node)	删除指定的节点
replaceChild(newNode,oldNode)	用其他节点替换指定的节点

HTML DOM对象

HTMLDOM document对象代表整个HTML文档，可用来访问页面中的所有元素，document对象是window对象的一部分。

由于document对象是window对象的一部分，document对象又代表整个HTML文档，因此HTML中的每个节点都是对象，并且每个对象都有相应的属性、方法和事件。

访问HTML DOM对象的属性

由于HTML中的每个节点都是一个对象，所以访问或设置的属性值时，可以不使用getAttribute()和setAttribute()方法，而是直接使用“对象名.属性”的方法对对象的属性值进行访问和修改。

表格对象

在HTML中表格是由<table>标签来定义的，每个表格均有若干行（由<tr>标签定义），每行被分割为若干个单元格（由<td>标签定义）

在HTML DOM中，Table对象代表一个HTML表格，TableRow对象代表HTML表格的行，TableCell对象代表HTML表格的单元格。在HTML文档中课通过动态创建Table对象、TableRow对象和TableCell对象来创建HTML表格。在HTML文档中，<table>每出现一次，一个Table对象就会被创建；<tr>标签每出现一次，一个TableRow对象就会被创建；<td>标签每出现一次，一个TableCell对象就会被创建。

Table对象

Table对象的属性和方法

类型	名称	描述
属性	rows[]	返回包含表格中所有行的一个数组
方法	insertRow()	在表格中插入一个新行
	deleteRow()	从表格中删除一行

（1）rows[]返回表格中的说有行（TableRow对象）的一个数组。语法格式如下：

tableObject.rows[]

（2）insertRow()方法用于在表格中的指定位置插入一个新行。语法格式如下：

tableObject.insertRow(index)

参数index表示新行将被插入index所在行之前。若index等于表格的行数，则新行将被插入表格的末尾；若index等于0，则新行将被插入表达个的第一行，因此index不能小于0或大于表格中的行数。

（3）deleteRow()方法用于从表格中删除指定位置的行，语法格式如下：

tableObject.deleteRow(index)

参数index是小于表格中所有行数的正数，当index等于0时，表示删除第一行

TableRow对象

TableRow对象的属性和方法

类别	名称	描述
属性	cells[]	返回包含行中所有单元格的一个数组
	rowIndex	返回改行在表中的位置
方法	insertCell()	在一行中的指定位置插入一个空的<td>标签
	deleteCell()	删除行中指定的单元格

（1）insetCell()方法用于在HTML表格一行中的指定位置插入一个空的<td>标签。语法格式如下：

tableObject.insertCell(index)

(2)deleteCell()方法用于删除表格中的单元格，语法格式如下：

tableObject.delete(index)

TableCell对象

类别	名称	描述
属性	cellIndex	返回单元格在某行单元格集合中的位置
	innerHTML	设置或返回单元格的开始标签和结束标签直接的HTML
	align	设置或返回单元格内部数据的水平排列方式
	className	设置或返回元素的class属性