（Java高级教程）第四章必备前端基础知识-第三节3：JavaScript之DOM和BOM

news2024/11/20 7:18:11

文章目录

  • 一：WebAPI概述
  • 二：DOM
    • （1）获取元素
    • （2）事件
    • （3）操作元素
      • A：获取（修改）元素内容
      • B：获取（修改）元素属性
      • C：获取（修改）表单元素属性
      • D：获取（修改）样式属性
    • （4）操作节点
      • A：新增节点
      • B：删除节点
  • 三：Js小案例
    • （1）猜数字
    • （2）表白墙

一：WebAPI概述

前面说过，JavaScript包括以下三个部分

  • ECMAScript：JavaScript的语法
  • DOM：页面文档对象模型，对页面中的元素进行操作
  • BOM：浏览器对象模型，对浏览器窗口进行操作

而WebAPI包含DOM和BOM，当然他还包括其他很多内容。前两节所学的JavaScript中的基础语法只是一些基本功，只有配合本节所学的DOM和BOM等WebAPI接口才能做出一些交互式页面，完成更复杂的操作

API参考文档

二：DOM

  • 注意：这里只是简单介绍，DOM内容非常多，掌握基本概念后，遇到不会的查阅文档即可

DOM（Document Object Model）：中文名叫做文档对象模型，当页面被加载出来时会自动创建。HTML DOM模型会被结构化为对象树
在这里插入图片描述

DOM有如下三个重要概念

  • 文档：一个页面就是一个文档
  • 元素：页面中所有的标签称之为元素
  • 结点：网页中所有内容都可称之为节点

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

（1）获取元素

querySelector：利用CSS选择器选中标签，语法格式如下

  • selectors就按照之前CSS中选择器的写法去写即可
var element = document.querySelector(selectors);

例如

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <div class="one">test1</div>  
    <div id="two">test2</div>  
  
    <script src="./javascript.js"></script>  
</body>  
</html>

var elem1 = document.querySelector('.one');  
var elem2 = document.querySelector('#two');  
  
// 普通打印  
console.log(elem1);  
console.log(elem2);  
  
// 将元素以对象形式打印  
console.dir(elem1);  
console.dir(elem2);

在这里插入图片描述

另外，如果所选择结果不唯一有多个，又想要把这多个都选到，应该使用querySelectorAll，最终会返回一个数组

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
<ul class="list">  
    <li>列表项1</li>  
    <li>列表项2</li>  
    <li>列表项3</li>  
    <li>列表项4</li>  
</ul>  
  
<script>  
    var list = document.querySelectorAll(".list li");  
    console.log(list);  
</script>  
  
</body>  
</html>

在这里插入图片描述

（2）事件

事件：JavaScript要构建动态页面，就需要感知用户行为。用户对于页面的一些操作（例如选择、点击等）操作在浏览器中就会产生一个个事件，被JavaScript感知后会触发相应交互操作。事件由以下三个部分构成

  • 事件源：由哪个元素出发
  • 事件类型：是哪种类型的行为
  • 事件处理程序：事件发生后应该怎么响应

时间类型有以下几种

  • 事件概述
  • 窗口事件
  • 表单事件
  • 键盘事件
  • 鼠标事件
  • 媒体事件
  • 其它事件

例如鼠标事件中，onclick表示当鼠标按下时触发

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <button>点击一下</button>  
  
<script>  
    var test = document.querySelector("button");  
    test.onclick = function() {  
        console.log("按下鼠标")  
        alert("你好！");  
    }  
</script>  
  
</body>  
</html>

在这里插入图片描述

（3）操作元素

A：获取（修改）元素内容

innerHtml：获取element标签的HTML结构

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <div>  
        <ul>  
            <li>first</li>  
            <li>second</li>  
            <li>third</li>  
        </ul>  
    </div>  
  
<script>  
    var div = document.querySelector('div');  
    console.log(div.innerHTML);  
</script>  
  
</body>  
</html>

在这里插入图片描述

还可以进行修改，不止可以修改文本，还可以直接修改为HTML片段，并进行渲染

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <div>  
        <ul>  
            <li>first</li>  
            <li>second</li>  
            <li>third</li>  
        </ul>  
    </div>  
  
