一篇文档教会你从JavaScript语法走进DOM，让你的网页动起来

目录

JavaScript与WebAPI

WebAPI简介

DOM

获取元素

事件

事件三要素

常见的事件类型

获取+修改元素属性

基本介绍和使用

案例1：实现文本框内数字计数

案例2：实现“全部选中”按钮触发时相应的效果（worth trying for a freshman）

获取+修改元素样式

基本介绍与使用

节点与其操作

创建节点

插入节点

删除节点

JavaScript与WebAPI

WebAPI简介

JavaScript分为三个部分：

  1. JavaScript基础语法（ECMAScript）
  2. DOM API：操作页面结构
  3. BOM API：操作浏览器

WebAPI就包括了DOM和BOM

API：所谓API就是已经实现的函数或者接口，专门提供给需要使用的调用

WebAPI参考文档：Web API | MDN (mozilla.org)

本篇文章主要讲述DOM

DOM

DOM 全称为 Document Object Model

W3C 标准给我们提供了一系列的函数, 让我们可以操作:

  1. 网页内容
  2. 网页结构
  3. 网页样式

DOM树：一个页面的结构是一个树形结构，称为 DOM 树

文档：一个页面就是一个文档，使用document表示

元素：页面中所有的标签都称为元素，使用element表示

节点：网页中所有的内容都可以称为节点(标签节点，注释节点，文本节点，属性节点等)，使用 node表示

获取元素

在DOM操作中，有两种常用的获取页面元素的函数，分别是

  1. querySelector：默认情况下选中页面中第一次出现的匹配的指定元素，第一个参数可以为HTML元素、类名或者id名
  2. querySelectorAll：默认情况下选中页面中所有匹配的指定元素

例如下面的结构（只展示body内部的内容）：

<div class="box1">box1</div>
<div class="box2">box2</div>
<h1><span><input type="text"></span>
</h1>

如果需要选中类名为box1的div，就需要调用两个函数中的一个函数，因为只需要选择其中一个类名为box1的div，所以可以考虑使用querySelector函数，但是querySelector都是对象函数，所以需要使用一个对象来调用，前面提到一个页面就是一个文档，使用document表示，所以使用document来调用querySelector函数。此时页面中有类名为box1和box2的两个div，所以此时不可以在querySelector中使用div，而应该使用其类名（当前为box1）或者id（当前没有），代码如下：

document.querySelector(".box1");// 打印该函数返回的内容
console.log(document.querySelector(".box1"));输出结果：
<div class="box1">box1</div>

querySelector函数还可以选择嵌套的元素，例如对于一级标题元素中嵌套的文本框标签，可以通过下面的方式选择：

document.querySelector("h1").querySelector("span").querySelector("input")// 打印该函数返回的内容
console.log(document.querySelector("h1").querySelector("span").querySelector("input"));输出结果：
<input type="text">

如果需要选择页面中所有的div，则需要使用querySelectorAll，此时不要使用使用querySelector，因为该函数找到第一个满足条件的元素就停止继续查找，代码如下：

document.querySelectorAll("div")// 打印输出结果
console.log(document.querySelectorAll("div"));

事件

在浏览页面时，用户所做出的操作被称为一个事件，该事件一般包括：点击、按下等

事件三要素

事件三要素分为：

  1. 事件源：触发事件的元素（可以理解为事件元）
  2. 事件类型：如何触发该事件：点击、按下等
  3. 事件处理程序：触发事件后，该如何处理该事件，一般为一个回调函数

常见的事件类型

常见的事件类型有：

  1. 鼠标点击（可以使用onclick属性）
  2. 键盘键按下（可以使用onkeydown属性或者onkeypress属性）
  3. 键盘键抬起（可以使用onkeyup属性）

例如，实现一个鼠标点击按钮后弹出窗口显示内容的效果，可以写为下面的形式：

<button>点击</button>

点击后对应执行的行为如下：

// 获取到页面中的元素（找到事件源）
let btn = document.querySelector("button");
// 确定事件类型并给出后续处理
btn.onclick = function () {alert("Hello World!");
}

如果是对于键盘事件来说，则考虑下面的几种事件例子：

  1. 键盘按下时在控制台中打印内容

使用结构如下：

