DOM 结构

文档对象模型 (DOM) 是每个HTML页的核心。DOM规范,允许JavaScript脚本和Java程序在 Web浏览器之间移植,它用以表达这个页面,使得程序可以改变文档的结构,样式,和内容。DOM用节点和对象表示文档。这样,程序语言可以连接到这个页面。

树型结构

DOM用一个节点的继承树型来表示一个文档,它有父节点,子节点,兄弟节点,由它们在树型结构中的位置确定。DOM的一个特征是它如何处理属性。属性是元素节点的属性,由名称和值对构成。并且,树中有几种节点类型,每种代表HTML文档中的不同信息或标记。每个节点类型有不同的属性,方法,数据,事件,并且和其他的节点有相应的关系。

DOM 和 HTML

当浏览器加载一个网页的时候,渲染引擎将开始解析HTML文档,并且转化每个元素到成为内容树的DOM节点树当中。文档当中的每一个单独元素在DOM中都有对应的存在。

HTML

<html>
<head>
<title>The DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
<p id="pr">Test Paragraph</p>
</body>
</html>

DOM HTML标签表示

标签被称为元素节点(或元素)。嵌套标签被称为上级标签的子标签。这样我们就有了元素的一棵树: < html> 是树根, < head>和是字节点,等等。DOM里的节点用像数组一样的节点列表来表示,单独的节点可以通过它们的索引来访问。使用上面的节点树,可以访问任何一个DOM元素。

例子

document.childNodes[1].childNodes[1].childNodes[1]

is

<html>.<body>.<h1>
document.childNodes[1] : represents the HTMLElment, that is <html> tag.
document.childNodes[1].childNodes[1] : represents HTMLBOdyElement, that is <body> tag
document.childNodes[1].childNodes[1].childNodes[1] : represents HTMLHeadingElement, that is <h1> tag.

原文链接