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

JavaScript DOM和BOM

news 2026/2/8 20:17:40

目录

查找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

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2026/1/10 10:16:16

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/29 15:43:26

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

编程新知 2025/10/16 14:46:22

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2026/2/7 9:52:39