HTML DOM简介:
HTML 文档对象模型(HTML Document Object Model)定义了访问和处理 HTML 文档的标准方法。
什么是DOM?
通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。
在 1998 年,W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。
所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
(1)HTML DOM节点:
根据 DOM,HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的:
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
(2)通过DOM,如何访问HTML文档的每个节点:
你可通过若干种方法来查找您希望操作的元素:
A.通过使用 getElementById() 和 getElementsByTagName() 方法
B.通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
(3)节点列表(nodeList):
当我们使用节点列表时,通常要把此列表保存在一个变量中,就像这样:
var x=document.getElementsByTagName("p");
x[2]:表示第三个<p></p>元素;
(4)根节点:
有两种特殊的文档属性可用来访问根节点:
document.documentElement
document.body
(5)节点的信息:
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
nodeName
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
对于文本节点,nodeValue 属性包含文本。
对于属性节点,nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9