<script>  
    var div = document.querySelector('div');  
    console.log(div.innerHTML);  
  
    // 点击后修改  
    div.onclick = function() {  
        div.innerHTML = "<span>这是一个span</span>";  
        console.log(div.innerHTML);  
    }  
  
  
</script>  
  
</body>  
</html>

在这里插入图片描述

B：获取（修改）元素属性

当标签选中后，可以通过点选的方式选中标签的属性，进行显示、修改或其他操作

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <img src="dog.png" alt="">  
  
<script>  
    var img = document.querySelector('img');  
    console.log(img.src);  
    console.log(img.width);  
    console.log(img.height);  
  
    // 点击后换一张图片  
    img.onclick = function () {  
        if (img.src.lastIndexOf('dog.png') !== -1) {  
            img.src = 'cat.png';  
        } else {  
            img.src = "dog.png";  
        }  
    }  
  
  
</script>  
  
</body>  
</html>

在这里插入图片描述

C：获取（修改）表单元素属性

表单（主要是input）的以下属性都可以通过DOM来修改

  • value：input的值
  • disable：禁用
  • checked：复选框会使用
  • selected：下拉框会使用
  • type：input的类型

例1：显示输入框内容

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <input type="text">  
    <button>点击一下</button>  
  
<script>  
    var input = document.querySelector('input');  
    var button = document.querySelector('button');  
  
    button.onclick = function() {  
        console.log(input.value);  
    }  
  
  
</script>  
  
</body>  
</html>

在这里插入图片描述

例2：密码的显示和隐藏

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <input type="password">  
    <button>显示密码</button>  
  
<script>  
    var input = document.querySelector('input');  
    var button = document.querySelector('button');  
  
    button.onclick = function() {  
        if (input.type === 'password') {  
            input.type = 'text';  
            button.innerHTML = '隐藏密码';  
        } else if (input.type === 'text') {  
            input.type = 'password';  
            button.innerHTML = '显示密码';  
        } else {  
            alert('类型错误')  
        }  
    }  
  
  
</script>  
  
</body>  
</html>

在这里插入图片描述

例3：计数器加减1

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <input type="text" value="0">  
    <button id="reduce">-</button>  
    <button id="add">+</button>  
  
<script>  
  
    var input = document.querySelector('input');  
    var reduce = document.querySelector('#reduce');  
    var add = document.querySelector('#add');  
  
    add.onclick = function (){  
        // 注意转换类型  
        var oldValue = parseInt(input.value); // var oldValue = +input.value也可以  
        oldValue += 1;  
        input.value = oldValue;  
  
    }  
  
    reduce.onclick = function (){  
        // 注意转换类型  
        var oldValue = parseInt(input.value); // var oldValue = +input.value也可以  
        oldValue -= 1;  
        input.value = oldValue;  
  
    }  
  
</script>  
  
</body>  
</html>

在这里插入图片描述

例4：实现全选功能

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <h3>请选择你最喜欢的水果</h3>  
    <div>  
        <input type="checkbox" class="all">全选  
    </div>  
    <div>  
        <input type="checkbox" class="fruit">苹果  
    </div>  
    <div>  
        <input type="checkbox" class="fruit">香蕉  
    </div>  
    <div>  
        <input type="checkbox" class="fruit">梨儿  
    </div>  
    <div>  
        <input type="checkbox" class="fruit">橘子  
    </div>  
<script>  
    var all = document.querySelector('.all');  
    var fruits = document.querySelectorAll('.fruit');  
  
    all.onclick = function() {  
        for (var i = 0; i < fruits.length; i++) {  
            fruits[i].checked = all.checked;  
        }  
    }  
      
  
</script>  
  
</body>  
</html>

在这里插入图片描述

D：获取（修改）样式属性

行内样式：对于行内样式，可以通过element.style.[属性名]=[属性值]的方式进行修改

  • 注意：style的属性使用拖分命名的方式和CSS对应，例如fontSize对应font-size

如下，实现“每次单击文字使文字增大10px”的效果

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
  
    <h3 style="font-size: 20px">这是一行测试文字</h3>  
<script>  
    var h3 = document.querySelector('h3');  
    h3.onclick = function() {  
        var oldSize = h3.style.fontSize;  
        oldSize = parseInt(oldSize);  
        oldSize += 10;        // 注意加上单位  
        h3.style.fontSize = oldSize + 'px';  
    }  
  
  
