文档对象模型(dom树）之另类理解方法
刚接触dom的时候,感觉dom不怎么好理解,虽然平时也利用js操作dom修改网页元素,但总感觉印象不清晰.
后来在写一个项目,用js动态修改一个表单的文本框时,突然对dom有了另一种理解.虽然不是技术细节的理解,但个人感觉对dom的认识还是有推进的
dom的全称是document object model(即文档对象模型),是w3c组织为标准化文档操作,而制定的一套独立于程序语言的,文档操作API编程接口.
其实本人并不喜欢,一些特别深奥的计算机概念,总是希望能够用日常生活中的语言来理解记忆一些不喜欢的概念.今天要说的dom也是如此.
dom有多种分类,其中HTML DOM就是其中的一种,今天只说html dom暂不考虑其他
首先,我们都知道,dom的出现就是为了使外部程序能够动态的对文档内容进行操作,一般就是 对文档的增删改查.
但是程序能操作的一般都是内存中的对象,为了达到这个目的,就需要将html元素,在加载后,通过对象的形式存储到内存中,以方便后续程序操作.
程序可能对页面的每一个元素都进行操作,所以在浏览器在渲染页面的时候,就需要将所有页面元素都封装成对象,这就是所谓的dom元素.如图所示:
这样没有序列排列的对象,显得非常乱,也不利于后期的查找和修改,所以就需要找到一种方法,来合理的组织这些对象.该方法要满足两个条件
(1)能够表示出html标签嵌套的结构
(2)能够快速使用程序定位,便于查找
在考虑存放结构的时候,可以忽略对象的具体细节,完全可以把每个dom对象看成一个小球,类似于生活中的台球,这样可以更容易考虑具体的存储结构,在此大家可以考虑下,有哪些存储结构,可以满足这两个条件,然后再和现在的结构对比,就会对现在的结构有一个更深刻的认识.
为了解决这个问题,官方组织采用的是数据结构中的节点的概念来组织这些对象的,也就是我们所说的dom节点.
节点相互之间是以指针相连,这样就可以很方便程序,并且提供对外的api接口,这样就可以很方便的查找到对应的元素
由于浏览器渲染html文档是自顶向下进行的,所以形成dom的形状类似于一颗倒立的树,就是所谓的dom树.
以上仅为个人理解,开拓思维之用,如有更好的理解方式,欢迎评论!!