当前位置： 首页 > news >正文

JavaScript青少年简明教程：DOM和CSS简介

news 文章来源：https://blog.csdn.net/cnds123/article/details/140843295 2025/4/5 15:49:30

JavaScript青少年简明教程：DOM和CSS简介

DOM简介

DOM（Document Object Model）将文档表示为一个树形结构，其中每个节点都是一个对象，每个对象都有其自身的属性和方法。

通过对DOM的操作，开发者可以使用编程语言（如JavaScript）动态地更新页面内容、样式以及处理用户交互，为用户提供丰富的体验。

【DOM元素和HTML文档标签的关系

HTML标签是定义网页内容和结构的标记语言元素，存在于HTML文件中。比如<title>,<a>,<h1>等。它们是静态的，决定了网页最初的内容布局。

而DOM(文档对象模型)元素是HTML标签在浏览器中的对象表示形式。当浏览器解析HTML文档时,会根据标签生成对应的DOM元素，形成一个树状结构。DOM元素是动态的对象模型,可以通过JavaScript等脚本语言来访问和操作。

说明：

HTML标签是编写网页内容和结构的标记。

DOM元素是标签在浏览器内存中的对象表示和数据模型。

DOM元素与HTML标签并不是一一对应的关系，因为一个HTML标签在DOM中可能对应多个节点对象。这是由于浏览器解析HTML时，除了构建对应元素节点外，还会创建其他节点，比如文本节点、属性节点等。

举个例子，对于HTML标签<p id="test">Hello World</p>

在DOM中会存在如下节点:

元素节点 - <p>元素

属性节点 - id="test"的属性节点

文本节点 - Hello World的文本节点

所以一个看似简单的HTML标签，在DOM树中可能会有多个节点来表示它的不同部分，而不是简单的一一对应。

另外，除了HTML解析出的节点，DOM还提供了一些附加的节点对象，比如document对象、window对象等，它们在HTML中没有直接对应的标签。】

下面给出一个通过JavaScript操作DOM的示例：

<html lang="zh">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>DOM操作示例</title>  
</head>  
<body>  <h1 id="greeting">你好，世界！</h1>  <button onclick="changeGreeting()">点击我改变问候语</button>  <script>// 定义一个函数来改变问候语  function changeGreeting() {  // 使用getElementById方法来获取id为"greeting"的元素  let greetingElement = document.getElementById('greeting');  // 修改该元素的内容为新的问候语  greetingElement.textContent = '你好，JavaScript!';  }</script>  </body>  
</html>

在这个示例中，当你点击按钮时，会触发changeGreeting函数。该函数首先使用document.getElementById方法获取页面上id为greeting的元素（即<h1>元素），然后修改该元素的textContent属性来改变其显示的内容。这样，<h1>元素的内容将从“你好，世界！”更改为“你好，JavaScript!”

以下是一些常见的DOM操作介绍：

以下是一些常见的DOM操作介绍：

1. 访问DOM元素

通过ID获取元素

let element = document.getElementById('myElement');

通过类名获取元素

返回一个包含所有匹配元素的HTMLCollection。

let elements = document.getElementsByClassName('myClass');

通过标签名获取元素

返回一个包含所有匹配元素的HTMLCollection。

let elements = document.getElementsByTagName('div');

通过CSS选择器获取元素

返回第一个匹配的元素。

let element = document.querySelector('.myClass');

返回所有匹配的元素，返回的是一个NodeList。

let elements = document.querySelectorAll('.myClass');

2. 修改DOM元素内容和属性

修改元素内容

a)修改元素的文本内容：

element.textContent = '新的文本内容';

例如，操作网页的文档对象模型 (DOM)，例如修改元素内容：

<p id="myParagraph">Hello, world!</p>
<script>
document.getElementById("myParagraph").textContent = "Hello, JavaScript!";
</script>

b)修改元素的HTML内容：

element.innerHTML = '<span>新的HTML内容</span>';

修改元素属性