</script>  
  
</body>  
</html>

在这里插入图片描述

类名样式：使用element.className=[css类名]来修改类名

如下，实现一个“开启日间模式和夜间模式的效果”

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
<style>  
    /*开灯*/  
    .light {  
        color: black;  
        background-color: white;  
    }  
  
    /*关灯*/  
    .dark {  
        color: white;  
        background-color: black;  
    }  
  
    html {  
        height: 100%;  
    }  
  
    body {  
        height: 100%;  
    }  
  
    div {  
        height: 100%;  
    }  
  
</style>  
  
    <div class="light">  
        一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字  
        一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字        一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字        一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字        一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字        一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字        一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字        一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字一段测试文字    </div>  
  
<script>  
    var div = document.querySelector('div');  
    div.onclick = function () {  
        if (div.className === 'dark') {  
            div.className = 'light';  
        } else {  
            div.className = 'dark';  
        }  
    }  
  
</script>  
  
  
</body>  
</html>

在这里插入图片描述

（4）操作节点

A：新增节点

第一步：首先使用createElement方法来创建一个元素
第二步：再使用append将节点插入到dom树中

var newElement = ducument.createElement(tagNmae[, options]);
oldElement.append(new Element)

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <div class="parent">  
        <div>11</div>  
        <div>22</div>  
        <div>33</div>  
    </div>  
  
<script>  
    var div =document.querySelector('.parent');  
    // 创建一个div  
    childDiv = document.createElement('div');  
    childDiv.innerHTML = '44';  
    div.append(childDiv);  
</script>  
  
  
</body>  
</html>

在这里插入图片描述

B：删除节点

使用removeChild就以删除特定节点

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <div class="parent">  
        <div>11</div>  
        <div>22</div>  
        <div class="toDelete">33</div>  
    </div>  
  
<script>  
    var div =document.querySelector('.parent');  
    var toDelete = document.querySelector('.toDelete');  
    div.removeChild(toDelete)  
</script>  
  
  
</body>  
</html>

在这里插入图片描述

三：Js小案例

（1）猜数字

使用JavaSCript完成猜数字

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>guessNumber</title>  
</head>  
  
<body>  
  <span style="font-size: 20px"><b>请输入你猜测的数字</b></span>：<input type="text">  
  <div>  
      已经猜测的次数：<span id="guessCount">0</span>次  
  </div>  
  <div>  
      结果是：<span id="result"></span>  
  </div>  
  
  <button>猜一猜</button>  
  
  <script>  
      // 获取元素  
      var input = document.querySelector('input');  
      var button = document.querySelector('button');  
      var guessCount = document.querySelector('#guessCount');  
      var result = document.querySelector('#result');  
  
      // 在页面加载的时候生成1-100之间的随机整数  
      var toGuess = parseInt(Math.random() * 100);  
      console.log(toGuess);  
  
      // 为button按钮添加点击事件  
      button.onclick = function(){  
          // 首先获取用户的输入  
          var value = parseInt(input.value);  
          // 进行比较  
          if (value < toGuess) {  
              result.innerHTML = '小了';  
          } else if (value > toGuess) {  
              result.innerHTML = '大了';  
          } else {  
              result.innerHTML = '猜对了';  
          }  
  
          // 次数+1  
          var guessCountValue = parseInt(guessCount.innerHTML);  
          guessCount.innerHTML = guessCountValue + 1;  
      }  
  
  </script>  
  
</body>  
</html>

在这里插入图片描述

（2）表白墙

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

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

相关文章

LeetCode 刷题系列 -- 108. 将有序数组转换为二叉搜索树

LeetCode 刷题系列 -- 108. 将有序数组转换为二叉搜索树

给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 高度平衡 二叉搜索树。高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树。示例 1&#xff1a;输入&#xff1a;nums [-10,-3,0,5,9]输出&a…
阅读更多...
粒子群优化(PSO)算法例题实现

粒子群优化(PSO)算法例题实现

