对于DOM（Document Object Model,文档对象模型），在刚刚接触的时候，我认为没有必要理解得十分透彻，这十分的不现实。所以，我只是记录我现在阶段对DOM的简单理解。
也许用文字描述的话，不仅对我的语言组织能力是极大的挑战，对你的理解也没有太大帮助，所以我们借助一个简单的小例子说明下吧。
<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
</div>
</body>
</html>
为了更加形象，我们画出上面页面的简略DOM树形结构：
DOM结构图
从上图来看，<code>HTML</code> 为所有元素的 祖先元素 。换句话说，html下面的所有元素为html的 后代元素 。<code>HEAD</code> 和 <code>BODY</code> 为 <code>HTML</code>的 子元素 。 也即是说，<code>HTML</code> 为 <code>HEAD</code> 和 <code>BODY</code> 的 父元素 。而 <code>P</code> 元素则为 <code>DIV</code> 的子元素（也是后代元素），是 <code>HTML</code> 和 <code>BODY</code> 的后代元素，是其它 <code>P</code> 元素的 同辈元素。
keyword： 祖先元素、后代元素、子元素、父元素、同辈元素。
围绕着上面的实例有助于你对DOM的理解。
当然，这只是我的简单理解，如果你有更好的想法，可以在下面发表你的见解，以便我更新这一系列的文章，帮助更多的人简单学习。
网友评论