element.setAttribute('src', 'image.png');

获取元素属性

let src = element.getAttribute('src');

删除元素属性

element.removeAttribute('src');

3. 修改元素样式

通过style属性修改内联样式

element.style.color = 'blue';

element.style.fontSize = '16px';

添加或删除类名

element.classList.add('newClass');

element.classList.remove('oldClass');

element.classList.toggle('activeClass');  // 如果类名存在则移除，否则添加

4. 创建和删除元素

创建新元素

let newElement = document.createElement('div');

newElement.textContent = '我是一个新元素';

添加新元素到DOM

let parentElement = document.getElementById('parent');

parentElement.appendChild(newElement);

删除元素

parentElement.removeChild(newElement);

在JavaScript中，操作表单元素是一个常见的任务，它允许你读取用户输入、验证数据、动态地更改表单内容等。下面给出获取表单元素示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Form Example</title>
</head>
<body><form id="myForm"><label for="name">Name:</label><input type="text" id="name" name="name"><br><label for="age">Age:</label><input type="number" id="age" name="age"><br><input type="submit" value="Submit"></form><script>const form = document.getElementById('myForm');form.addEventListener('submit', function(event) {event.preventDefault(); // 防止表单实际提交const name = document.getElementById('name').value;const age = document.getElementById('age').value;alert('Name：'+ name + '    '+ 'Age：'+age);});</script>
</body>
</html>

此例，使用document.getElementById 获取表单元素，然后访问其 value 属性来获取用户输入的数据。

CSS 简介

CSS (Cascading Style Sheets) 是一种样式表语言,用于描述和控制网页中元素的呈现效果，包括布局、字体、颜色、背景等方面的样式。CSS 是网页设计中最重要的技术之一，它可以使网页内容和样式相分离，有利于内容的重复使用和样式的统一管理。

CSS 的主要作用如下:

  1. 布局和排版:通过设置元素的宽高、边距、填充、浮动、定位等属性，可以实现不同的布局和排版方式。
  2. 字体和文本样式:可以设置文本的字体family、大小、颜色、加粗、倾斜、行高、对齐方式等样式。
  3. 背景和边框:可以为元素设置背景颜色、背景图片、背景重复方式，以及边框的样式、颜色、宽度等。
  4. 盒模型:CSS 将网页元素视为矩形盒子，通过设置 margin、padding、border 等属性来控制盒子的样式。
  5. 过渡和动画:CSS3 引入了过渡和动画功能，可以实现元素的平滑过渡和动画效果。

CSS 可以通过多种方式与 HTML 页面关联:内联样式、内部样式表、外部样式表等。在实际开发中，通常推荐使用外部样式表的方式，利于样式的复用和维护。CSS 的语法包括选择器、属性和值，通过不同的选择器可以精准地选中页面中的元素并设置其样式。

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

要对HTML页面中的元素实现一对一，一对多或者多对一的控制，可用CSS 规则集（rule-set）实现，CSS 规则集也称为css样式定义，CSS 规则集由选择器和声明块组成，CSS语法

CSS规则由选择器和声明块组成：

选择器 { 

    属性: 值; 

}

选择器（selector）：用于选择要应用样式的HTML元素。常用选择器：

元素选择器（如 p、div、span 等），选择指定的元素

类选择器（如 .classname），选择指定类的元素，类名以点（.）开头

ID选择器（如 #idname），选择指定ID的元素，ID名以井号（#）开头。

属性选择器（如 [attr=value]），选择指定属性的元素。

伪类选择器（如 :hover、:active 等），选择特定状态的元素。

等

声明块（declaration block）：包含一个或多个声明，每个声明由属性（property）和属性值（value）组成，属性和值之间用冒号分隔，声明之间用分号分隔。

属性 (Property): 要改变的样式特性，如颜色、字体、布局等。

值 (Value): 指定给属性的值，即你希望样式特性具有什么样的表现。

换句话说，声明块指明了样式，选择器指明了 “样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

CSS注释

CSS中的注释以 /* 开头，以 */ 结尾。注释内容不会被浏览器解析。

CSS示例：
/* 选择器 */
body {
  /* 声明块 */
  background-color: lightblue; /* 属性: 值; */
}

h1 {
  color: navy;
  font-size: 24px;
}

p {
  color: green;
}

CSS（层叠样式表）可以通过多种方式应用到HTML文档中，主要有三种：内联样式（Inline Styles）、内部样式表（Internal Stylesheets）和外部样式表（External Stylesheets）。：

1. 行内样式（Inline Styles）

直接在HTML元素的style属性中定义样式。这种方式仅适用于单个元素。但一般不推荐使用，因为它和HTML代码混杂在一起，不易于维护。例如：

<!DOCTYPE html>  
<html>  
<head>  </head>  
<body>  <p style="color: blue; font-size: 20px;">这是一个段落。</p> 
</body>  
</html>

2. 内部样式表（Internal Style Sheet）

在HTML文件的<head>标签内的<style>标签中的定义样式。这种方式在HTML文件内将将样式代码与HTML代码进行了适当分离——写在不同部分。例：

<!DOCTYPE html>  
<html>  
<head>  <style>  p {  color: blue;  font-size: 20px;  }  </style>  
</head>  
<body>  <p>这是一个段落。</p>  
</body>  
</html>

3. 外部样式表（External Stylesheets）

外部样式表是将样式代码写在单独的.css文件中，并通过HTML文件的<link>标签引入。这种方式是最推荐的方式，因为它可以实现样式代码的复用，提高代码的可维护性。

假设创建的css的文件名为styles.css，内容如下：

p {  color: blue;  font-size: 20px;  
}

在HTML文件中引入这个CSS文件：

<!DOCTYPE html>  
<html>  
<head>  <link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
<body>  <p>这是一个段落。</p>  
</body>  
</html>

进一步学习，可参考：

HTML网页文档和DOM结构介绍 https://blog.csdn.net/cnds123/article/details/136901800

BOM和DOM入门 https://blog.csdn.net/cnds123/article/details/109635554

CSS选择器介绍https://blog.csdn.net/cnds123/article/details/125926256

相关文章：

JavaScript青少年简明教程：DOM和CSS简介

JavaScript青少年简明教程&#xff1a;DOM和CSS简介 DOM简介 DOM&#xff08;Document Object Model&#xff09;将文档表示为一个树形结构&#xff0c;其中每个节点都是一个对象&#xff0c;每个对象都有其自身的属性和方法。 通过对DOM的操作&#xff0c;开发者可以使用编…...

编程日记 2024/8/5 8:19:26

架构师知识梳理（一）：计算机硬件

目录 计算机硬件组成 CPU CPU的组成 CPU的功能 校验码 奇偶校验 CRC CRC计算案例 指令 指令指行过程 指令系统 指令系统分类 指令流水线技术 流水线技术相关计算公式 存储 计算机存储系统设计 高速缓存Cache 缓存的局部性原理 地址映射 替换算法 关于命中…...

编程日记 2024/8/5 8:18:25

从根儿上学习spring 四 之run方法启动第一段

图1 由上图我们可以看到&#xff0c;我把run方法分成了5个小段&#xff0c;每小段使用红框圈了起来&#xff0c;这一篇我们先开始讲第一段。大家需要关注下行号&#xff0c;我讲的时候可能会使用行号对应具体某行代码。 图1-289-290行&#xff1a; 没啥好说的定义了两个变量&…...

编程日记 2024/8/5 8:17:23

智能闹钟如何判断用户已经醒了？

智能闹钟判断用户是否已经醒来的方式主要依赖于其内置的传感器和算法系统。以下是一些常见的判断方法&#xff1a; 一、传感器监测 体动传感器&#xff1a;智能闹钟通常配备有体动传感器&#xff0c;用于监测用户的身体运动。当用户从睡眠状态转变为清醒状态&#xff0c;并开始…...

编程日记 2024/8/5 8:15:21

【算法】动态规划解决背包问题

应用场景——01背包问题 有一个背包&#xff0c;背包的容量为 4&#xff0c;现有如下物品 要求 1.目标为装入背包的总价值最大&#xff0c;并且重量不超出 2.要求装入的物品不能重复 动态规划算法介绍 1.动态规划算法的核心是&#xff1a;将大问题划分为小问题进行解决&…...

编程日记 2024/8/5 8:07:13

day09 工作日报表

日期 30日07月2024年 任务安排 今天主要就是讲了security类工作的原理&#xff0c;然后就是让我们自己做项目 工作中的问题 今天做项目的时候发现有时候用postman测试返回20001&#xff0c;说错误见控制台&#xff0c;但是控制台一片祥和&#xff0c;于是就尝试用tr…...

编程日记 2024/8/5 8:01:05

C++学习之路（1）— 第一个HelloWorld程序

C学习之路&#xff08;1&#xff09;— 第一个HelloWorld程序 一、前言 C在C语言的基础上添加了对面向对象编程和泛型编程的支持&#xff0c;在 20世纪90年代便是最重要的编程语言之一&#xff0c;并在21世纪仍保持强劲势头。C继承了C语言高效、简洁、快速和可移植性的传统。 …...

编程日记 2024/8/5 8:00:05

python3 pyside6图形库学习笔记及实践（三）

目录 前言菜单栏相关控件使用QtDesigner快速构建菜单栏结构语法 上下文菜单概念为窗体添加上下文菜单为控件添加上下文菜单 折叠菜单资源的加载内置图标Rcc的使用创建资源文件加载资源文件 前言 本系列文章为b站PySide6教程以及官方文档的学习笔记 原视频传送门&#xff1a;【…...

编程日记 2024/8/5 7:58:01

03 库的操作

目录 创建查看修改删除备份和恢复查看连接情况 1. 创建 语法 CRATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] …] create_specification:  CHARACTER SET charset_name  CPLLATE collation_name 说明&#xff1a; 大写的标识关键…...

