对于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树形结构:
从上图来看,<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的理解。
当然,这只是我的简单理解,如果你有更好的想法,可以在下面发表你的见解,以便我更新这一系列的文章,帮助更多的人简单学习。