HTML&CSS&JavaScript&DOM 之间的关系?

一、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单词的节点),将其看作是对象,利用对象的属性和方法,对其进行一些操作~

五、总结

HTML来定义网页的结构和内容;CSS来美化网页的外观和布局;JavaScript来实现网页的交互功能和动态效果;其中DOM是连接HTML、CSS和JavaScript的桥梁,JavaScript通过DOM可以访问和操作HTML元素及其样式(CSS),从而实现网页的动态更新和交互功能。

相关推荐
太阳伞下的阿呆39 分钟前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny1 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴2 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔2 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔2 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔2 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6142 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止3 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军3 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安4 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js