<input type="text">

对应的行为如下：

let input = document.querySelector("input");
input.onkeydown = function () {console.log("按下了键盘");
}
  1. 如果想实现读取到按下的键，可以使用event对象作为函数参数，该对象中存储了事件的相关属性
// 获取事件源
let input = document.querySelector("input");
input.onkeydown = function (event) {let key = event.key; // 获取按键console.log(key);
}
  1. 当按键抬起时弹窗也是同样的思路
// 获取事件源
let input = document.querySelector("input");
input.onkeyup = function () {alert("按键抬起");
}

获取+修改元素属性

基本介绍和使用

当用户也页面交互时，有时需要对不同的操作显示不同的结果，这其中包括对网页已有元素属性的修改，下面以修改input元素中的部分属性为例

首先，先查看input元素有哪些属性，可以使用console.dir()打印对应元素的属性，代码如下：

console.dir(document.querySelector("input"));

在浏览器调试工具控制台中可以看到input标签的所有可用属性，下面是部分属性截图：

想要修改元素属性，就需要在JavaScript代码中指定修改的属性，例如实现默认情况下input的type属性是button，当点击按钮时，修改input的type属性为text，并将默认的value值修改为text属性清空，添加占位内容

结构代码如下：

<input type="button" onclick="change()" value="点击我输入文字">

行为代码如下：

// 获取事件源
let input_element = document.querySelector("input");
// 触发事件时改变元素属性
function change() {input_element.type = "text";input_element.value = "";input_element.placeholder = "请输入文字";
}

案例1：实现文本框内数字计数

案例介绍：有一个文本框，文本框的右侧有两个按钮，分别代表+和-，当鼠标按下+时，文本框内的数字增加对应增量，当鼠标按下-时，文本框内数字减少对应增量。这里提供增量为1

结构设计：

<input class="num" type="text" value="0">
<input class="increase" type="button" value="+1">
<input class="decrease" type="text" value="-1">

行为设计：

// 获取事件源
let num = document.querySelector(".num");
// 增加
let increase = document.querySelector(".increase");
increase.onclick = function () {num.value = parseInt(num.value) + 1;
}// 减少
let decrease = document.querySelector(".decrease");
decrease.onclick = function () {num.value = parseInt(num.value) - 1;
}

案例2：实现“全部选中”按钮触发时相应的效果（worth trying for a freshman）

案例介绍：本案例中一共有5个复选框，1个内容为「全部选中」（下面称为父复选框），四个内容为「选项」（下面称为子复选框）

  1. 如果父复选框选中，子复选框全部被选中
  2. 如果有其中一个子复选框未被选中，则父复选框更改为未被选中
  3. 如果四个子复选框额外全部选中，则父复选框自动选中

结构如下：

<form><input class="all" type="checkbox" name="choose">全部选中 <br><input class="select" type="checkbox" name="choose">选项1 <br><input class="select" type="checkbox" name="choose">选项2 <br><input class="select" type="checkbox" name="choose">选项3 <br><input class="select" type="checkbox" name="choose">选项4 <br>
</form>

行为代码如下：

// 当父复选框选中时，子复选框全部选中，否则全部不选中
let parent = document.querySelector(".all");
let children = document.querySelectorAll(".select");
parent.onclick = function () {for (let i = 0; i < children.length; i++) {children[i].checked = parent.checked;}
}// 当子复选框有一个取消，父复选框取消，如果子复选框全部选中，父复选框选中
for (let i = 0; i < children.length; i++)
{// 当子复选框有一个取消，父复选框取消children[i].onclick = function () {parent.checked = isCheck(children);}
}// 判断子复选框是否全部选中
function isCheck() {for (let i = 0; i < children.length; i++) {// 如果有一个子复选框未选中，返回falseif (!children[i].checked) {return false;}}// 如果子复选框全部选中，返回truereturn true;
}

获取+修改元素样式

基本介绍与使用

前面获取到了元素的属性，接下来就是获取元素的样式，方式与前面基本一致，只是需要使用到下面的格式：

// 行内样式
element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];// 内部样式
element.className = [CSS 类名];

假设需要对一个一级标题的文字进行修改（当鼠标点击时改变颜色为红色，字体变大），则可以写为：

