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

JavaScript DOM和BOM

news 2026/3/28 18:31:12

目录

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

飞机表面缺陷识别分割数据集labelme格式4612张5类别

注意数据集中有超过一半图片是增强图片数据集格式&#xff1a;labelme格式(不包含mask文件&#xff0c;仅仅包含jpg图片和对应的json文件)图片数量(jpg文件个数)&#xff1a;4612标注数量(json文件个数)&#xff1a;4612标注类别数&#xff1a;5标注类别名称:["Crack"…...

编程新知 2026/3/28 18:26:22

3倍效率的磁盘清理工具：Czkawka如何让存储空间管理变得简单

3倍效率的磁盘清理工具&#xff1a;Czkawka如何让存储空间管理变得简单 【免费下载链接】czkawka 一款跨平台的重复文件查找工具&#xff0c;可用于清理硬盘中的重复文件、相似图片、零字节文件等。它以高效、易用为特点&#xff0c;帮助用户释放存储空间。 项目地址: https:…...

编程新知 2026/3/28 18:12:18

深入解析MCU Systick：从基础配置到精准延时与系统时间获取实战

1. Systick定时器基础解析 Systick是Cortex-M内核内置的24位递减计数器&#xff0c;堪称MCU的"心跳发生器"。我第一次在STM32项目中使用它时&#xff0c;就像发现了一个隐藏的瑞士军刀——简单却功能强大。这个看似简单的定时器&#xff0c;实际上承担着三大核心功能…...

编程新知 2026/3/28 15:39:02

深度学习驱动的场景文本检测与识别：技术演进与前沿应用

1. 场景文本检测与识别的技术挑战 想象一下你正用手机拍下路边的餐厅招牌&#xff0c;想立刻知道这家店的招牌菜是什么。这个看似简单的动作背后&#xff0c;其实需要计算机完成两项关键任务&#xff1a;首先从复杂背景中找出文字位置&#xff08;文本检测&#xff09;&#x…...

编程新知 2026/3/28 14:38:43

如何通过C共享库实现AutoHotkey与Go语言的跨语言调用：完整指南

如何通过C共享库实现AutoHotkey与Go语言的跨语言调用&#xff1a;完整指南 【免费下载链接】AutoHotkey AutoHotkey - macro-creation and automation-oriented scripting utility for Windows. 项目地址: https://gitcode.com/gh_mirrors/au/AutoHotkey AutoHotkey是一…...

编程新知 2026/3/28 13:34:24

Blaze CSV处理最佳实践：大文件分块读取与并行计算

Blaze CSV处理最佳实践&#xff1a;大文件分块读取与并行计算 【免费下载链接】blaze NumPy and Pandas interface to Big Data 项目地址: https://gitcode.com/gh_mirrors/bl/blaze Blaze作为NumPy和Pandas接口的Big Data工具&#xff0c;提供了高效处理大型CSV文件的能…...

编程新知 2026/3/28 13:24:20

第19篇：多个PI控制器串联控制系统设计与参数整定调试实战

本篇前置知识&#xff1a;掌握自动控制基础原理、熟悉单回路PI控制算法、了解工控闭环系统、会基础Python编程、接触过PLC实操与工控数据采集。 你是否遇到过&#xff1f; 痛点1&#xff1a;只会调试单回路PI控制&#xff0c;碰到多级串联被控对象&#xff0c;系统震荡剧烈、响…...

编程新知 2026/3/28 13:22:09

CoPaw赋能智慧医疗：辅助电子病历分析与报告生成

CoPaw赋能智慧医疗&#xff1a;辅助电子病历分析与报告生成 1. 医疗文书处理的痛点与机遇 早上8点&#xff0c;张医生刚走进诊室&#xff0c;电脑上已经堆积了30多份待处理的电子病历。每份病历都包含患者主诉、检查结果、既往病史等非结构化文本&#xff0c;需要人工提取关键…...

编程新知 2026/3/28 13:12:07

华硕笔记本终极性能调校指南：GHelper开源控制工具完全解析

华硕笔记本终极性能调校指南&#xff1a;GHelper开源控制工具完全解析 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目…...

编程新知 2026/3/28 12:46:02

PCIe配置寄存器详解：从枚举到设备驱动的完整流程（附常见问题排查）

PCIe配置寄存器深度解析&#xff1a;从硬件初始化到驱动加载的全链路实践指南 1. PCIe设备枚举的核心机制 PCIe设备的枚举过程是系统启动时最关键的硬件发现阶段。当主板通电后&#xff0c;CPU首先通过根联合体&#xff08;Root Complex&#xff09;发起总线扫描&#xff0c;这…...

编程新知 2026/3/28 11:49:39