【Java 进阶篇】JavaScript DOM 编程:理解文档对象模型

在这里插入图片描述

在 web 开发中,DOM(文档对象模型)是一个重要的概念。DOM 是一种将网页文档表示为树状结构的方式,允许开发者使用 JavaScript 来访问和操作网页的内容。本篇博客将详细介绍 DOM,包括什么是 DOM、如何访问 DOM 元素、如何操作 DOM、DOM 事件等。无论你是刚刚入门 web 开发还是希望深入了解 DOM,这篇博客都将对你有所帮助。

什么是 DOM?

DOM 是 Document Object Model(文档对象模型)的缩写。它是一种编程接口,允许开发者使用脚本语言(通常是 JavaScript)来访问和修改网页的内容。DOM 将网页表示为一个树状结构,每个部分都是一个对象,这些对象可以被脚本语言访问和操纵。

DOM 的树状结构如下所示:

请添加图片描述

  • 文档(Document)是整个网页的根节点。
  • 元素(Element)是文档中的标签,如 <div><p><a>
  • 属性(Attribute)是元素的特性,如 idclass
  • 文本(Text)是元素中的文本内容。

如何访问 DOM 元素?

要访问 DOM 元素,你需要使用 JavaScript。下面是一些基本的方法来获取 DOM 元素:

1. 通过 ID 获取元素

var element = document.getElementById("myElement");

上面的代码会获取具有 id 属性为 “myElement” 的元素。

2. 通过标签名获取元素

var elements = document.getElementsByTagName("p");

上面的代码将获取所有 <p> 元素。

3. 通过类名获取元素

var elements = document.getElementsByClassName("myClass");

上面的代码将获取所有 class 属性为 “myClass” 的元素。

4. 通过选择器获取元素

var element = document.querySelector("#myElement");

上面的代码将获取具有 id 属性为 “myElement” 的元素。querySelector 还支持更复杂的选择器。

5. 通过父元素获取子元素

var parentElement = document.getElementById("parent");
var childElement = parentElement.querySelector(".child");

上面的代码首先获取具有 id 属性为 “parent” 的元素,然后从该元素中获取具有 class 属性为 “child” 的子元素。

如何操作 DOM?

一旦你获取了 DOM 元素,你就可以对其进行各种操作。以下是一些常见的 DOM 操作:

1. 改变元素的文本内容

var element = document.getElementById("myElement");
element.innerHTML = "新的文本内容";

上面的代码将改变 id 为 “myElement” 的元素的文本内容。

2. 改变元素的样式

var element = document.getElementById("myElement");
element.style.color = "red";

上面的代码将改变 id 为 “myElement” 的元素的文本颜色为红色。

3. 添加和移除 CSS 类

var element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");

上面的代码将为 id 为 “myElement” 的元素添加一个新的 CSS 类,并移除一个旧的 CSS 类。

4. 创建新元素

var newElement = document.createElement("div");
newElement.innerHTML = "新的元素";

上面的代码将创建一个新的 <div> 元素,并设置其文本内容。

5. 添加和移除子元素

var parentElement = document.getElementById("parent");
var childElement = document.createElement("div");
parentElement.appendChild(childElement); // 添加子元素
parentElement.removeChild(childElement); //移除子元素

上面的代码首先获取具有 id 属性为 “parent” 的元素,然后创建一个新的 <div> 元素,并将其作为子元素添加到 “parent” 元素中。随后,使用 removeChild 方法将子元素移除。

6. 修改元素的属性

var element = document.getElementById("myElement");
element.setAttribute("title", "新的标题");

上面的代码将改变 id 为 “myElement” 的元素的 title 属性。

7. 获取元素的属性值

var element = document.getElementById("myElement");
var title = element.getAttribute("title");

上面的代码将获取 id 为 “myElement” 的元素的 title 属性值。

8. 添加事件监听器

var button = document.getElementById("myButton");
button.addEventListener("click", function() {alert("按钮被点击了!");
});

上面的代码将为 id 为 “myButton” 的按钮元素添加一个点击事件监听器,当按钮被点击时,将弹出一个提示框。

DOM 事件

DOM 事件是 web 开发中的一个关键概念,允许开发者对用户与网页的交互作出响应。以下是一些常见的 DOM 事件:

1. click 事件

click 事件在元素被点击时触发。你可以为按钮、链接或其他元素添加 click 事件监听器,以便在用户点击时执行相应的操作。

var button = document.getElementById("myButton");
button.addEventListener("click", function() {alert("按钮被点击了!");
});

2. mouseover 和 mouseout 事件

mouseover 事件在鼠标指针移入元素时触发,而 mouseout 事件在鼠标指针移出元素时触发。这些事件可用于创建悬停效果。

