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

news2024/9/30 11:34:09

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Mojo 不安全指针 详解

Mojo 不安全指针 详解

该UnsafePointer类型创建对内存中某个位置的间接引用。您可以使用UnsafePointer来动态分配和释放内存，或指向由其他代码分配的内存。您可以使用这些指针编写与低级接口交互的代码，与其他编程语言交互，或构建某些类型的数据结构。但顾名思义，它们本质上是不安全的。例如，当…
阅读更多...
各地级市能源消费总量、夜间灯光值数据（2000-2022年）

各地级市能源消费总量、夜间灯光值数据（2000-2022年）

全国各地级市能源消费总量、夜间灯光值数据&#xff08;2000-2022年&#xff09; 数据年限&#xff1a;2000-2022年 数据格式&#xff1a;excel 数据内容&#xff1a;337个地级市能源消费总量、夜间灯光值数据&#xff0c;包括城市、省份、年份、夜间灯光值&#xff08;总和&am…
阅读更多...
子比主题允梦美化插件全开源版本

子比主题允梦美化插件全开源版本

在其他论坛看到的一款不错的子比美化插件&#xff0c;功能也比较全面&#xff0c;因为插件作者上学没有时间维护&#xff0c;现在开源给大家&#xff0c;插件本站未做测试&#xff0c;需要的朋友自行下载测试&#xff0c;如果有授权的话可以到允梦作者网站进行咨询。需要其他美…
阅读更多...
Java高级面试题（二）-- JVM

Java高级面试题（二）-- JVM

Jvm虚拟机&#xff0c;运行在操作系统之上&#xff0c;编译执行java代码 1, 面试官&#xff1a;手绘一个类加载过程 补充&#xff1a; 这里的执行硬件 java 调用 c 指令 创建线程 &#xff0c;new thread()->start() 底层代码就是 native start0&#xff08;&#xff09;&…
阅读更多...
Golang | Leetcode Golang题解之第321题拼接最大数

Golang | Leetcode Golang题解之第321题拼接最大数

题目&#xff1a; 题解&#xff1a; func maxSubsequence(a []int, k int) (s []int) {for i, v : range a {for len(s) > 0 && len(s)len(a)-1-i > k && v > s[len(s)-1] {s s[:len(s)-1]}if len(s) < k {s append(s, v)}}return }func lexico…
阅读更多...
选择文件鼠标右键自定义菜单

选择文件鼠标右键自定义菜单

注册表路径 计算机\HKEY_CLASSES_ROOT\*\shell 效果 操作 1.定位 winr&#xff0c;输入regedit, 地址栏输入以下路径&#xff0c;并回车。 计算机\HKEY_CLASSES_ROOT\*\shell 2.在shell上右键&#xff0c;新建项 3右键新建字符串值&#xff0c;Icon,Position 4 右键新建c…
阅读更多...
设备IP监听工具 | 网工工具

设备IP监听工具 | 网工工具

在工作中经常遇到设备IP客户遗忘了&#xff0c;或者销售不知道从哪借来的设备&#xff0c;IP都不知道 导致无法配置设备&#xff0c;普通工控机还有console&#xff0c;服务器就得接显示器接键盘看了 所以用python写了个小工具通过ARP发现设备IP地址&#xff0c;使用前需要安装…
阅读更多...
《书生大模型实战营第3期》基础岛 第1关 ：书生大模型全链路开源体系

《书生大模型实战营第3期》基础岛 第1关 ：书生大模型全链路开源体系

文章大纲 简介更新性能基座模型对话模型 依赖使用案例通过 Transformers 加载通过 ModelScope 加载通过前端网页对话 InternLM 高性能部署推理1百万字超长上下文推理 智能体微调&训练评测标准客观评测长文评估&#xff08;大海捞针&#xff09;数据污染评估智能体评估主观评…
阅读更多...
JavaScript基础(29)_事件对象、鼠标移动事件

JavaScript基础(29)_事件对象、鼠标移动事件

事件对象 当事件的响应函数被触发时&#xff0c;浏览器每次都会将一个事件对象作为实参传递进响应函数&#xff0c;在事件对象中封装了当前事件相关的一切信息&#xff0c;比如&#xff0c;鼠标的坐标 、键盘哪个键被按下、鼠标滚轮滚动的方向。。。 鼠标移动事件&#xff08…
阅读更多...
aspeed2600 GPIO分析与适配ipmitool power status, ipmitool power on/off

aspeed2600 GPIO分析与适配ipmitool power status, ipmitool power on/off

1.说明 本节以x86-power-control/src/power_control.cpp为基础&#xff0c;分析整个GPIO的调用流程&#xff0c;实现简单的ipmitool power on/off,ipmitool power status的管理。 1.资源:x86-power-control:https://github.com/openbmc/x86-power-control2.相关文件: meta-ph…
阅读更多...
【redis 第八篇章】链表结构