行内结构代码如下：

<h1 style="color: aquamarine;">这是一级标题</h1>

对应行为代码如下：

let header = document.querySelector("h1");
header.onclick = function () {header.style.color = "red";header.style.fontSize = "50px";// 也等价于// header.style.cssText = "color:red; font-size:50px";
}

内部结构和样式如下：

<style>.normal {color: aquamarine;}.change {color: red;font-size: 50px;}
</style>
<h1 class="normal">这是一级标题</h1>

对应行为代码如下：

let header = document.querySelector(".normal");
header.onclick = function () { header.className = "change"
}

节点与其操作

在网页中，节点就是一个一个的HTML元素、文字、注释等实际存在于网页中的内容

创建节点

在WebAPI中，可以使用createElement()函数创建节点，使用一个变量接收创建的节点，基本格式如下：

let 变量 = document.createElement("可作为节点的内容");

例如为网页创建一个一级标题标签

let new_node = document.createElement("h1");

插入节点

前面创建了节点，但是节点并没有插入到网页中，所以网页body标签内也不存在插入的节点中的内容

一共有两种方式将节点插入到网页的DOM树中（body标签中）

  1. 使用appendChild()函数：该函数由目标元素调用，参数为插入的节点。这个函数会将节点默认插入到目标元素中最后一个子节点的后方，例如下面的代码：

结构代码如下：

<div><p>1</p><p>2</p><p>3/p><p>4</p>
</div>

行为代码如下：

为了保证在插入的h1标签中有文字，可以使用innerHTML插入文字给h1标签

let new_node = document.createElement("h1");
// 找到目标节点
let parent = document.querySelector("div");
new_node.innerHTML = "Hello World";
// 插入节点
parent.appendChild(new_node);
  1. 使用insertBefore()函数调用：该函数可以指定节点的插入位置，但是该方法的调用必须为父元素调用，插入到任意子元素前方，第一个参数为新增节点，第二个参数为指定的子元素（可以使用类名指定，也可以使用其他方式指定例如firstChild等），例如下面的代码：

结构代码如下：

<div><p class="p1">1</p><p class="p2">2</p><p class="p3">3</p><p class="p4">4</p>
</div>

行为代码如下：

let new_node = document.createElement("h1");
// 找到目标节点
let parent = document.querySelector("div");
new_node.innerHTML = "Hello World";
// 插入节点
parent.insertBefore(new_node, document.querySelector(".p3"));

需要注意：

  1. 如果第二个参数为不存在的元素或者是null则新节点将被插入到子节点的末尾
  2. 如果针对一个节点插入两次，则只有最后一次生效
  3. 一旦一个节点插入完毕，再针对刚刚的节点对象进行修改，能够同步影响到 DOM 树中的内容

删除节点

使用removeChild()删除节点，该函数返回被删除的节点，调用对象必须是父元素，参数为待删除的子节点

例如删除前面插入的新节点

parent.removeChild(new_node);

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

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

相关文章

turbovnc 服务端、客户端安装

turbovnc 服务端、客户端安装

turbovnc 可以方便地远程登录带界面的linux系统&#xff0c;比如xbuntu、kali等&#xff1b;远程windows11系统&#xff0c;经过亲身测试体验&#xff0c;感觉还是不如windows自带的rdp服务&#xff08;mstsc命令连接&#xff09;好用。 一、安装客户端 下载最新版本的客户端…
阅读更多...
力扣面试经典算法150题：接雨水

力扣面试经典算法150题：接雨水

接雨水 今天的题目是力扣面试经典算法150题中的困难难度数组题目&#xff1a;分发糖果。 题目链接&#xff1a;https://leetcode.cn/problems/trapping-rain-water/description/?envTypestudy-plan-v2&envIdtop-interview-150 题目描述 给定 n 个非负整数表示每个宽度为…
阅读更多...
0904作业+思维导图

0904作业+思维导图

一、作业 &#xff08;将昨天的作业修改为标准模板类的&#xff09; 1、代码 #include <iostream> #include <stack> using namespace std; //队列模板类 template<typename T> class Queue { private:int max; //队列最大容量int num; //队列内…
阅读更多...
pikachu文件包含漏洞靶场通关攻略