var element = document.getElementById("myElement");
element.addEventListener("mouseover", function() {element.style.backgroundColor = "yellow";
});element.addEventListener("mouseout", function() {element.style.backgroundColor = "white";
});

上面的代码将在鼠标指针移入元素时将元素的背景颜色更改为黄色,而在鼠标指针移出元素时将其还原为白色。

3. keydown 事件

keydown 事件在用户按下键盘上的键时触发。你可以使用这个事件来捕获用户的按键操作,例如输入文本或控制游戏。

document.addEventListener("keydown", function(event) {if (event.key === "Enter") {alert("Enter 键被按下了!");}
});

上面的代码将在用户按下 Enter 键时触发一个提示框。

4. submit 事件

submit 事件在表单提交时触发。你可以使用这个事件来验证用户输入或执行其他操作,然后阻止表单提交或继续提交。

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {if (!validateForm()) {event.preventDefault(); // 阻止表单提交}
});

上面的代码将在表单提交时调用 validateForm 函数来验证用户的输入,如果验证失败,则阻止表单提交。

总结

DOM 是 web 开发中的一个关键概念,它允许开发者使用 JavaScript 来访问和操作网页的内容。通过获取元素、改变文本内容、操作样式、添加事件监听器和处理事件,你可以创建交互性丰富的网页。在深入学习 web 开发时,掌握 DOM 操作是必不可少的一部分。

希望本篇博客能够帮助你更好地理解 DOM,以及如何使用 JavaScript 进行 DOM 编程。

作者信息

作者 : 繁依Fanyi
CSDN: https://techfanyi.blog.csdn.net
掘金:https://juejin.cn/user/4154386571867191

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

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

相关文章

Raven2靶机渗透

文章目录 主机扫描web渗透 主机扫描 先ip a查看一下kali虚拟机本机ip&#xff0c;然后用nmap -sn扫描同网段的ip&#xff1a; nmap -sn 192.168.101.0/24如图&#xff0c;扫描到靶机IP为192.168.101.129&#xff1a; 扫描到靶机IP后探测开放的服务&#xff1a; nmap -A 19…

SpringBoot面试题1:什么是SpringBoot?为什么要用SpringBoot?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:什么是SpringBoot? Spring Boot 是一个用于快速开发独立的、基于 Spring 框架的应用程序的开源框架。它简化了 Spring 应用的配置和部署过程,使…

超低延时 TCP/UDP IP核

实现以太网协议集当中的ARP、ICMP、UDP以及TCP协议 一、概述 TCP_IP核是公司自主开发的使用FPGA逻辑搭建的用于10G以太网通信IP。该IP能够实现以太网协议集当中的ARP、ICMP、UDP以及TCP协议。支持连接10G/25G以太网PHY&#xff0c;组成高速网络通信系统。该IP上传、下传数据B…

fastjson 1.2.47 远程命令执行漏洞

fastjson 1.2.47 远程命令执行漏洞 文章目录 fastjson 1.2.47 远程命令执行漏洞1 在线漏洞解读:2 环境搭建3 影响版本&#xff1a;4 漏洞复现4.1 访问页面4.2 bp抓包&#xff0c;修改参数 5 使用插件检测漏洞【FastjsonScan】5.1使用説明5.2 使用方法5.2.1 右键菜单中&#xff…

算法通关村第一关-链表青铜挑战笔记

欢迎来到 : 第一关青铜关 java如何创建链表链表怎么增删改查 我们先了解链表 单链表的概念 我们从简单的创建和增删改查开始. 链表的概念 线性表分为顺序表(数组组成)和链表(节点组成) . 链表又分: 单向 双向有哨兵节点 无哨兵节点循环 不循环 链表是一种物理存储单…

一文了解 Go fmt 标准库的常用占位符及其简单使用

今天分享的内容是 Go fmt 标准库的常用占位符及其简单使用。如果本文对你有帮助&#xff0c;不妨点个赞&#xff0c;如果你是 Go 语言初学者&#xff0c;不妨点个关注&#xff0c;一起成长一起进步&#xff0c;如果本文有错误的地方&#xff0c;欢迎指出 占位符 通过占位符&a…

【LeetCode热题100】--121.买卖股票的最佳时机