【redis 第八篇章】链表结构

一、数组和链表 1、数组 数组会在内存中开辟一块连续的空间存储数据&#xff0c;这种存储方式有利也有弊端。当获取数据的时候&#xff0c;直接通过下标值就可以获取到对应的元素&#xff0c;时间复杂度为 O(1)。但是如果新增或者删除数据会移动大量的数据&#xff0c;时间复…
阅读更多...
AI辅助教育：九章大模型的数学辅导功能解析

AI辅助教育：九章大模型的数学辅导功能解析

1.简介 九章大模型是学而思为学习研发的模型&#xff0c;该模型对于数学做了很多专门的训练&#xff0c;在题目推荐方面做得比较好。 同时&#xff0c;这个模型也能支持上传图片&#xff0c;对图片内容进行分析&#xff0c;然后针对内容进行校对&#xff0c;推荐相识题目。 支…
阅读更多...
用于完成个人搜索的反向图像搜索工具

用于完成个人搜索的反向图像搜索工具

简介&#xff1a; Infringement.report 提供了一个强大的反向图像搜索工具&#xff0c;称为 Raider。这对于网络安全人员和渗透测试人员来说&#xff0c;是一个不可或缺的工具。 主要功能&#xff1a; 反向图像搜索&#xff1a; 该工具允许用户通过图像进行搜索&#xff0c…
阅读更多...
Bash Shell 脚本中的循环语句

Bash Shell 脚本中的循环语句

文章目录 Bash Shell 脚本中的循环语句一、for 循环1.1 列表循环1.2 不带列表循环&#xff08;C 风格的 for 循环&#xff09; 二、案例示例2.1 打印 1-5 的数字2.2 打印 5 次 "hello world"2.3 打印 abcde2.4 输出 0-50 之间的偶数 三、应用技巧3.1 使用花括号和 se…
阅读更多...
自注意力和位置编码

自注意力和位置编码

一、自注意力 1、给定一个由词元组成的输入序列x1,…,xn&#xff0c; 其中任意xi∈R^d&#xff08;1≤i≤n&#xff09;。 该序列的自注意力输出为一个长度相同的序列 y1,…,yn&#xff0c;其中&#xff1a; 2、自注意力池化层将xi当作key&#xff0c;value&#xff0c;query来…
阅读更多...
【Nuxt】资源导入

【Nuxt】资源导入

public 通常用于存放静态资源。 assets 通常用于存放样式表、字体或者 svg 的资源。 图片资源 alias 推荐使用 ~。 <img src"/avatar1.png" alt"avatar1"/> <img src"/assets/images/unnamed.jpg" alt"unnamed"/><te…
阅读更多...
（STM32笔记）九、RCC时钟树与时钟 第二部分

（STM32笔记）九、RCC时钟树与时钟 第二部分

我用的是正点的STM32F103来进行学习&#xff0c;板子和教程是野火的指南者。 之后的这个系列笔记开头未标明的话&#xff0c;用的也是这个板子和教程。 九、RCC时钟树与时钟 九、RCC时钟树与时钟2、时钟配置函数时钟初始化思路(72M)复位时钟至默认状态使能HSE&#xff0c;并等待…
阅读更多...
第128天：内网安全-横向移动IPCATSC 命令Impacket 套件CS 插件全自动

第128天：内网安全-横向移动IPCATSC 命令Impacket 套件CS 插件全自动

环境部署 案例一&#xff1a; 域横向移动-IPC-命令版-at&schtasks 首先是通过外网web访问到win2008&#xff0c;获得了win2008的权限&#xff0c;这一步不做演示 因为里面的主机都不出网&#xff0c;所以只能利用win2008进行正向或者反向连接 信息收集 域内用户信息&…
阅读更多...
【Git学习笔记】零基础入门学习Git

【Git学习笔记】零基础入门学习Git

1. 学习目标 掌握Git企业应用开发的基本操作以及背后原理&#xff0c;掌握工作区、暂存区、版本库的区别掌握Git的版本管理&#xff0c;例如版本回退、撤销、修改等操作掌握Git的分支管理&#xff0c;例如创建分支、合并分支、删除分支掌握本地仓库与远程仓库之间的区别&#…
阅读更多...
数据结构实验报告-链表

数据结构实验报告-链表

实 验 二 报 告 一、实验目的 1.熟练掌握链表的结构类型定义、特点。 2.熟练掌握链表的基本操作算法的实现及其算法时间复杂度的分析。 3.掌握循环链表、双向链表的结构类型定义及其基本操作算法。掌握链表的应用。 二、实验内容 1&#xff0e;请编写一个完整的程序&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023