标签：
20160221 DOM编程详解
从document对象到每个常用的html元素，DOM都提供了对应的类
HTMLDocument：代表HTML文档本身
HTMLBodyElement：代表<body />控件
HTMLDivElement：代表<div />控件
HTMLFormElement：代表表单控件
HTMLSelectElement：代表列表框，下拉菜单控件
HTMLOptionElement：代表列表框，下拉菜单选项控件
HTMLFrame：代表<iframe />控件
HTMLInputElement：代表单行文本框，密码框，按钮等控件
HTMLTableElement：代表表格控件
HTMLTableCaptionElement：代表表格的标题控件
HTMLTableRowElement：代表表格的表格行控件
HTMLTableColElement：代表表格的列控件
HTMLTableCellElement：代表表格的单元格控件
HTMLTextAreaElement：代表多行文本域控件
HTMLOLElement：代表有序列表控件
HTMLULElement：代表无序列表控件
HTMLLIElement：代表列表项控件
访问HTML元素：
1、根据ID访问：document.getElementById(idVal)
访问控件内容，textarea使用value，其它使用innerHTML
2、利用节点关系访问HTML元素
Node.parentNode：返回当前节点的父节点
Node.previousSibling：返回当前节点的前一个兄弟节点
Node.nextSibling：返回当前节点的后一个兄弟节点
Node[].childNodes：返回当前节点的所有子节点
Node[].getElementByTagName(tagName)：返回当前节点的具有指定标签名的所有子节点
Node.firstChild：返回当前节点的第一个子节点
Node.lastChild：返回当前节点的最后一个子节点
访问表单控件常用属性：
1、formObj.elements[index]：返回表单中第index个表单控件
2、formObj.elements[‘elementName’]：返回表单中id或者name为elementName的表单控件
3、formObj.elementName：返回表单中id或者name为elementName的表单控件
访问列表框、下拉菜单的选项
selectObj.options[index]：访问第index个下拉菜单选项
selectedIndex表示被选中项的序号
selectObj.length表示列表的长度
访问表格子元素
table.rows[a].cells[b]：返回表格的第a行的第b个表格子元素，从0开始数
修改HTML元素，通常修改以下属性来实现：
innerHTML，value，className，style，options[index]
创建节点：document.createElement(‘elementName’);
复制节点：Node.cloneNode(boolean)，当boolean为true也会复制该节点的全部后代节点，若为false则表示金复制当前节点
添加节点：
appendChild(newNode)：将newNode添加成当前节点的最后一个子节点
insertBefore(newNode,refNode)：在refNode节点之前插入newNode节点
replaceChild(newChild,oldChild)：将oldChild节点替换为newChild节点
为列表框、下拉菜单添加选项：
selectObj.add(HTMLOptionElement option, HTMLOptionElement before)：在before选项之前添加option选项，如果想添加在最后则将before指定为null即可；或者使用之前的appendChild(option)
可以使用New Option(..,..)的方法来创建菜单选项，别的元素应该是类似的
动态添加表格内容
HTMLTableElement对象有以下方法：
1、insertRow(index)：在index处插入一行
2、createCaption()：为该表格创建标题
3、createTFoot()：为表格创建<tfoot />元素
4、createTHead()：为表格创建<thead />元素
HTMLTableRowElement对象表示表格行，有如下方法用于插入单元格
insertCell(long index)：在index处创建一个单元格
删除节点：removeChild(oldNode)：删除oldChild子节点
删除列表框，下拉菜单的选项方法：
HTMLSelectElement.remove()；
直接指定选项赋为null；
remove(long index)删除指定索引出的选项
删除表格的行或单元格
deleteRow(long index)：删除表格中的index索引处的行
deleteCell(long index)：删除某行index索引出的单元格
document对象代表HTML文档本身，document对象又包含了一系列的属性，forms、anchors、links、images等
document.images[0]表示页面内的第一个图片元素
document.images[id]表示页面内id或者name为id的图片元素
document.images.id表示页面内id或者name为id的图片元素
使用window对象,window提供了以下方法可以直接调用：
alert(),confirm(),prompt()分别用于弹出警示对话框，确认对话框，提示输入对话框
close()：关闭窗口
focus()、blur()：让窗口获得焦点/失去焦点
moveBy()、moveTo()：移动窗口
open()：打开一个新的顶级窗口，用于装载新的URL所指向的地址，并可指定一系列的新属性
print()：打印当前窗口或者Frame
resizeBy()、resizeTo()：重设窗口大小
scrollBy()、scrollTo()：滚动当前窗口中的HTML文档
setInterval()、clearInterval()：设置/删除定时器
setTimeout()、clearTimeout()：设置定时器，但推荐上者
window对象还提供了如下常用属性：
closed：返回一个Boolean值，判断该窗口是否处于关闭状态
defaultStatus、status：返回浏览器状态栏文本
document：返回该窗口装载的HTML文档
frames[]：返回该窗口内包含的Frame对象。每个Frame对象又是一个window对象
history：返回该窗口的浏览历史，支持的方法如下
back()：后退到上一个浏览页面
forward()：前进道下一个浏览页面
go(intValue)：该方法可指定前进或后退多少个页面，intValue为正表示前进，为负表示后退
location：返回该窗口装载HTML文档的URL
hostname：文档所在地址的主机名
href：文档所在地址的URL地址
host：文档所在地址的主机地址
port：文档所在地址的服务端口
pathname：文档所在地址的文件地址
protocol：装载该文档所使用的协议，例如http:
name：返回该窗口的名字
navigator：返回浏览当前页面的浏览器
parent：如果当前窗口是一个Frame，则返回该Frame的直接父窗口
screen：返回当前浏览者的屏幕对象
self：返回自身
top：如果当前窗口是一个Frame，则该属性指向包含本Frame的顶级父窗口
客户机屏幕信息
width：屏幕的横向分辨率
height：屏幕的纵向分辨率
colorDepth：当前屏幕的色深
弹出新窗口：使用window的open()方法
使用定时器：
1、setInterval(“code”,interval)、clearInterval(timer)
2、setTimeout(“code”,interval)、clearTimeout(timer)：均表示在interval毫秒的延迟之后执行一次code
navigator和地理位置
常用的属性：
appName：返回浏览器的内核名称
appVersion：返回浏览器当前的版本号
platform：返回当前浏览器所在的操作系统
使用document对象，有如下几种常用方法：
1、close()：结束一个由open方法打开的document对象
2、open()：打开一个document对象
3、write()：向document对象输出一个字符串，输完后不换行
4、writeln()：输出一个字符串，输完后换行
5、alinkColor,linkColor,vlinkColor,bgColor,fgColor：5个颜色属性，分别对应超链接激活时的颜色，没有访问过的超链接颜色，访问过的超链接颜色，背景色，前景色
6、all：返回该文档所有子元素
7、anchors：返回所有命名锚点数组
8、applets：返回所有Applets数组
9、cookie：读写HTTP cookie
10、documentElement：返回文档额根元素，一般是<html />
11、forms：返回该document包含的所有表单数组
12、frames：返回该document包含的所有Frame集合
13、images：返回该document包含的所有图像数组
14、lastModified：返回该document的最后修改时间
15、links：返回该document包含的所有超链接数组
16、location：作用类似URL
17、referrer：返回上一个页面的URL，且上一个页面中的超链接负责导航当前页面
18、scripts：返回该document包含的所有脚本的数组
19、styleSheets：返回该document包含的所有CSS样式的数组
20、title：返回document对象的标题
21、URL：返回document所在的URL，本值与location的href属性值相同
读写cookie：cookie是name=value对的数据
直接给document.cookie属性赋值即可，格式name=value
其中，name可以指定一下几个属性：
max-age：指定该Cookie存货的最长有效期，以秒为单位
expires：指定Cookie的过期时间
path：指定Cookie的路径
domain：指定Cookie属于哪个域
secure：指定该Cookie的安全属性
浏览器分析：
performance属性：可以对浏览器进行相关分析。
其中performance.timing与页面加载时间有关，包含的属性值自行百度查阅
performance.navigation包含以下属性：
type：该属性返回进入该界面的方式，有如下可选项：
TYPE_NAVIGATE(数值0)：表示正常进入，比如超链接，直接输入URL，提交表单方式等
TYPE_RELOAD(数值1)：通过“重新加载”的方式进入该页面，如点击刷新或调用location.reload();
TYPE_BACK_FORWARD(数值2)：通过“前进”的方式进入该页面，如点击浏览器“前进”按钮
redirectCount：返回重定向的次数
前端笔记十五 DOM编程相关
标签：
原文地址：http://www.cnblogs.com/likaopu/p/5439905.html
