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

五、总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/942219.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux系统编程深度解析:C语言实战指南

文章一览 前言一、gcc编译系统1.1 文件名后缀1.2 C语言编译过程1.3 gcc命令行选项 二、gdb程序调试工具2.1 启动gdb和查看内部命令2.2 显示源程序和数据2.2.1 显示和搜索源程序2.2.2 查看运行时数据 2.3 改变和显示目录或路径2.4 控制程序的执行2.4.1 设置断点2.4.2 显示断点2.…

使用QML实现播放器进度条效果

使用QML实现播放进度效果 QML Slider介绍 直接上DEMO如下&#xff1a; Slider {width: 300;height: 20;orientation: Qt.Vertical; //决定slider是横还是竖 默认是HorizontalstepSize: 0.1;value: 0.2;tickmarksEnabled: true; //显示刻度}效果图如下 那么我先改变滑块跟滚轮…

云数智融合体系建设实践——以工行软件开发中心为例

随着“云计算第三次浪潮”的涌动&#xff0c;业界正见证着一场围绕“算力”的结构性变革。云计算、大数据、人工智能三大核心技术的深度融合&#xff0c;正推动着算力基础设施的快速发展&#xff0c;实现算力的高效调度与利用&#xff0c;也标志着业界对云计算体系布局的全新理…

评估大语言模型在药物基因组学问答任务中的表现:PGxQA

​这篇文献主要介绍了一个名为PGxQA的资源&#xff0c;用于评估大语言模型&#xff08;LLM&#xff09;在药物基因组学问答任务中的表现。 研究背景 药物基因组学&#xff08;Pharmacogenomics, PGx&#xff09;是精准医学中最有前景的领域之一&#xff0c;通过基因指导的治疗…

com.google.common.collect.ImmutableList$SerializedForm

今天AndroidStudio安装了个2021版本的&#xff0c;gradle用了7.3.3&#xff0c;创建项目后控制台总是有这样一个错误&#xff1a; Unable to load class com.google.common.collect.ImmutableList$SerializedForm. This is an unexpected error. Please file a bug containing…

[机器学习]sklearn入门指南(2)

上一篇文章中&#xff0c;我们介绍了如何用sklearn训练和预测模型&#xff0c;以及缺失值处理&#xff0c;详见[机器学习]sklearn入门指南&#xff08;1&#xff09; 分类变量 分类变量&#xff08;Categorical Variable&#xff09;&#xff0c;也称为定性变量&#xff08;Q…

CentOS下,离线安装vscode的步骤;

前置条件&#xff1a; 1.CentOS7; 步骤&#xff1a; 1.下载vscode指定版本&#xff0c;例如&#xff1b; 例如 code-1.83.1-1696982959.el7.x86_64.rpm 2.使用下面命令&#xff1a; sudo rpm -ivh code-1.83.1-1696982959.el7.x86_64.rpm 其他&#xff1a; 卸载vscode的命…

AI一键制作圣诞帽头像丨附详细教程

我用AI换上圣诞帽头像啦~&#x1f385; 不管是搞笑表情、宠物头像还是你的自拍&#xff01;&#xff01;都能一键添加圣诞帽元素&#xff0c;毫无违和感&#xff01;&#x1f389; 详细教程在P3、P4&#xff0c;手残党也能轻松搞定&#xff01; 宝子们需要打“need”&#xff0…

基于java博网即时通讯软件的设计与实现【源码+文档+部署讲解】

目 录 1. 绪 论 1.1. 开发背景 1.2. 开发意义 2. 系统设计相关技术 2.1 Java语言 2.2 MySQL数据库 2.3 Socket 3. 系统需求分析 3.1 可行性分析 3.2 需求分析 3.3 系统流程图 3.4 非功能性需求 4. 系统设计 4.1 系统功能结构 4.2 数据库设计 5. 系统实现 5.…

智能公文写作一体机,开箱即用快速部署超便捷

在繁忙的政企事业单位中&#xff0c;时间就是生产力。公文撰写作为各类组织日常工作的核心环节&#xff0c;却常常因为传统的公文处理流程繁琐耗时而成为效率的瓶颈。如何打破这一瓶颈&#xff0c;实现高效的公文撰写&#xff0c;成为了众多单位关注的焦点。 一款即开即用的公文…

