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

JavaScript DOM和BOM

news 2026/2/8 8:10:34

目录

查找html元素

1.通过id

2.通过标签名

3.通过类名

DOM 

1.创建动态的HTML内容

 2.修改元素内容

3.改变HTML属性 

4.改变css样式

DOM事件 

DOM节点

1.添加HTML元素

2.删除HTML元素

浏览器对象

 1.Window对象

 2.Screen对象

3.History对象

 4.Location对象

5.Navigator对象

 

查找html元素

1.通过id

//根据id名称获取元素对象

var test = document.getElementsById("test");

//获取元素内容

var result = test.innerHTML;

2.通过标签名

//查找所有的段落元素<p>并获取第一个段落标签内部的文本内容

var p = document.getElementByTagName("p");

var result = p[0].innerHTML;

3.通过类名

document.getElementsByByClassName("类名"）；

DOM 

1.创建动态的HTML内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>创建动态的HTML内容</title></head><body><h3>JavaScript DOM动态创建内容</h3><script>var date = new Date();document.write("本段文字为动态生成。"+date.toLocaleString());</script></body>
</html>

 2.修改元素内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>修改元素内容</title></head><body><h3>修改元素内容</h3><p id="test">World</p><script>var p = document.getElementById("test");var msg = p.innerHTML;p.innerHTML = "<strong>Hello</strong>";alert("段落元素的初始内容是：\n"+msg);</script></body>
</html>

3.改变HTML属性 

var img = document.getElementById("image");

img.src = "image/1.jpg";

4.改变css样式

var p = document.getElementById("test");

p.style.backgroundColor = "blue";

DOM事件 

onabort图像加载过程被中断
onblur元素失去焦点
onchange域的内容被改变
onclick元素被鼠标左键单击
ondbclick元素被鼠标左键双击
onerror加载文档或图像时发送错误
onfocus元素获得焦点

onkeydown

键盘按键被按下
onkeypress键盘按键被按下并松开
onkeyup键盘按键被松开
onload页面或图像加载完成
onmousedown鼠标按键被按下
onmousemove鼠标被移动
onmouseout鼠标从当前元素上移走
onmouseover鼠标移动到当前元素上
onmouseup鼠标按键被松开
onreset重置按钮被单击
onresize窗口或框架的大小被更改

onselect

文本被选中
onsubmit提交按钮被单击
onunload退出页面

DOM节点

1.添加HTML元素

//创建新的元素

var box = document.createElement("div");

//设置新元素的背景颜色为黄色

box.style.backgroundColor="yellow";

//设置新元素的内容

box.innerHTML="这是动态添加的div元素。"；

//将新创建的元素添加id="container"的段落元素中

p.appendChild(box);

2.删除HTML元素

//获取父元素

var test = document.getElementById("test");

//获取子元素

var p = document.getElementById("p01");

//删除子元素

test.removeChild(p);

浏览器对象

 1.Window对象

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>Window对象</title>
</head>
<body><h3>Window对象</h3><script>var width = window.innerWidth;var height = window.innerHeight;document.write("浏览器当前可用宽度为："+width+"<br>浏览器可用高度为："+height);</script>
</body>
</html>

 2.Screen对象

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>Screen对象</title>
</head>
<body><h3>Screen对象</h3><script>var width = screen.availWidth;var height = screen.availHeight;document.write("屏幕当前可用宽度为："+width+"<br>屏幕可用高度为："+height);</script>
</body>
</html>

3.History对象

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>History对象</title>
</head>
<body><h3>History对象</h3><button onClick="history.back()">后退</button><button onClick="history.forward()">前进</button>
</body>
</html>

 4.Location对象

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>Location对象</title>
</head>
<body><h3>Location对象</h3><script>location.href = "http://www.baidu.com";</script>
</body>
</html>

 

5.Navigator对象

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>Navigator对象</title>
</head>
<body><h3>Navigator对象</h3><script>var mag = "浏览器代码名："+navigator.appCodeName;msg+="<br><br>浏览器名称："+navigator.appName;msg+="<br><br>浏览器版本："+navigator.appVersion;msg+="<br><br>浏览器是否允许使用："+navigator.cookieEnabled;msg+="<br><br>浏览器所在操作系统："+navigator.platform;msg+="<br><br>用户代理："+navigator.userAgent;msg+="<br><br>浏览器语言："+navigator.language;msg+="<br><br>浏览器品牌："+navigator.vendor;document.write(msg);</script>
</body>
</html>

相关文章：

JavaScript DOM和BOM

目录 查找html元素 1.通过id 2.通过标签名 3.通过类名 DOM 1.创建动态的HTML内容 2.修改元素内容 3.改变HTML属性 4.改变css样式 DOM事件 DOM节点 1.添加HTML元素 2.删除HTML元素 浏览器对象 1.Window对象 2.Screen对象 3.History对象 4.Location对象 5.Navi…...

编程日记 2023/2/26 19:58:11

JUC并发编程（二）

一、过时方法 一些不推荐使用的方法已经过时&#xff0c;容易破坏同步代码块&#xff0c;使对象的锁得不到释放&#xff0c;进而造成线程死锁 二、守护线程 默认情况下&#xff0c;Java 进程需要等待所有线程都运行结束&#xff0c;才会结束。有一种特殊的线程叫做守护线程…...

编程日记 2023/2/26 19:57:05

Python控制CANoe使能TestCase

前面介绍了多种CANoe配置下的dbc文件添加，常见的配置我们能够常用的就是testcase的使能和环境变量的设置，针对于环境变量的问题，我们下次再进行详聊，今天主要聊一下测试脚本的使能。在做这块之前，我们第一步就需要了解我们的测试脚本的层级是都包含有哪些？ 一、测试脚本结…...

编程日记 2023/2/26 19:55:56

sql的执行顺序

一.前言 在我们世家开发中,我们少不了和数据库打交道, 我们的持久层是与数据库打交道的, 少不了要用sql语句来请求数据库的数据, 前台(前端页面)请求到-->控制器(接口层)-->service(业务层)-->mapper或dao(持久层) 简图: 在持久层我们的sql是怎么执行的, 它的执行顺…...

编程日记 2023/2/26 19:54:50

java 8 中的实用技巧

1 判断2个对象是否相等Objects.equals(a, b)(1) 比较时&#xff0c; 若a 和 b 都是null, 则返回 true, 如果a 和 b 其中一个是null, 另一个不是null, 则返回false。注意&#xff1a;不会抛出空指针异常。(2) a 和 b 如果都是空值字符串&#xff1a;"", 则 a.equals(b…...

编程日记 2023/2/26 19:53:43

自学大数据的第一天

默认跳过基础部分,直接搞集群的部分,期间用到的linux基础默认大伙都会了(不会的话可以现用现查) Hadoop集群搭建 集群特点: 1,逻辑上分离~集群之间没有依赖,互不影响 2,某些进程往往部署在一台服务器上,但是属于不同的集群 3,MapReduce 是计算框架,代码层面的处理逻辑 集群的…...

编程日记 2023/2/26 19:52:36

redis秒杀

redis优惠券秒杀 为什么订单表订单ID不采用自增长&#xff1f; id规律性太明显&#xff0c;容易被用户猜测到&#xff08;比如第一天下订单id10&#xff0c;第二天下订单id100&#xff0c;在昨天的1天内只卖出90商品&#xff09;受单表数据量限制&#xff08;订单数据量大&am…...

编程日记 2023/2/26 19:51:25

JS学习第3天——Web APIs之DOM（什么是DOM，相关API【创建、增删改查、属性操作、事件操作API】）

目录一、Web APIs介绍1、API2、Web API二、DOM1、DOM树2、获取元素3、事件基础4、操作元素属性5、节点&#xff08;node&#xff09;操作三、DOM操作总结&#xff08;创建、增删改查、属性操作、事件操作API&#xff09;1、创建2、增3、删4、改5、查6、属性操作7、事件操作四、…...

编程日记 2023/2/26 19:50:17

【MySQL】增删改操作（基础篇）

目录 1、新增操作(Create) 1.1 单行数据 全列插入 1.2 多行数据 全列插入 1.3 单行数据 指定列插入 2、修改操作(Update) 3、删除操作(Delete) 1、新增操作(Create) 如何给一张表新增数据呢&#xff1f; 新增(Create)&#xff0c;在我们数据库中&#xff0c;用 ins…...

编程日记 2023/2/26 19:49:12

STM32—DMA

什么是DMA&#xff1f; DMA(Direct Memory Access&#xff0c;直接存储器访问) 提供在外设与内存、存储器和存储器、外设与外设之间的高速数据传输使用。它允许不同速度的硬件装置来沟通&#xff0c;而不需要依赖于CPU&#xff0c;在这个时间中&#xff0c;CPU对于内存的工作来…...

编程日记 2023/2/26 19:48:04

C语言刷题（3）——“C”

各位CSDN的uu们你们好呀&#xff0c;今天小雅兰的内容还是做几道题噢&#xff0c;好好复习一下之前的知识点&#xff0c;现在&#xff0c;就让我们开始复习吧 牛客网在线编程_编程学习|练习题_数据结构|系统设计题库 倒置字符串_牛客题霸_牛客网 BC40 竞选社长 BC41 你是天才…...

编程日记 2023/2/26 19:46:56

搭建Vue工程

搭建Vue工程 localhost 127.0.0.1 域名 IP 192.168.0.28 联网IP 最后都会渲染到一个页面里面&#xff0c;有多少个页面就有多少个页面模板。 vue里面改webpack配置 vue.config.js 配置参考 | Vue CLI /assets /api* 开发的时候用到的请求后台地址 和 项目真实部署上线的时候 请…...

编程日记 2023/2/26 19:45:46

C语言汉诺塔问题【图文详解】

汉诺塔1. 什么是汉诺塔2. 有关汉诺塔的有趣故事3. 利用动画来演示汉诺塔4. 如何用C语言实现汉诺塔1. 什么是汉诺塔 源于印度古老传说的益智玩具 汉诺塔&#xff08;Tower of Hanoi&#xff09;&#xff0c;又称河内塔&#xff0c;是一个源于印度古老传说的益智玩具。大梵天创造…...

编程日记 2023/2/26 19:44:38

1、RocketMQ概述

文章目录1 MQ概述1.1 MQ简介1.2 MQ用途1.3 常见MQ产品1.4 MQ常见协议2 RocketMQ概述2.1 RocketMQ简介2.2 RocketMQ发展历程尚硅谷RocketMQ教程-讲师&#xff1a;Reythor雷&#xff08;老雷&#xff09; 我们缺乏的不是知识&#xff0c;而是学而不厌的态度 1 MQ概述 1.1 MQ简介…...

编程日记 2023/2/26 19:43:30

【POJ 3352】Road Construction 题解（Tarjan算法求边双连通分量缩点）

描述 现在几乎是夏天&#xff0c;这意味着几乎是夏天的施工时间&#xff01;今年&#xff0c;负责偏远岛热带岛屿天堂道路的好心人希望修复和升级岛上各个旅游景点之间的各种道路。 道路本身也很有趣。由于岛上的奇怪风俗&#xff0c;道路的安排使得它们不会在交叉路口相遇&…...

编程日记 2023/2/26 19:42:20

Python—单分支结构

&#xff08;1&#xff09;if分支语句 Python中if语句的语法结构&#xff1a; if <条件表达式>&#xff1a;    满足条件运行的代码1    满足条件运行的代码2 代码示例&#xff1a; age 12 if age > 18:print(去上网)if 1 1 2 and :print(我满足条件了)if 1 …...

编程日记 2023/2/26 19:41:10

rabbitmq添加用户，虚拟机步，设置rabbitmq配置文件

第一步&#xff0c;登录后台控制页面 http://ip:15672第二步&#xff0c;添加用户和权限 重点&#xff1a;选择Admin和Users 第三步&#xff0c;添加虚拟机 点击侧边的Virtual Hosts 第四步将虚拟机和用户搭配 注意新建好后&#xff0c;在虚拟机列表中&#xff0c;点击虚拟机…...

编程日记 2023/2/26 19:40:01

Codeforces Round#853 div2 A-C

Codeforces Round#853 div2 A-C 等了很久终于迎来了一场cf比赛&#xff0c;白天出去玩了一圈&#xff0c;晚上回来打比赛&#xff0c;这次只出了A,B题。C题思路很巧妙&#xff0c;赛时没做出来&#xff0c;看了大佬学习到了&#xff0c;还是很不错。 A.Serval and Mocha’s A…...

编程日记 2023/2/26 19:38:52

软考之操作系统知识

目录 1.进程管理-进程的概念 2.进程的三态图和五态图 3.进程的同步与互斥 4.PV操作应用 5.死锁问题 6.银行家算法 7.存储管理 8.段式存储组织 9.段页式存储组织 10.页面置换算法 11.磁盘管理 12.作业管理 13.索引文件结构 14.树型目录结构 15.空闲存储空间管理 …...

编程日记 2023/2/26 19:37:45

【线性代数/计算复杂性理论】积和式的指数时间算法：Ryser算法

文章目录一、积和式的定义二、Ryser算法三、代码实现一、积和式的定义 积和式&#xff08;permanent&#xff09;是一种和行列式长得很像的矩阵函数。在介绍积和式之前&#xff0c;我们先看看行列式&#xff08;determinant&#xff09;的定义。 首先需要引入“排列”&#x…...

编程日记 2023/2/26 19:36:35

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2026/2/8 4:37:08

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2026/1/31 12:47:41

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/1/31 6:38:50

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2026/2/2 3:59:34

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2026/1/9 3:08:54