pikachu文件包含漏洞靶场通关攻略

本地文件包含 首先&#xff0c;在靶场根目录下创建一个php文件&#xff0c;内容是phpinfo(); 其次&#xff0c;上传一个任意球星图片&#xff0c;会跳转到带有filename参数的php文件下 然后&#xff0c;将filename的参数改为可以访问到我们创建的php文件的地址 ../../../../…
阅读更多...
TCP协议多进程多线程并发服务器

TCP协议多进程多线程并发服务器

TCP多进程多线程并发服务器 1.多进程并发服务器 #include <myhead.h>#define SERPORT 6666 #define SERIP "192.168.0.136" #define BLACKLOG 10void hande(int a) {if(aSIGCHLD){while(waitpid(-1,NULL,WNOHANG)!-1);//回收僵尸进程} }int main(int argc, c…
阅读更多...
【Grafana】Prometheus结合Grafana打造智能监控可视化平台

【Grafana】Prometheus结合Grafana打造智能监控可视化平台

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
Oracle 客户端 PL/SQL Developer 15.0.4 安装与使用

Oracle 客户端 PL/SQL Developer 15.0.4 安装与使用

目录 官网下载与安装 切换中文与注册 连接Oracle数据库 tnsnames.ora 文件使用 Oracle 客户端 PL/SQL Developer 12.0.7 安装、数据导出、Oracle 执行/解释计划、for update。 官网下载与安装 1、官网&#xff1a;https://www.allroundautomations.com/products/pl-sql-d…
阅读更多...
Redis的配置和启动+Redis Insight连接

Redis的配置和启动+Redis Insight连接

一、安装 Redis的安装&#xff1a;从镜像站下载&#xff1a;索引 redis-local (huaweicloud.com)&#xff0c;然后将其传到Linux虚拟机中进行解压&#xff0c;解压之后需要下载gcc&#xff0c;因为Redis底层是用c写的&#xff0c;所以要编译一下生成redis文件&#xff0c;然后…
阅读更多...
vite项目配置本地开发使用https访问

vite项目配置本地开发使用https访问

在Vite项目中启用HTTPS以安全地使用navigator.mediaDevices.getUserMedia() 引言 在现代Web开发中&#xff0c;保护用户隐私和数据安全是至关重要的。特别是在涉及到媒体捕获功能&#xff0c;如使用用户的摄像头或麦克风时&#xff0c;Web应用需要遵循严格的安全准则。naviga…
阅读更多...
反向迭代器：reverse_iterator的实现

反向迭代器：reverse_iterator的实现

目录 前言 特点 注意事项 实现 构造函数 功能函数 在list与vector中的使用 vector list 前言 反向迭代器是一种在序列容器的末尾开始&#xff0c;并向前移动至序列开始处的迭代器。在C中&#xff0c;反向迭代器由标准库中的容器类提供&#xff0c;比如vector、list、d…
阅读更多...
Qt 字符串的编码方式，以及反斜杠加3个数字是什么编码\344\275\240，如何生成

Qt 字符串的编码方式，以及反斜杠加3个数字是什么编码\344\275\240，如何生成

Qt 字符串的编码方式 问题 总所周知&#xff0c;Qt的ui文件在编译时&#xff0c;会自动生成一个ui_xxxxx.h的头文件&#xff0c;打开一看&#xff0c;其实就是将摆放的控件new出来以及布局的代码。 只要用Qt提供的uic.exe工具&#xff0c;自己也可以将ui文件输出为代码文件…
阅读更多...
c# 笔记 winform添加右键菜单，获取文件大小 ，多条件排序OrderBy、ThenBy，list＜double＞截取前5个

c# 笔记 winform添加右键菜单，获取文件大小 ，多条件排序OrderBy、ThenBy，list＜double＞截取前5个

Winform右键菜单‌ 要在C# Winform应用程序中添加右键菜单&#xff0c;‌你可以按照以下步骤操作&#xff1a;‌ 1.‌创建菜单项‌ 在Form的构造函数或加载事件中&#xff0c;‌创建ContextMenuStrip控件的实例&#xff0c;‌并为其添加菜单项。‌ 2.‌绑定到控件‌ 将Con…
阅读更多...
c++ websocket简单讲解