编程日记 2024/8/5 7:57:00

嵌入式人工智能（44-基于树莓派4B的扩展板-LED按键数码管TM1638）

树莓派性能非常强悍&#xff0c;但是对于某些复杂的项目来说&#xff0c;会出现心有余而口不足的情况&#xff0c;为了解决这类问题&#xff0c;可以在树莓派上使用扩展板&#xff0c;我们介绍几款常见的扩展板&#xff0c;不仅可以扩展到树莓派&#xff0c;其他单片机或嵌入式…...

编程日记 2024/8/5 7:55:58

linux通过抓包工具tcpdump查看80端口访问量情况

方法&#xff1a; tcpdump -i ens32 -tn dst port 80 -c 10 | awk -F"." {print $1"."$2"."$3"."$4} | sort | uniq -c | sort -nr |head -n 10 #-i&#xff1a;指定端口 #-t&#xff1a;在输出的每一行不打印时间戳 #-n&#xff…...

编程日记 2024/8/5 7:53:56

Mac 上安装和卸载 SDKMAN 及管理多个 JDK

前言 当电脑上有多个 JDK 环境的时候&#xff0c;切换管理比较麻烦&#xff0c;这时候可以使用 SDKMAN 来安装、管理 JDK。 一、安装 SDKMAN! 1. 安装前置条件 首先&#xff0c;确保已经安装了 curl 。如果没有&#xff0c;可以通过 Homebrew 来安装&#xff1a; brew inst…...