目录 一、实验要求 二、算法流程 三、案例实现及结果 完整程序&#xff1a; 一、实验要求 二、算法流程 粒子群算法流程&#xff1a; 1、初始化&#xff1a;初始化粒子群&#xff1b;给每个粒子赋予初始位置和速度 2、计算适应值&#xff1a;根据适应度函数&#xff0c;计…
阅读更多...
新范式+新标准＝世界级产品｜StarRocks年度总结

新范式+新标准＝世界级产品｜StarRocks年度总结

岁序常易&#xff0c;华章日新。虎年即将落幕&#xff0c;雄关漫道&#xff0c;我们携手社区斗志昂扬&#xff0c;并肩虎跃雄关。兔年新岁将至&#xff0c;黎明破晓&#xff0c;我们协力社区蓄势待发&#xff0c;昂首共赴新程。值此送虎迎兔的新春佳节之际&#xff0c;感恩与St…
阅读更多...
电子技术——MOS放大器的DC偏置

电子技术——MOS放大器的DC偏置

电子技术——MOS放大器的DC偏置 正如前几节我们学习的&#xff0c;MOS放大器的小信号模型的参数取决于正确的DC偏置&#xff0c;这个步骤称为偏置设计。一个好的偏置设计要满足一个稳定的漏极DC电流 IDI_DID​ 和设置正确的 VDSV_{DS}VDS​ 保证MOS管在放大信号的时候处在饱和区…
阅读更多...
Qt StyleSheet介绍

Qt StyleSheet介绍

文章目录前言纠错技巧可以使用 , 号来同时指明多个同一类型控件的样式表qss注释前言 本文主要以这篇博客为基础。添加一些自己使用的心得和使用样式表的一些技巧 纠错 ID选择器这里类型选择器可以省略&#xff0c;因为每个控件的objectName是不一样的&#xff0c;所以无需指定…
阅读更多...
高性能消息队列中间件MQ

高性能消息队列中间件MQ

毕业后工作半年&#xff0c;在自己的讲课中需要介绍消息队列&#xff0c;以前在大学也有经常接触message queen&#xff0c;但却还不够深入了解掌握&#xff0c;这次写个专门针对mq的文章理清头绪。 以下是学习mq的知识框架&#xff0c;我会不定时更新补充 RabbitMQ概念_MQ 消…
阅读更多...
TwinCAT3串口通讯EL6021模块使用-和串口调试助手自由协议通讯

TwinCAT3串口通讯EL6021模块使用-和串口调试助手自由协议通讯

目录 一、简介 二、环境介绍 三、接线连接 四、创建TwinCAT3程序工程 1、IO扫描和参数设置 2、创建PLC程序 &#xff08;1&#xff09;库文件添加 &#xff08;2&#xff09;创建任务和程序 &#xff08;3&#xff09;变量关联 &#xff08;4&#xff09;重新激活工程、运…
阅读更多...
adb的一些基本操作

adb的一些基本操作

adb的一些基本操作 Android使用的系统一般是debian系列操作系统&#xff0c;所以使用adb shell连接到手机后&#xff0c;可以使用大部分Debian系列的命令进行相关的操作 列出所有应用&#xff1a;adb shell pm list packages 列出第三方(系统)应用&#xff1a;adb shell pm li…
阅读更多...
1611_PC汇编语言_math例程分析

1611_PC汇编语言_math例程分析

全部学习汇总&#xff1a; GreyZhang/g_unix: some basic learning about unix operating system. (github.com) 这一次分析后带有注释的代码我会在笔记最后做一个完整的附加。 这一个例程&#xff0c;主要是为了阐述前面讲到的数学运算。但是从这些操作中&#xff0c;很多底层…
阅读更多...
介绍golang限流库以及漏桶与令牌桶的实现原理

介绍golang限流库以及漏桶与令牌桶的实现原理

RateLimit 限流中间件 前言 为什么需要限流中间件&#xff1f; 在大数据量高并发访问时&#xff0c;经常会出现服务或接口面对大量的请求而导致数据库崩溃的情况&#xff0c;甚至引发连锁反映导致整个系统崩溃。或者有人恶意攻击网站&#xff0c;大量的无用请求出现会导致缓…
阅读更多...
Spark JDBC采用分区读取数据库时partitionColumn, lowerBound, upperBound, numPartitions参数理解

