HTMLCSSJavaScriptDOM 之间的关系?

news/2024/12/25 23:31:59/
htmledit_views">

一、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),从而实现网页的动态更新和交互功能。


http://www.ppmy.cn/news/1558111.html

相关文章

负载均衡-lvs

负载均衡集群 1、集群是什么&#xff1f; 1 集群&#xff08;cluster&#xff09;技术是一种较新的技术&#xff0c;通过集群技术&#xff0c;可以在付出较低成本的情况下获得在性能、可靠性、灵活性方面的相对较高的收益&#xff0c;其任务调度则是集群系统中的核心技术。 …

前端笔记——大数据量浏览器卡顿优化思路

多任务数据量处理卡顿问题 任务分批次 为避免阻塞&#xff0c;可以将 长时间的单一任务 拆分成多个小任务并分批执行。这样可以在两次任务之间让浏览器有时间处理渲染、用户输入等操作。两种常见方法&#xff1a; setTimeout 方法&#xff1a; 使用 setTimeout 将任务分段&a…

c++类型判断和获取原始类型

std::traits学习 类型判断和退化&#xff08;获取原始类型&#xff09;的原理就是利用模板的特例化。根据调用模板的特例化&#xff0c;在特例化模板中实现判断的逻辑或者退化的逻辑。 一、类型判断 判断整型数据的模板类 #include <iostream> namespace zk {templa…

Linux运维常见命令

vi/vim快捷键使用 1)拷贝当前行 yy ,拷贝当前行向下的5行 5yy&#xff0c;并粘贴&#xff08;输入p&#xff09;。 2)删除当前行 dd ,删除当前行向下的5行5dd 3)在文件中查找某个单词 [命令行下 /关键字&#xff0c;回车查找 ,输入n就是查找下一个 ] 4)设置文件的行号&…

Ubuntu 20.04 卸载和安装 MySQL8.0

卸载 首先&#xff0c;检查一下系统安装的软件包有哪些&#xff0c;使用dpkg -l | grep mysql命令&#xff1a; 为了将MySQL卸载干净&#xff0c;这些文件都需要被删除。 在Ubuntu20.04系统下&#xff0c;卸载干净MySQL8.0以确保下一次安装不会出错&#xff0c;可以按照以下…

微软的AI转型故事

在一次备受瞩目的深度访谈中&#xff0c;微软的CEO萨提亚纳德拉与著名投资人比尔格里和布拉德格斯特纳展开了一场关于微软十年转型与AI未来的深入探讨。这次对话不仅回顾了微软在纳德拉领导下的重大发展轨迹&#xff0c;也为AI时代的战略布局提供了洞见。 纳德拉的职业起点 故…

视频汇聚融合云平台Liveweb一站式解决视频资源管理痛点

随着5G技术的广泛应用&#xff0c;各领域都在通信技术加持下通过海量终端设备收集了大量视频、图像等物联网数据&#xff0c;并通过人工智能、大数据、视频监控等技术方式来让我们的世界更安全、更高效。然而&#xff0c;随着数字化建设和生产经营管理活动的长期开展&#xff0…

闯关leetcode——3158. Find the XOR of Numbers Which Appear Twice

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/find-the-xor-of-numbers-which-appear-twice/description/ 内容 You are given an array nums, where each number in the array appears either once or twice. Return the bitwise XOR of all …