1.DOM初接触

对于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的理解。

当然,这只是我的简单理解,如果你有更好的想法,可以在下面发表你的见解,以便我更新这一系列的文章,帮助更多的人简单学习。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,682评论 1 92
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 4,619评论 0 9
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 4,284评论 0 8
  • 1. 介绍 浏览器可能是最广泛使用的软件。本书将介绍浏览器的工作原理。我们将看到,当你在地址栏中输入google....
    康斌阅读 6,202评论 7 18
  • 看《墨迹》,差点坐过站。 看书的心情,有期待的,有害怕又不得不看的,又为装样子怠惰的,有焦虑看不完就记不住、学...
    德拉克马阅读 2,622评论 0 0