Spark JDBC采用分区读取数据库时partitionColumn, lowerBound, upperBound, numPartitions参数理解

partitionColumn是应该用于确定分区的列。 lowerBound并upperBound确定要获取的值的范围。完整数据集将使用与以下查询对应的行&#xff1a; SELECT * FROM table WHERE partitionColumn BETWEEN lowerBound AND upperBound numPartitions确定要创建的分区数。lowerBound和之间…
阅读更多...
Unicode 和 UTF-8 详解

Unicode 和 UTF-8 详解

结论 Unicode 是 字符集 UTF-8 是 编码规则 字符集&#xff1a;为每一个字符分配唯一的ID&#xff08;如 SCII 码&#xff09; 编码规则&#xff1a;将 码位转换为字节序列的规则 背景 老规矩&#xff0c;我们用图文并茂的方式来讲解&#xff1a; ASCII 这个字符集 由于仅能…
阅读更多...
[Android Studio] Android Studio设置杂项

[Android Studio] Android Studio设置杂项

&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea; Android Debug&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea; Topic 发布安卓学习过程中遇到问题解决过程&#xff0c;希望我的解决方案可以对小伙伴们有帮助。 &#x1f4cb;笔记目…
阅读更多...
【HBase高级】3. HBase批量装载——Bulk load（1）Bulk load简介与案例介绍

【HBase高级】3. HBase批量装载——Bulk load（1）Bulk load简介与案例介绍

2. HBase批量装载——Bulk load 2.1 简介 很多时候&#xff0c;我们需要将外部的数据导入到HBase集群中&#xff0c;例如&#xff1a;将一些历史的数据导入到HBase做备份。我们之前已经学习了HBase的Java API&#xff0c;通过put方式可以将数据写入到HBase中&#xff0c;我们…
阅读更多...
MyBatis（三）使用MyBatis完成CRUD（增删改查）

MyBatis（三）使用MyBatis完成CRUD（增删改查）

准备工作 1、创建module&#xff08;Maven的普通Java模块&#xff09;&#xff1a;mybatis-002-crud 2、pom.xml 打包方式jar依赖&#xff1a;mybatis依赖mysql驱动依赖junit依赖logback依赖3、mybatis-config.xml放在类的根路径下 4、CarMapper.xml放在类的根路径下 5、lo…
阅读更多...
redis的完整学习

redis的完整学习

Redis 1.Nosql 单机mysql缓存机制分库分表水平拆分mysql集群&#xff1a;本质上是数据库的读写 MyISAM:表锁&#xff0c;效率低Innodb&#xff1a;行锁 特点 解耦&#xff01; 1.方便扩展 2.大数据量高性能 3.数据类型是多样型的&#xff08;不需要设计数据库&#xff…
阅读更多...
c语言 预处理

c语言 预处理

int main() {//printf("%s\n", __FILE__);//打印所在文件夹位置//printf("%d\n", __LINE__);//打印当前所在行号//printf("%s\n", __DATE__);//打印当前系统日期//printf("%s\n", __TIME__);//时间//printf("%s\n", __FUNCT…
阅读更多...
分享155个ASP源码，总有一款适合您

分享155个ASP源码，总有一款适合您

ASP源码 分享155个ASP源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c; 154个ASP源码下载链接&#xff1a;https://pan.baidu.com/s/12oYeESSXJCd32n463LBt4w?pwd5i1n 提取码&#x…
阅读更多...
Java线程池中的execute和submit

Java线程池中的execute和submit

一、概述 execute和submit都是线程池中执行任务的方法。 execute是Executor接口中的方法 public interface Executor {void execute(Runnable command); }submit是ExecuteService接口中的方法。 public interface ExecutorService extends Executor {<T> Future<T…
阅读更多...
vue+element模仿腾讯视频电影网站（二），增加视频播放详情页

vue+element模仿腾讯视频电影网站（二），增加视频播放详情页

一.前言 1. 本项目在线预览&#xff1a;点击访问 2. 作者其他博客成品汇总预览&#xff1a;点击访问 3. 接上一篇&#xff1a;《vueelement模仿腾讯视频电影网站》 暂时源码并没有提供其他获取渠道&#xff0c;私聊作者获取即可&#xff0c;或通过博客后面名片添加作者&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023