HTMLCSSJavaScriptDOM 之间的关系？

一、HTML

中文名：超文本标记语言英文名：HyperText Markup Language

HTML是一种用来结构化Web网页及其内容的标记语言。

HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

每个元素中都可以有自己的一些属性

二、CSS

中文名：层叠样式表英文名：Cascading Style Sheets

CSS的作用是选择性地控制HTML元素的视觉外观。

CSS有三个特性：继承、层叠、特指度

· 继承：子元素会继承父元素的样式

· 层叠：假如多个特指度相同的Selector都给一个元素应用了样式，那么后定义的规则就会覆盖先定义的规则

· 特指度：可以大致理解为Selector对元素指定的一种详细程度 e.g.: p{...} 和 p.emphasize{...}

三、JavaScript

JavaScript是一种脚本语言/编程语言，无需编译，直接执行。

JavaScript通过操作DOM动态修改页面。

四、DOM

中文名：文档对象模型英文名：Document Object Model

DOM是一种处理HTML和XML文件的标准编程接口。（本文只讨论 HTML DOM）

在网页中，HTML文件会被浏览器解析并构建成一个DOM（文档对象模型）树。

可以看到，DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点元素表示了一个HTML标签或标签内的文本亦或标签内的属性。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML文档转化为DOM树的过程称为解析。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。

通过图Ⅳ我们可以看到：

① 元素：每一个小长方形方格内都是一个元素，DOM中的元素可以看作是对象。

② 节点：在DOM树中，标签、属性、属性都可以是节点。

③ 文档：一个网页就对应一个文档(Document)。

文档的根元素是<html>，内部通常包含<head>和<body>两个子元素，包含了文档的所有其他元素和内容。

Document对象代表了整个网页的文档，你可以通过浏览器的DOM接口【Chrome浏览器：在页面元素上右键点击，选择“检查”或“审查元素”，即可打开】来访问和操作这个文档对象（即DOM树中的节点），从而实现与网页的交互和动态更新。

DOM元素：是浏览器解析HTML文档后，在内存中构建的一个树状结构中的节点，这些节点与HTML中的元素一一对应。

如何理解DOM中的元素可以看作是对象？

在DOM（文档对象模型）中，每个HTML元素都被视为一个对象，这些对象具有属性和方法，可以被JavaScript等脚本语言动态地访问和操作。

所以当DOM树被成功构建后，我们可以通过构建起的DOM树，获得其中的元素节点(图Ⅳ方框中有Element单词的节点)，将其看作是对象，利用对象的属性和方法，对其进行一些操作~