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