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

JavaScript DOM和BOM

news 2025/12/15 1:27:25

查找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并发编程（二）

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

编程日记 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) 比较时， 若a 和 b 都是null, 则返回 true, 如果a 和 b 其中一个是null, 另一个不是null, 则返回false。注意：不会抛出空指针异常。(2) a 和 b 如果都是空值字符串："", 则 a.equals(b…...

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

自学大数据的第一天

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

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

redis秒杀

redis优惠券秒杀为什么订单表订单ID不采用自增长？ id规律性太明显，容易被用户猜测到（比如第一天下订单id10，第二天下订单id100，在昨天的1天内只卖出90商品）受单表数据量限制（订单数据量大&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、节点（node）操作三、DOM操作总结（创建、增删改查、属性操作、事件操作API）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) 如何给一张表新增数据呢？ 新增(Create)，在我们数据库中，用 ins…...

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

STM32—DMA

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

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

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

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

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

搭建Vue工程

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

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

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

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

编程日记 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教程-讲师：Reythor雷（老雷） 我们缺乏的不是知识，而是学而不厌的态度 1 MQ概述 1.1 MQ简介…...

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

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

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

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

Python—单分支结构

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

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

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

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

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

Codeforces Round#853 div2 A-C

Codeforces Round#853 div2 A-C 等了很久终于迎来了一场cf比赛，白天出去玩了一圈，晚上回来打比赛，这次只出了A,B题。C题思路很巧妙，赛时没做出来，看了大佬学习到了，还是很不错。 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算法三、代码实现一、积和式的定义积和式（permanent）是一种和行列式长得很像的矩阵函数。在介绍积和式之前，我们先看看行列式（determinant）的定义。首先需要引入“排列”&#x…...

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层将题目图片经过超分、去噪、倾斜校正后，分别用…...

编程新知 2025/12/14 9:57:56

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...

编程新知 2025/9/7 0:12:53

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/12/12 19:42:17

React19源码系列之事件插件系统

事件类别事件类型定义文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/12/13 3:10:42

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...

编程新知 2025/11/30 10:30:15

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念线程安全（Thread Safety） 线程安全是指在多线程环境下，某个函数、类或代码片段能够被多个线程同时调用时，仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字不要使用 Kotlin 的任何硬关键字作为方法的名称或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/12/10 4:05:13