JavaScript DOM的基本介绍

前言

我们平常在web说的JavaScript其实是有三部分组成的

ECMAScript(JavaScript的核心模块)
DOM(用于操作文档节点)
BOM(用于操作浏览器)

而JavaScript是以ECMAScript规范作为核心模块，根据其宿主环境而创建出来的动态解释性脚本语言。

例如，在浏览器中的JavaScript语法和在Node使用的JavaScript语法有细微不同的（宿主环境不同）。而不同的浏览器之间所使用的JavaScript语法也略有差异。

因为JavaScript是由浏览器的JS引擎去解析执行的，而浏览器的JS引擎是由浏览器开发商所开发出来的。浏览器开发商根据ECMAScript,DOM,BOM规范，再根据自己所开发的浏览器开发JS引擎的。

也因此说，为什么有时候相同的JavaScript代码在不同的浏览器显示的效果不同

当然，现在市面上常见浏览器的JS引擎也就那么几种(因为开发JS的引擎实在是太难了，而且也有大公司开源了它们的JS引擎，于是就用它们的JS引擎了)

浏览器	JS引擎
chrome	V8（Nodejs的JS引擎也是这个）
Firefox	JagerMonkey
Safari	SquirrelFish Extreme
Opera12.16+	Carakan

DOM的基本介绍

DOM是JavaScript中一个非常重要的部分，全称为Document Object Model，DOM是争对HTML和XML文档的一个API。我们开发人员可以通过该API来操作HTML标签。

浏览器的DOM目前经历了以下版本

DOM1(制定了最基本的节点操作，增删改查，主要定义了HTML 和 XML 文档的底层结构)
DOM2，DOM3(对DOM1进行扩展，增加了更多的交互操作和错误检测机制，方便开发人员与HTML和XML的交互)

目前基本所有的浏览器对DOM1的支持度都是十分完善的，而对DOM2和DOM3的标准的各个浏览器支持的程度不同，详细情况可以查看以下网站

网站：https://www.w3.org/2003/02/06-dom-support.html

JavaScript 节点的基本介绍

我认为节点这个概念是DOM中是最重要的概念，只有深刻理解节点概念才能使用好JavaScript的DOM

在我们看一份HTML代码时，我们可以轻易发现这份HTML代码是由各种各样的标签组成的，而且标签中是可以嵌套标签的，并且是可以无限嵌套的。

我们发现一份HTML代码肯定只有一个html标签，而该HTML标签中再嵌套一个head标签和一个body标签，而head标签中又可以嵌套标签，body标签也一样。

现在我们规定一种规则

一个标签当作一棵树的一个节点
而HTML标签作为这棵树的根节点
假如一个标签是被嵌套在另一个标签，则该标签则是另一个标签的子节点

这样，我们就可以将一份HTML代码转化成一个树，如下面的例子所示

<!-- 告诉浏览器使用HTML5标准解析该HTML代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Web Page</title>
</head>

<body>
    <h1>Hello World</h1>
    <div>
        <span>DOM Tests</span>
    </div>
    <h2>web page!</h2>
</body>

</html>

而该HTML转化的树如下图所示

上述代码转换DOM树图

而这棵树的每一个节点就对应DOM上的节点

在DOM1中定义了一个Node接口，该接口将会有DOM中的所有节点类型实现（即DOM中所有节点都继承于这个Node接口）

而节点的类型共有12种，这里对节点的每一种类型就不作具体的介绍。

常见的节点类型如下表所示

常量描述	节点类型	描述
Node.ELEMENT_NODE	元素节点	例如p标签和div标签
Node.TEXT_NODE	文本节点	元素节点或者属性节点中实际的文字
Node.COMMENT_NODE	注释节点	代码中的注释
Node.DOCUMENT_NODE	文档节点	一个HTML文件
Node.DOCUMENT_TYPE_NODE	文档描述节点	用来描述HTML代码的，例如 < ! DOCTYPE html >
Node.ATTRIBUTE_NODE	属性节点	标签上的属性描述（在 DOM4 规范里Node 接口将不再实现这个元素属性）

Re_Code

发布了26 篇原创文章 · 获赞 1 · 访问量 1191

私信关注