编程日记 2024/8/5 7:50:53

字节测开一面面经

1 . 自我介绍 2 . 讲一下常见的数据结构 : 讲了数组,set,list,map,树&#xff0c;图&#xff0c;队列 &#xff0c; 栈等 ; 3 . 讲一下java反射场景和作用 ; 4 . 讲一下你了解的机器学习算法 ; 5 . 我讲完ML之后 &#xff0c; 问了knn和贝叶斯的使用的场景区别(没答上来) ; 6 .…...

编程日记 2024/8/5 7:45:47

HTML 段落

HTML 段落 概述 HTML&#xff08;超文本标记语言&#xff09;是构建网页的标准语言&#xff0c;而段落是构成网页内容的基本单元。在HTML中&#xff0c;段落是通过<p>标签来定义的。本文将详细介绍HTML段落的相关知识&#xff0c;包括段落的基本结构、样式设置、以及在…...

编程日记 2024/8/5 7:44:47

【Mind+】掌控板入门教程04 迷你动画片

还记得小时候每天放学必看的动画片吗&#xff1f;还记得那些年陪伴我一起长大的卡通人物吗&#xff1f;勇救爷爷的葫芦娃&#xff0c;我们的朋友小哪吒&#xff0c;相信这些经典的动画形象已经成为了一代人童年的美好回忆。今天就让我们用掌控板来制作一部迷你动画片吧。 项目示…...

