概述

DOM 全名为 Document Object Model 中文翻译为文档对象模型。它是 HTML 和 XML 文档的编程接口。它描述了一个层次化的节点树，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容。

一个 WEB 页面是一个文档。这个文档可以在浏览器窗口或作为 HTML 源码显示出来。DOM 是 WEB 页面的完全的面向对象表述，我们可以使用如 JavaScript 或者 Python 等脚本语言访问和操作存储在 DOM 中的内容。

DOM 的文档元素

DOM 可以将任何 HTML 或 XML 文档描述成一个多层次节点组成的结构。节点分为几种不同的类型，以如下 HTML 为例，文档节点是每个文档的根节点，<html>元素为文档元素。

1
2
3
4
5
6
7
8


<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World !!</p>
    </body>
</html>

文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中且每个文档都只能有一个文档元素。在 HTML 页面中文档元素始终都是元素，而在 XML 中由于没有预定义的元素，任何元素都有可能成为文档元素。

DOM 的节点

DOM 的每个节点都有一个 nodeType 属性，它定义了 12 种节点的类型，如枚举值为 9 的 Document 类型，枚举值为 1 的 Element 类型，诸如代表注释的 Comment 类型等。

JavaScript 通过 Document 类型来表示文档，在浏览器中，document 对象可以作为全局对象来访问，它表示整个 HTML 页面。我们可以通过如下方式来访问文档的子节点

1
2
3


var html = document.documentElement;//取得对<html>的引用
alert(html == document.childNodes[0]);//true
alert(html == document.firstChild);//true

document.getElementById("myDiv");这是 document 对象最常用的应用了，这样我们就可以取得一个或一组元素的引用，然后进行某些操作了。

除了 Document 类型，Element 类型应该是 WEB 编程中最常用的类型了，HTML 中常见的标签应当都是此类型的节点。

1
2
3
4


var div = document.getElementById("myDiv");//取得此元素的引用
alert(div.getAttribute("id"));             //获取id属性，弹出myDiv
div.setAttribute("class","ft");            //设置次元素的class属性为ft
var div2 = document.createElement("div");  //创建一个Div

DOM 对象和 jQuery 对象

在使用 jQuery 时，初学者经常分辨不清哪些是 jQuery 对象，哪些是 DOM对象，因此需要重点了解 jQuery 对象和 DOM 对象以及它们之间的关系。

DOM 对象，即是我们用传统的方法(通常是 JavaScript )获得的对象，也就是上文获取节点引用的方法；jQuery 对象即是用 jQuery 类库的选择器获得的对象。

1
2


var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;

若要使用 jQuery 的 API，我们当然需要一个 jQuery 对象而不能是DOM对象。当然 jQuery 对象和 DOM 对象是可以互相转换的，将 DOM 对象转换为 jQuery 对象后就可以任意使用 jQuery 中的方法了.

1
2
3
4


var domObj = document.getElementById("id"); //获取DOM对象
var $obj = $(domObj);                       //DOM对象转为jQuery对象
var domObj2 = $("#id")[0];                  //jQuery对象转为DOM对象

小结

本文深入总结了标准 DOM 的结构，对常用的 document 对象的特点进行了归纳，同时比较了 DOM 对象和 jQuery 对象的异同，通过本文你是否对 DOM 这棵树有了更加深刻地认识呢？

[参考] 《JavaScript 高级程序设计》

文章目录

DOM 这棵树

概述

DOM 的文档元素

DOM 的节点

DOM 对象和 jQuery 对象

小结

最近文章

分类

标签

其它