HTML DOM 简要笔记

本人博客原文：http://www.openwudi.com/?p=35

Email：mail#openwudi.com(请把#换成@)

DOM概念: W3C组织制定的规范，所有脚本在操作HTML页面元素时都使用这个规范

什么是 DOM？

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。

所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

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

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

一、window对象: 表示浏览器窗口
1.属性：closed(判断窗口是否关闭，false为默认，窗口打开)
2.对象:
 1)document: 表示整个html文档，通过此对象可访问页面上所有的元素
 2)history对象： 表示已浏览的url，常用的方法
    back,返回上一个访问过的页面，forward，前进一个页面，go，访问任意一个已访问的页面
 3)location对象: 包含当前url，默认的属性的href。
 4)navigator对象： 包含浏览器的信息
3.事件：
 onload事件：当页面完成加载时触发
 onscroll事件： 当用户滚动滚动条时触发
4.方法:
1)弹出对话框的三种方式:
 alert:弹出消息对话框window.alert([sMessage])
 confirm:弹出确认对话框bConfirmed = window.confirm( [sMessage])
 prompt:弹出提示对话框vTextData = window.prompt([sMessage] [, sDefaultValue])
2)window.open方法,打开一个新窗口，此方法会返回一个window对象，可以设置窗口的所有属性
3)window.setTimeout：开启定时器，隔多少毫秒后执行一个表达式
 此方法返回一个定时器，可以通过clearTimeout清除定时器
4)window.setInterval: 开启定时器，每隔多少毫秒后执行一个表达式
 此方法返回一个定时器，可以通过clearInterval清除定时器
 
二、Node对象，节点对象，只是所有节点对象的一个统称，不表示具体节点
1.nodeType: 节点类型 document、element(所有的页面元素)Text：文本节点，页面上所有的文本
2.node常用属性
 nodeName节点名字、nodeType节点类型、childNodes所有子节点、parentNode父节点
 nextSibling下一个兄弟节点、previousSibling前一个兄弟节点
 firstChild第一个子节点、lastChild最后一个子节点
3.node常用的方法
 appendChild增加一个子节点，增加为最后一个子节点
 removeChild删除一个子节点
 replaceChild替换一个子节点
 insertChild在当前子节点之前插入一个子节点
 cloneNode克隆节点
 hasChildNodes判断当前节点是否有子节点

三、document对象:表示整个页面文档
1.方法:
createElement()创建一个元素节点，返回一个元素对象，需要append到存在的节点下面，页面才会有显示
获得页面元素： getElementById() getElementsByName() getElementsByTagName()
2.对象：
 body、title
3.集合
 forms所有表单、links所有超链接、anchors所有锚点

四、element元素对象
1.属性：tagName标签名
2.方法:getAttribute和setAttribute获得和设置标签的属性
 
五、table对象
1.table的字节点是tbody，tbody的子节点才是tr
2.table有个属性rows表示所有行对象，tr有个属性cells表示所有单元格对象
3.添加行的两种方式： table.insertRow([index])  tbody.appendChild(tr)
4.添加单元格的两种方式: tr.insertCell([index])  tr.appendChild(td)
5.删除行： table.deleteRow(index) tbody.removeChild(tr)
  两种用法各有用处，就看是拿到行对象，还是知道行号
 
六、a超链接触发JavaScript脚本的两种方式
 常用: