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

JavaScript DOM和BOM

news 2026/5/13 4:35:22

目录

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

superpowers skill 3.1: using-git-worktrees

智能体工作流 安装 $ npx skills add https://github.com/obra/superpowers --skill using-git-worktrees摘要 具有智能目录选择和安全验证的隔离 Git 工作树。 通过检查现有目录、CLAUDE.md 偏好设置或询问用户来自动检测工作树目录位置&#xff1b;支持项目本地&#xff…...

编程新知 2026/5/13 3:39:02

欧盟单一电信市场：技术规则重塑与产业影响分析

1. 项目概述&#xff1a;一场迟来的电信革命作为一名在通信行业摸爬滚打了十几年的工程师&#xff0c;我经历过从2G到5G的每一次技术迭代&#xff0c;也见证过不同市场间因政策壁垒而导致的种种怪象。比如&#xff0c;你带着一部手机在欧洲大陆旅行&#xff0c;从德国到法国不过…...

编程新知 2026/5/13 3:19:57

做定制开发的定制软件开发公司平台

在数字化转型浪潮下&#xff0c;“定制软件开发”几乎成了每一家力图通过技术构建壁垒的企业的必选项。然而&#xff0c;一个令人尴尬的现实是&#xff1a;很多企业在数字化上砸了重金&#xff0c;不仅没换来效率&#xff0c;反而陷入了“开发超预算、交付总延期、上线全是坑”…...

编程新知 2026/5/13 2:38:45

深度解析开源项目：Cursor Pro破解工具技术架构与实战应用完整指南

深度解析开源项目&#xff1a;Cursor Pro破解工具技术架构与实战应用完整指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reach…...

编程新知 2026/5/13 2:11:22

ClawSuite：模块化网络安全工具集在渗透测试中的实战应用

1. 项目概述&#xff1a;ClawSuite&#xff0c;一个被低估的网络安全工具集如果你在网络安全领域摸爬滚打了一段时间&#xff0c;尤其是在渗透测试或者红队评估的圈子里&#xff0c;你大概率听说过或者用过像 Metasploit、Nmap、Burp Suite 这些耳熟能详的“瑞士军刀”。但今天…...

编程新知 2026/5/13 1:49:52

200+ 发音人怎么缩小范围：先定风格再试听

&#x1f3af; 200 发音人怎么缩小范围&#xff1a;先定风格再试听面对顶伯文字转语音工具中超过 200 种发音人&#xff0c;选择困难症难免发作。&#x1f635; 别急&#xff0c;掌握 「先定风格再试听」 的筛选逻辑&#xff0c;就能快速锁定目标。 本文从风格分类、筛选技巧到…...

编程新知 2026/5/13 1:41:37

紧急预警：Midjourney即将下架Nihonga相关风格标签？（内部消息+已存档的5类不可再生提示词组合，仅限今日开放获取）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Nihonga风格在Midjourney中的历史定位与美学内核 Nihonga&#xff08;日本画&#xff09;作为明治维新后确立的现代民族绘画体系&#xff0c;以天然矿物颜料、金箔银箔、胶质媒介及传统和纸为物质基础&…...

编程新知 2026/5/12 23:29:44

3步精通UE4SS游戏Mod开发：从注入到实战完全指南

3步精通UE4SS游戏Mod开发&#xff1a;从注入到实战完全指南 【免费下载链接】RE-UE4SS Injectable LUA scripting system, SDK generator, live property editor and other dumping utilities for UE4/5 games 项目地址: https://gitcode.com/gh_mirrors/re/RE-UE4SS UE…...

编程新知 2026/5/12 22:50:45

企业级长文档AI落地避坑指南，从PDF解析失真到语义断裂修复——Claude 2026六大隐性能力详解

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;PDF解析失真问题的根源与本质诊断 PDF 文件虽为“便携式文档格式”&#xff0c;但其内部结构高度异构——文本可能嵌入在图形路径中、字体被子集化或完全缺失、字符编码映射断裂&#xff0c;甚至存在跨…...

编程新知 2026/5/12 22:37:31

Windows 10终极PL2303驱动修复指南：让老旧串口设备重获新生

Windows 10终极PL2303驱动修复指南&#xff1a;让老旧串口设备重获新生 【免费下载链接】pl2303-win10 Windows 10 driver for end-of-life PL-2303 chipsets. 项目地址: https://gitcode.com/gh_mirrors/pl/pl2303-win10 还在为Windows 10系统下的PL2303串口设备无法正…...

编程新知 2026/5/12 22:09:05