编程日记 2024/8/5 7:42:45

文件上传漏洞-HackBar使用

介绍 HackBar 是一个用于浏览器的扩展插件&#xff0c;主要用于进行网络渗透测试和安全评估。它提供了一系列方便的工具和功能&#xff0c;可以帮助用户执行各种网络攻击和测试&#xff0c;包括 XSS、SQL 注入、CSRF、路径穿越等 下载地址 可以到github上面去下载&#xff0…...

编程日记 2024/8/5 7:39:41

鸿蒙媒体开发【相机数据采集保存】音频和视频

相机数据采集保存 介绍 本示例主要展示了相机的相关功能&#xff0c;使用libohcamera.so 接口实现相机的预览、拍照、录像、前后置摄像头切换进行拍照、录像&#xff0c;以及对焦、曝光等控制类功能。 效果预览 使用说明 弹出是否允许“CameraSample”使用相机&#xff1f;…...

编程日记 2024/8/5 7:37:40

【java基础】徒手写Hello, World!程序

文章目录 前提&#xff1a;java环境变量配置使用vscode编写helloworld解析 前提&#xff1a;java环境变量配置 https://blog.csdn.net/xzzteach/article/details/140869188 使用vscode编写helloworld code .为什么用code看下图 报错了&#xff01;&#xff01;&#xff01;&…...

编程日记 2024/8/5 7:36:38

对 vllm 与 ollama 的一些研究

今天咱们来聊聊 vllm 和 ollama 这两个听起来就挺酷的玩意儿。这俩都是现在 AI 圈子里的大明星&#xff0c;专门用来让那些超大型的 AI 模型跑得更顺溜。 先说说 vllm 吧&#xff0c;这家伙的绝活儿是剪枝。啥叫剪枝呢&#xff1f;想象一下&#xff0c;你有个花园&#xff0c;…...

编程日记 2024/8/5 7:34:37

浅谈基础的图算法——强联通分量算法（c++）

文章目录 强联通分量SCC概念例子有向图的DFS树代码例题讲解[POI2008] BLO-Blockade题面翻译题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 思路AC代码 【模板】割点&#xff08;割顶&#xff09;题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示…...

编程日记 2024/8/5 7:32:35

C#:通用方法总结—第13集

大家好&#xff0c;今天继续讲解我们的通用方法系列。 下面是今天要介绍的通用方法&#xff1a; &#xff08;1&#xff09;这个通用方法为ug获取选择圆边的圆心 /// <summary> /// ug获取选择圆边的圆心 /// </summary> /// <param name"a">&l…...

编程日记 2024/8/5 7:31:34

AI答题应用平台相关面试题

目录 1、请介绍整个系统后端的架构设计&#xff0c;有哪些模块以及各模块之间的关系&#xff1f; 2、你在项目中是如何设计库表的&#xff1f;可以从字段、索引、关联等方面回答。 3、为什么使用策略模式来封装不同的应用评分算法&#xff1f;它有哪些好处&#xff1f;具体如…...

