jQuery之DOM操作

Posted 2020-08-15 冷的锋刃

　　对于DOM的认知，我们了解多少？

　　DOM是Document Object Model的缩写，意思是文档对象模型，是由W3C制定的一套访问和操作XML（eXtensible Markup Language）文档的标准，即API。比如DOM告诉javascript引擎如何在浏览器窗口中显示和操作XML创建的标记（Tag）。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。简单来说，DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，给予了Web设计师和开发者一套标准的方法，让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。

　　XML与html相似，但两者是有区别。XML和HTML都来自于SGML，它们都含有标记，有着相似的语法，HTML和XML的最大区别在 于：HTML是一个定型的标记语言，用固定的标记来描述和显示数据，比如<h1>表示首行标题，有固定的尺寸；而XML没有固定的标记，只能通过自定义的标记来描述数据的形式和结构，而不能显示。HTML是将数据 和显示混在一起，而XML则是将数据和显示分开来。那为什么能使用DOM访问和操作HTML文档（即网页）呢？Web语义化的一个发展方向是将HTML逐 渐演变为更有语义、能将数据内容与现实分离的XML，但HTML不可能立即演变为XML，目前推荐使用的是一个过渡产物——XHTML。HTML与 XHTML网页形成的节点树（统称为HTML节点树）在结构上与XML节点树一样，可以看做是一个符合DOM的XML文档，因此可以使用实现了DOM的程 序语言（如JavaScript、php等）来访问和操作HTML文档，即访问和操作那些节点。

　　由于HTML与XML的相似性及差异，JavaScript不仅实现了标准的DOM方法和属性（即由W3C制定的），而且还实现了HTML特有的DOM方法和属性，前者称为DOM Core，并不专属于JavaScript，后者称为HTML-DOM。不管是DOM Core还是HTML-DOM，我们在使用JavaScript的时候要注意浏览器之间的兼容性，因为不同的浏览器对这两类方法和属性的支持可能不一样。 这里不详谈DOM Core和HTML-DOM，以及跨浏览器兼容性，教材上都有详细描述。但一般推荐使用DOM Core方法和属性，尽管稍显繁杂。

　　一般来说，DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

DOM Core

　　DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。

　　JavaScript中的getElmentByld()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

例如：

使用DOM Core来获取表单对象的方法：

document.getElementsByTagName("form");

使用DOM Core来获取某元素的src属性的方法：

element.getAttribute("src");

　　在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。HTML-DOM的出现甚至比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素的属性。

HTML-DOM

例如：

使用HTML-DOM来获取表单对象的方法：

document.forms  //HTML-DOM提供了一个forms对象

使用HTML-DOM来获取某元素的src属性的方法：

element.src;

　　通过上面所说的方法，可以发现获取某些对象、属性既可以用DOM Core来实现，也可以使用HTML-DOM实现。相比较而言HTML-DOM的代码通常比较简短，不过它只能用来处理Web文档。

CSS-DOM

　　CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。

例如：设置某元素style对象字体颜色的方法：

element.style.color = "blue";