c++ websocket简单讲解

只做简单讲解。 一.定义和原理 WebSocket 是从 HTML5 开始⽀持的⼀种⽹⻚端和服务端保持⻓连接的消息推送机制&#xff0c;传统的 web 程序都是属于 "⼀问⼀答" 的形式&#xff0c;即客⼾端给服务器发送了⼀个 HTTP 请求&#xff0c;服务器给客⼾端返回⼀个 HTTP 响…
阅读更多...
Java 入门指南：Java 并发编程 —— 并发容器 PriorityBlockingQueue

Java 入门指南：Java 并发编程 —— 并发容器 PriorityBlockingQueue

BlockingQueue BlockingQueue 是Java并发包&#xff08;java.util.concurrent&#xff09;中提供的一个阻塞队列接口&#xff0c;它继承自 Queue 接口。 BlockingQueue 中的元素采用 FIFO 的原则&#xff0c;支持多线程环境并发访问&#xff0c;提供了阻塞读取和写入的操作&a…
阅读更多...
视频汇聚平台LntonAIServer视频质量诊断功能--偏色检测与噪声检测

视频汇聚平台LntonAIServer视频质量诊断功能--偏色检测与噪声检测

随着视频监控技术的不断进步&#xff0c;视频质量成为了决定监控系统性能的关键因素之一。LntonAIServer新增的视频质量诊断功能&#xff0c;特别是偏色检测和噪声检测&#xff0c;进一步强化了视频监控系统的可靠性和实用性。下面我们将详细介绍这两项功能的技术细节、应用场景…
阅读更多...
【AI】Pytorch_损失函数优化器

【AI】Pytorch_损失函数优化器

建议点赞收藏关注&#xff01;持续更新至pytorch大部分内容更完。 本文已达到10w字&#xff0c;故按模块拆开&#xff0c;详见目录导航。 整体框架如下 数据及预处理 模型及其构建 损失函数及优化器 本节目录 损失函数创建损失函数 &#xff08;共18个&#xff09;nn.CrossEnt…
阅读更多...
【多场景应用】基于杰发科技AC7840x的Mini LED背光驱动设计

【多场景应用】基于杰发科技AC7840x的Mini LED背光驱动设计

应用场景&#xff1a; 在汽车应用中&#xff0c;Mini LED背光驱动设计主要用于仪表盘、中控屏和车载娱乐系统等显示屏。这项技术可以显著提升显示效果&#xff0c;提供更高的亮度、更深的黑色和更广的色域&#xff0c;使得图像更加生动逼真&#xff0c;尤其在强光和宽温度范围…
阅读更多...
Redis 篇-深入了解查询缓存与缓存所带来的问题（读写不一致、缓存穿透、缓存雪崩、缓存击穿）

Redis 篇-深入了解查询缓存与缓存所带来的问题（读写不一致、缓存穿透、缓存雪崩、缓存击穿）

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 本章目录 1.0 什么是缓存 2.0 项目中具体如何添加缓存 3.0 添加缓存后所带来的问题 3.1 读写不一致问题 3.1.1 缓存更新策略 3.1.2 具体实现缓存与数据库的双写一致 3.2 缓存穿…
阅读更多...
【日记】想见珍一面怎么就这么难（985 字）

【日记】想见珍一面怎么就这么难（985 字）

正文 想见珍一面怎么就这么难…… 事故频发。昨天说考试时间跟机票时间冲突了&#xff0c;最后结果出来了&#xff0c;改签了&#xff0c;并且差价不补。我不干&#xff0c;他们也不干。因为上级行给我们行长施压&#xff0c;于是我们行长给我施压。最后要到了国庆之前拔智齿的…
阅读更多...
华为 HCIP-Datacom H12-821 题库 (6)

华为 HCIP-Datacom H12-821 题库 (6)

有需要题库的可以看主页置顶 V群仅进行学习交流 1.转发表中 FLAG 字段中B 的含义是&#xff1f; A、可用路由 B、静态路由 C、黑洞路由 D、网关路由 答案&#xff1a;C 解析&#xff1a; 可用路由用U 表示&#xff0c;静态路由用 S 表示&#xff0c;黑洞路由用 B 表示&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023