编程日记 2024/8/5 7:30:33

树莓派NAS系统搭建教程：使用Flask和SQLite实现HTTP/HTTPS文件管理（代码示例）

一、项目概述 随着物联网&#xff08;IoT&#xff09;技术的发展&#xff0c;数据存储和共享需求日益增长。本文将介绍如何利用树莓派&#xff08;Raspberry Pi&#xff09;搭建一个网络附加存储&#xff08;NAS&#xff09;系统&#xff0c;以实现数据的集中管理、共享和访问…...

编程日记 2024/8/5 7:28:31

mysql如何储存大量数据，分库存分表的建议和看法

MySQL 在处理大量数据时&#xff0c;分库分表是常见的策略&#xff0c;可以有效提升数据库的性能和扩展性。下面是关于 MySQL 分库分表的建议和看法&#xff1a; 1. 何时考虑分库分表 数据量大&#xff1a;当单一数据库实例无法处理大规模数据或达到性能瓶颈时&#xff0c;可以…...

编程日记 2024/8/5 7:27:30

Golang | Leetcode Golang题解之第310题最小高度树

题目&#xff1a; 题解&#xff1a; func findMinHeightTrees(n int, edges [][]int) []int {if n 1 {return []int{0}}g : make([][]int, n)deg : make([]int, n)for _, e : range edges {x, y : e[0], e[1]g[x] append(g[x], y)g[y] append(g[y], x)deg[x]deg[y]}q : []i…...

编程日记 2024/8/5 7:25:29

【面试系列】软件架构师 高频面试题及详细解答

欢迎来到我的博客，很高兴能够在这里和您见面！欢迎订阅相关专栏： 工💗重💗hao💗：野老杂谈 ⭐️ 全网最全IT互联网公司面试宝典：收集整理全网各大IT互联网公司技术、项目、HR面试真题. ⭐️ AIGC时代的创新与未来：详细讲解AIGC的概念、核心技术、应用领域等内容。 ⭐…...

编程日记 2024/8/5 7:23:27

二百五十四、OceanBase——Linux上安装OceanBase数据库（四）：登录ocp-express，配置租户管理等信息

一、目的 在部署OceanBase成功后&#xff0c;接下来就是登录ocp-express&#xff0c;配置租户管理等信息&#xff01; 二、ocp-express网址以及账密信息 三、实施步骤 1 登录ocp-express 2 集群总览 3 租户管理 3.1 新建租户 3.2 配置新租户信息 剩下的几个模块了解即可&am…...

编程日记 2024/8/5 7:22:26

HCIP学习作业一 | HCIA复习

要求&#xff1a; R1-R2-R3-R4-R5 RIP 100 运行版本2 R6-R7 RIP 200 运行版本1 1.使用合理IP地址规划网络&#xff0c;各自创建环回接口 2.R1创建环回 172.16.1.1/24 172.16.2.1/24 172.16.3.1/24 3.要求R3使用R2访问R1环回 4.减少路由条目数量&#xff0c;R1-R2之间…...

编程日记 2024/8/5 7:21:25

OCR图片矫正、表格检测及裁剪综合实践

问题描述 实际工程中&#xff0c;我们经常需要对图片进行预处理&#xff0c;比如&#xff1a; 1、图片是倾斜的 2、图片背景需要处理掉 3、图片的公章需要剔除 4、图片过暗&#xff0c;过亮 5、图片表格检测 6、图片表格版面分析 。。。。。。等等各种情况。 结果展示…...

编程日记 2024/8/5 7:20:24

c++ 容器 vector

vector的意思就是向量&#xff0c;就是一个顺序表的意思&#xff0c;这个顺序表可以存任意的类型&#xff0c;因为其线性的内存特点&#xff0c;所以在stl里是经常被使用的存在。 vector vector既然要能储存任意的变量&#xff0c;那么就必须使用模板: 这里的T就是变量类型&a…...

编程日记 2024/8/5 7:19:23