121.买卖股票的最佳时机 class Solution {public int maxProfit(int[] prices) {int minprice Integer.MAX_VALUE;int maxprofit 0;for(int i 0;i<prices.length;i){if(prices[i] < minprice){minprice prices[i]; //找到最小值}else if(prices[i] - minprice > ma…

Unity 3D基础——缓动效果

1.在场景中新建两个 Cube 立方体&#xff0c;在 Scene 视图中将两个 Cude的位置错开。 2.新建 C# 脚本 MoveToTarget.cs&#xff08;写完记得保存&#xff09; using System.Collections; using System.Collections.Generic; using UnityEngine;public class MoveToTarget : M…

[补题记录] Atcoder Beginner Contest 294(E)

URL&#xff1a;https://atcoder.jp/contests/abc294 目录 E Problem/题意 Thought/思路 Code/代码 E Problem/题意 我们将其当作一个铺路的过程。 给总长度 L&#xff0c;计划 1 有 N 步&#xff0c;计划 2 有 M 步&#xff0c;每一步给出&#xff08;v&#xff0c;l&a…

stm32备份

存储器的分类&#xff1a; 存储器首先根据断电后存储的数据是否会丢失&#xff0c;可以分为易失存储器和非易失存储器&#xff0c;易失存储器主要应用于内存&#xff0c;非易失存储器主要用于外存。 易失存储器以RAM随机存储器为代表&#xff0c;随机的含义是存储器中的数据读取…

ARM 10.12

设置按键中断&#xff0c;按键1按下&#xff0c;LED亮&#xff0c;再按一次&#xff0c;灭 按键2按下&#xff0c;蜂鸣器响。再按一次&#xff0c;不响 按键3按下&#xff0c;风扇转&#xff0c;再按一次&#xff0c;风扇停 src/key.c #include"key.h"//按键3的配…

283 移动零

解题思路&#xff1a; \qquad 适用双指针&#xff0c;l&#xff1a;最左边‘0’元素坐标&#xff1b;r&#xff1a;l右边第一个非零元素坐标。 \qquad 最初的思路&#xff1a;将l和r初始化为0&#xff0c;遍历数组nums若任意一个指针到达数组末尾时停止。若当前nums[l] 0则移…

系统文件IO、文件描述符fd、重定向、文件系统、动态库和静态库

目录 C文件接口系统文件I/O系统调用和库函数文件描述符0 & 1 & 2FILE和fd的关系文件描述符的分配规则 重定向重定向的本质输出重定向输入重定向追加重定向 dup2函数 FILE理解文件系统了解磁盘的物理结构逻辑抽象文件系统文件系统的图解和解析通过文件系统来理解ls -al通…

1、验证1101序列(Moore)

题目要求&#xff1a; 用Moore型状态机验证1101序列。 题目描述&#xff1a; 用使用状态机验证1101序列&#xff0c;注意&#xff1a;允许重复子序列。如图 端口描述&#xff1a; module moore_1101(input clk,//时钟信号input clr,//reset复位信号&#xff0c;高电平有效in…

微信小程序备案流程操作详解

1、2023年9月1号小程序开始必须备案了,各位小程序商城只需要按流程自主去微信小程序后台操作即可; 2、对未上架的微信小程序,从2023年9月1号开始需先备案才能上架; 3、对存量已上架的小程序,需在2024年3月31号前完成备案即可。逾期未完成备案,平台将按照备案相关规定于…

hadoop组成

在hadoop1.x时代,Hadoop中的MapReduce同时处理业务逻辑运算和资源调度,耦合性较大; 在hadoop2.x时代,新增了yarn,主要负责资源的调度,MapReduce仅负责运算; 在hadoop3.x时代,在组成上没有变化;

ARM汇编学习录 2 - 编码分析

本文记录笔者学习对应汇编指令相关编码知识 ARM32 首先阅读基础概念&#xff1a; ARM-instruction-set-encoding A32指令全部是32位且是4字节地址对齐. 位域如下 如何理解4字节地址对齐和指令长度&#xff1f; 0000139c <_start_main>:139c: e92d4800 …

【Docker】Harbor私有仓库与管理

搭建本地私有仓库 #首先下载 registry 镜像 docker pull registry#在 daemon.json 文件中添加私有镜像仓库地址 vim /etc/docker/daemon.json {"insecure-registries": ["192.168.220.101:5000"], #添加&#xff0c;注意用逗号结尾"registry-mi…

网络基础2(1)

HTTP 1.应用层协议2.send和recv单独使用不安全3.URL4.urlencode和urldecode5.HTTP协议格式6.HTTP中的常见请求方法POST&&GET7.HTTP的状态码8.HTTP常见Header &#x1f31f;&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f;&#x1f31f; &#x1f6…

Git Commit Message规范

概述 Git commit message规范是一种良好的实践&#xff0c;可以帮助开发团队更好地理解和维护代码库的历史记录。它可以提高代码质量、可读性和可维护性。下面是一种常见的Git commit message规范&#xff0c;通常被称为"Conventional Commits"规范&#xff1a; 一…