idea2024创建JavaWeb项目以及配置Tomcat详解

今天呢&#xff0c;博主的学习进度也是步入了JavaWeb&#xff0c;目前正在逐步杨帆旗航&#xff0c;迎接全新的狂潮海浪。 那么接下来就给大家出一期有关JavaWeb的配置教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正…

从零开始使用MaxKB打造本地大语言模型智能问答系统与远程交互

文章目录 前言1. 下载运行Ollama2. 安装大语言模型3. 安装Cpolar工具4. 配置公网地址5. 固定公网地址6. MaxKB 添加Olama7.创建问答应用 前言 目前大语言模型&#xff08;LLM&#xff09;已经成为了人工智能领域的一颗璀璨明星&#xff0c;从自然语言处理到智能问答系统&#…

二年级数学知识边界总结思考-下册

目录 一、背景二、过程1.数据收集和整理一、知识点二、由来三、作用和意义 2.图形的运动一、知识点二、由来三、作用和意义 3.小小设计师一、知识点二、由来三、作用和意义 4.克和千克一、知识点二、由来三、作用和意义 5.数学广角-推理一、知识点二、由来三、作用和意义 三、总…

企业数字化转型加速,现代 IT 如何用 Datadog 全面提升可观测性?

作为 Gartner 可观测平台魔力象限的领导者&#xff0c;Datadog 凭借全面的功能、直观的用户界面和强大的产品路线图赢得了全球企业的信任。 企业 IT 架构正变得日益复杂&#xff0c;从本地服务器到云端部署&#xff0c;从单体应用向微服务&#xff0c;还有容器、 Kubernetes 等…

绕组识别标签规范

有标签名称的要标记&#xff0c;没有的不用标记 需要标注的工具、器材 图像中文名称标签名称od脱模剂watering can2铁铲shovel1记号笔&#xff0c;白色着重标bluepen/whitepen6纸质标签label3钢尺scale5玻璃纤维带&#xff08;卷&#xff09;红色网格布red grid4白色网格布wh…

NPM老是无法install,timeout?npm install失败

NPM老是无法install&#xff0c;timeout&#xff1f; 尝试一下如下操作 一、 更换国内源 npm config set registry https://registry.npmmirror.com npm install或指定源install npm install pkg --registry https://registry.npmmirror.com --legacy-peer-deps如下图 二…

Unity开发哪里下载安卓Android-NDK-r21d,外加Android Studio打包实验

NDK下载方法&#xff08;是r21d,不是r21e, 不是abc, 是d版本呢) google的东西&#xff0c;居然是完全开源的 真的不是很多公司能做到&#xff0c;和那种伪搜索引擎是不同的 到底什么时候google才会开始造车 不过风险很多&#xff0c;最好不要合资&#xff0c;风险更大 Andr…

六、模型显示位置与放缩

参考文档 # https://docs.live2d.com/zh-CHS/cubism-sdk-manual/layout/ 查看 LAppLive2DManager.cpp 中的 ChangeScene 方法&#xff0c; void LAppLive2DManager::ChangeScene(Csm::csmInt32 index) {_sceneIndex index;if (DebugLogEnable){LAppPal::PrintLog("[AP…

我的JAVA-Web基础(2)

1.JDBC 防止sql注入 2.JSP JSP的基本语法 基本语法是 <% %> Java代码 <% %> 输出变量 可以转换成${变量}的EL表达式 <%! %>定义变量 JSP的基本语法包括以下几个主要部分&#xff1a; 1. 表达式&#xff08;Expression&#xff09; 表达式用于将…

VR 动感单车身心调适系统的功能与作用

如今&#xff0c;人们面临着来自各方的压力&#xff0c;国家重视国民身心健康&#xff0c;但人们在实际生活中却缺乏有效的身心调节方式。无论是久坐的白领&#xff0c;还是学业繁重的学生&#xff0c;都存在身体亚健康和心理压力大的问题。传统健身方式枯燥、心理咨询成本高且…