| 什么是DOM，DOM的作用，以及DOM与JavaScript的关系 | 您所在的位置：网站首页 › dom树形结构的属性节点 › 什么是DOM，DOM的作用，以及DOM与JavaScript的关系 |
什么是DOM，DOM的作用，以及DOM与JavaScript的关系
|
一个想学web前端的初学者，如果在知乎中搜索推荐书目的话，得到的答案多数都是：首先，学习htlm+css；第二点就是阅读《JavaScript DOM 编程艺术》这本书。 作为一个初学的小白，JavaScript大概知道是个什么东西，但是DOM是什么？？ 在该书的前沿部分写道：本书的真正目的是让大家理解DOM脚本编程技术背后的思路和原则。然而在看了将近2/5的书之后，对于DOM这个概念还是模棱两可(小渣渣不懂事，勿喷...)，对于DOM和JavaScript之间的关系也是非常糊涂，于是整理书上对于两者的解释并根据网上查阅到的资料，理一理到底什么是DOM，它和JavaScript又有什么关系。 目录 1.什么是DOM？ 2.DOM有什么用？ 3.DOM和JavaScript的关系.
1.什么是DOM？ DOM是一套对文档的内容进行抽象和概念化的方法。 ——《JavaScript DOM 编程方法》文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。 ——百度百科文档对象模型 (DOM) 是HTML和XML文档的编程接口。 —— MDN 由此可见，DOM是一个接口，一个API，而这个API是经过标准化的。说到标准化，就要说一说DOM的历史了。 Netscape Navigator 4和IE 分别于1997年先后发布了经过改进，大幅扩展的DOM，使JavaScript能够完成的功能大大增加，这本是前端程序员的福音，但是这两个版本的DOM却有个致命的缺点，不兼容！换句话说，虽然浏览器制造商的目标一样，但他们在解决DOM问题时采用的办法完全不同。因此很多时候，程序员在编写DOM脚本代码时不得不编写两次，一次为Netscape Nacvigator,另一次为IE。于是人们越来越少的使用它。 就在浏览器制造商以DOM为武器展开营销大战是，W3C(万维网联盟World Wide Web Consortium)不事声张地结合大家的优点推出了一个标准化的DOM，令人欣慰的是，Netscape、微软和其他一些浏览器制造商们还能抛开彼此的敌意而与W3C携手制定新的标准，并于1998年10月完成了"第一级DOM（DOM Level 1）"。现已发展至3级DOM。 作为DOM的统一者W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态的访问和修改文档（html或xml文档）的内容、结构和样式。” 其实讲了半天，就是一句话，DOM是一个接口，我们可以通过DOM这个接口来对文档（即HTML或XML）进行修改。 那么DOM能完成怎样的修改，达到什么样的效果呢？这就是接下来要讲的，DOM的作用。 2.DOM有什么用？ DOM把一份文档（以HTML为例）表示为一棵树。如下图所示：
（图片来源于网络）
在DOM中，文档是由节点构成的集合，而节点又分为不同的类型。元素(element)节点，文本(text)节点，属性(attribute)节点。
元素节点：如上图中的,,,等，即html中的标签。其中是的父节点，是的子节点，是的兄弟节点。文本节点：如上图中的"My title"、"My link"等。属性节点：如上图中的"href"，以及我们在html中经常使用的"class"、"title"等。
DOM就是为了操作HTML中的元素，如： food var shopping = document.getElementById("purchases"); shopping.setAttribute("title","a list of goods"); 其中，getElementById()，是DOM中的一个方法，可用于查找文档中的一个特定的元素，即id=purchases的元素，在此例中将id=purchases的元素p赋值给shopping。setAttribute()方法，用于对属性节点的值做出修改，此处将元素p中title属性的值设置为"a list of goods"。 当然DOM中还提供了许多其他的方法，使我们对文档的内容、结构和样式进行修改，此处不再列举。
3.DOM和JavaScript的关系
我们都知道JavaScript是一种编程语言，而.js文件是用JavaScript编写的代码，那么DOM在其中担任什么样的角色呢？ DOM不是一种编程语言，但如果如果没有DOM，JavaScript语言不会有任何网页。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。 下面用一段代码更直观地显示JavaScript和DOM的区别，代码中被标为红色的部分就是DOM： var Tags = document.getElementsByTagName("a"); for(var i = 0; i < Tags.length; i++) { alert("Href of this a element is :" + Tags[i].href + "\n"); } 这样一来，哪些是核心JavaScript，哪些是DOM，各自起什么作用就可以一目了然。（此处不在对代码进行解释）。 因此有这样一个近似的等式： web或XML页面 = DOM +JS(脚本语言)
以上，就是全部内容。 分割线就是我，我就是分割线
接下来就是笔者的瞎逼逼了...... 作为一个web前端的初学者，若上文有任何错误请大家多多指正。 第一次写blog表示很激动...发现写博客还是很好玩的哈哈哈哈哈哈，简直写到废寝忘食... 所以我要去吃饭了哈哈哈哈哈哈
（围观群众表示对笔者很无语...）
|
【本文地址】