缩略图
程序开发 \ javascript \

HTML DOM 模型

DDBug on 2010-03-30 with 1,900 views , no comment

本文收集整理自http://w3schools.com,简单的介绍一下HTML DOM模型。

HTML DOM模型可以用下面的html tree进行概括：

上图中的每一个方框都代表一个节点(Node)。如果你想动态的更改页面内容，只需要更改相应的节点即可。如果你打开任何一个网站，查看其源代码，会发现这个模型无处不在。

下面是节点之间的关系图

<html>节点是一个页面的根节点，当然你可以把上图中的节点替换成其它节点，也可以找到类似的关系。通过firstChild、lastChild、nextsibling、previousSibling、childNodes、parentNode等节点属性，可以遍历整个页面文档。

常用的节点属性和方法

我们假设x是一个一个节点对象，下面是一些常用的属性：

  • x.innerHTML —— 可以获取或更改x的文本内容
  • x.nodeName —— x的节点名称，只读，不可改写。如果x是HTML元素，返回的就是元素名(如p,h1,a等)，如果x是HTML标签的属性，返回的就是属性名(如href、title等)。
  • x.nodeValue —— 节点值。如果x是HTML元素,nodeValue无意义。如果果x是HTML标签的属性，则表示属性值。如果x是文本节点(Text)，则表示文本的内容。
  • x.parentNode —— x的父节点
  • x.childNodes —— x 的子节点集合
  • x.attributes —— x的属性集合

另外还有一个nodeType属性，表示节点类型：

Element type NodeType
Element 1
Attribute 2
Text 3
Comment 8
Document 9

下面是一些常用的方法：

  • x.getElementById(id) – 根据元素id获取节点对象
  • x.getElementsByTagName(name) – 根据标签名获取所有元素的集合
  • x.appendChild(node) – 给x插入一个子节点
  • x.removeChild(node) – 从x中删除一个子节点

最后再了解一下HTML DOM中的事件

页面中的每一个元素都有触发脚本语句或函数的事件。比如我们点击页面中的某个按钮的时候，就触发了相应的”点击”事件，如果我们为这个”click”事件注册了脚本语句或函数的话，这个时候就会执行注册的脚本语句或函数。

以下列举几个事件触发的例子：

  • 当鼠标点击的时候，触发”onclick”
  • 当加载完页面或图片的时候，触发”onload”
  • 当鼠标经过指定的区域的时候，触发”onmouseover”
  • 当元素获得焦点的时候，触发”onfocus”
  • 当按下键盘的时候，触发”onkeydown”,”onkeypress”,”onkeyup”

更多事件请参考http://w3schools.com/jsref/dom_obj_event.asp

添加评论

还没有评论，快抢沙发

添加评论