什么对象表示整个html文档,HTML DOM 简要笔记

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脚本的两种方式

常用: