JavaScript:BOM编程
今天我要介绍的是JS中有关于BOM编程的知识点内容:BOM编程;
介绍:BOM全名(Browser Object Model(浏览器对象模型))。 是浏览器提供的与浏览器窗口交互的接口,其核心对象是 window。与 DOM(文档对象模型)不同,BOM 关注浏览器窗口、导航、历史记录等浏览器层面的操作。
接下来我将逐一介绍BOM编程的相关内容;
以下图解为BOM树:
window对象意解:document :文档(包含当前窗口所显示页面文档的所有内容);history:历史记录(访问历史纪录);location:地址栏(操作地址栏);sreen(查看屏幕信息)(剩下内容后续文章将会介绍)
所有JS全局对象,函数以及变量均自动成为window对象的成员,实际使用上述对象时可以省略window,例如:window.location和location时一样的。
注:document对象: HTML标签对象也是一个节点Node对象 它处于DOM树的上级。
var a = 10;console.log(a);console.log(window.a);//函数function add(a, b) {return a + b;}console.log(add(1, 2))console.log(window.add(1, 2));// //对象console.log(parseInt('123'))
效果:
注解:console.log(window.parseInt('123'))也属于window对象的成员==》console.log(parseInt('123')),可以通过window对象访问;
window内容详细:
close:关闭窗口;setInterval:循环定时器;setTimeout:定时器;clearInterval:清除循环定时器;clearTimeout:清除定时器;parseInt:转整数;parseFloat:转小数;innerHeight / innerWidth:网页显示区域高度 / 网页显示区域宽度;
注意:以上在前面的位置都可以加 window ;
innerHeight / innerWidth:网页显示区域高度 / 网页显示区域宽度:
<div id ='dd' style="background: red;width: 100px;"></div><button onclick="window.open('CSwj.html')">点击一下</button><button onclick="window.location='CSwj.html'">location跳转</button><!-- <button onclick="window.history.forward()">history前进</button> -->dd.style.width=window.innerWidth;console.log(window.innerHeight)dd.style.height=window.innerHeight+'px';
效果:
注解:以上内容效果的宽度不会随着其屏幕的放大缩小,但是它在会刷新的时候会根据你屏幕的大小取它的高度
location内容详细先知:
herf:跳转页面;reload:重载页面;
<button onclick=" window.open('CSwj.html')">点击一下</button><button onclick="window.location='CSwj.html'">location跳转</button>
效果:
跳转后:
区别==》<button οnclick="window.open('CSwj.html')">点击一下</button>
<button οnclick="window.location='CSwj.html'">location跳转</button>
<input type="text" /><button onclick="window.open('CSwj.html')">点击一下</button><button onclick="window.location.reload()">location重载</button>
效果:
一个为新开窗口,一个在当前窗口打开;后者可以省略window,单加location的,但是一般是不省略,方便可以理解。
history内容详细先知:
back:返回;forword:前进;go:指定;
<input type="text" /><button onclick="window.open('CSwj.html')">点击一下</button><button onclick="window.location='CSwj.html'">location跳转</button><button onclick="window.history.forward()">history前进</button> &&<button onclick="window.history.go(1)">go前进</button> &&<button onclick="window.location.reload()">location重载</button>
效果:
跳转后:
注解:{ go(-1) } 回退;
document内容详细先知:
ById:根据id属性获取指定的元素(单个获取);byTagName:根据标签获取指定的元素(多个获取);byClassName:根据类样式class获取指定的元素(多个获取);querySelector:根据class样式查找元素(单个);querySelectorAll:根据class样式查找所有满足的元素(多个)。
ById:根据id属性获取指定的元素(单个获取)
<ul><li id = "li1">Scratch</li><li id = "li2">Java</li><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><div class="box"><p class="c1">苹果</p><p class="c1">香蕉</p><p class="c2">西瓜</p></div><div class="box"><p class="c1">苹果</p><p class="c1">香蕉</p><p class="c2">莲雾</p></div><p>茄子</p><script>// 根据id属性获取指定的元素(单个获取)let li = document.getElementById('li1');console.log(li)// let lk = li2; //非常规写法,不推荐这个做法console.log(ll)
效果
byTagName:根据标签获取指定的元素(多个获取)
//byTagName:根据标签获取指定的元素(多个获取)let kk = document.getElementsByTagName('li')// let kk = document.getElementsByTagName('p')//for 循环 for of // 其中 kk属于被(遍历)循环集合,// s属于每次循环所得之变量for (let s of kk) {console.log(s)}
效果:
byClassName:根据类样式class获取指定的元素(多个获取)
// byClassName:根据类样式class获取指定的元素(多个获取)let ss = document.getElementsByClassName('c1')for (let s of ss) {console.log(s)}
效果:
querySelector:根据class样式查找元素(单个)
//querySelector:根据class样式查找元素(单个)let ss =document.querySelector(".box.c2")console.log(ss);
效果:
querySelectorAll:根据class样式查找所有满足的元素(多个)
//querySelectorAll:根据class样式查找所有满足的元素(多个)let ss = document.querySelectorAll('.box .c2')for (let s of ss) {console.log(s)}
效果:
注解:复制给定的 SS 在遍历再通过循环多个之后,所要得到的内容才可以一个一个打印出来,查找方式,只要是样式之类的,都可以用这个;
总结:希望本篇有关于JS BOM编程的知识点内容能对你带来一定的帮助,同时非常感谢各位大佬们的点赞与支持,咱们下一篇不见不散。
相关文章:
JavaScript:BOM编程
今天我要介绍的是JS中有关于BOM编程的知识点内容:BOM编程; 介绍:BOM全名(Browser Object Model(浏览器对象模型))。 是浏览器提供的与浏览器窗口交互的接口,其核心对象是 window。与…...
用户自定义函数(UDF)开发与应用(二)
五、UDF 在不同平台的应用 5.1 数据库中的 UDF 应用(如 MySQL、PostgreSQL) 在数据库领域,UDF 为开发者提供了强大的扩展能力,使得数据库可以完成一些原本内置函数无法实现的复杂操作。 以 MySQL 为例,假设我们有一…...
C++——继承、权限对继承的影响
目录 继承基本概念 编程示例 1.基类(父类)Person 代码特点说明 权限对类的影响 编辑 编程示例 1. 公有继承 (public inheritance) 2. 保护继承 (protected inheritance) 3. 私有继承 (private inheritance) 重要规则 实际应用 继承基本概…...
Tkinter样式与主题定制
在创建图形用户界面(GUI)应用时,除了功能的实现外,界面的外观和用户体验也非常重要。Tkinter提供了多种方式来定制控件的样式,使应用程序界面更加美观和易用。在这一章中,我们将介绍如何使用Tkinter的样式和…...
CSS 背景属性学习笔记
CSS 背景属性用于定义 HTML 元素的背景效果,包括背景颜色、背景图像、图像平铺方式、图像定位以及图像是否固定等。以下是关于 CSS 背景属性的详细学习笔记。 一、背景颜色(background-color) background-color 属性用于定义元素的背景颜色…...
信息安全管理与评估2023广东省样题答案截图视频
2023年广东省职业院校技能大赛高职组 “信息安全管理与评估”赛项任务书 一、 赛项时间 9:00-13:30,共计4小时30分,含赛题发放、收卷时间。 二、 赛项内容 本次大赛,各位选手需要完成三个阶段的任务,其中第一个阶段需要…...
ubuntu学习day1
linux常用命令 1. 用户相关 1.1 切换用户 su root #切换到root用户 su user #切换到普通用户sudo能赋予普通用户管理者权限,一般不要直接使用root用户进行操作。 1.2 添加用户 useradd 用户名 useradd user1 #添加了用户名为user1的用户但在ubuntu中想要创建普…...
ubuntu22.04-VMware Workstation移动后无法连接网络
1.VMware 中查看NAT模式 2.查看宿主机VMnet8的IP地址 虚拟机里设置成192.168.20.160 , 255.255.255.0, 192.168.20.2 在ubuntu系统中设置如下: 至此可以连上了。...
如何评估大模型的性能?有哪些常用的评估指标?
评估大模型(如大语言模型 LLM)的性能是一个多维度的问题,常常需要结合多个指标从不同角度来考察模型的能力。以下是常见的评估方法和指标: 一、通用评估维度 任务性能(Task Performance) 衡量模型在特定任务上的表现,如问答、翻译、总结等。 语言能力(Linguistic Capa…...
Linux驱动开发-网络设备驱动
Linux驱动开发-网络设备驱动 一,网络设备总体结构1.1 总体架构1.2 NAPI数据处理机制 二,RMII和MDIO2.1 RMII接口2.2 MDIO接口 三,MAC和PHY模块3.1 MAC模块3.2 PHY模块 四,网络模型4.1 网络的OSI和TCP/IP分层模型4.1.1 传输层&…...
CTF web入门之文件包含
web78: include函数执行file引入的文件,如果执行不成功,就高亮显示当前页面的源码。 方法一:filter伪协议 file关键字的get参数传递,php://是一种协议名称,php://filter/是一种访问本地文件的协议,/readc…...
error: failed to run custom build command for `yeslogic-fontconfig-sys v6.0.0`
rust使用plotters时遇到编译错误。 一、错误 error: failed to run custom build command for yeslogic-fontconfig-sys v6.0.0 二、解决方法 我用的是opensuse,使用下面命令可以解决问题。 sudo zypper in fontconfig-devel...
低资源需求的大模型训练项目---调研0.5B大语言模型
一、主流0.5B大语言模型及性能对比 1. Qwen系列(阿里) • Qwen2.5-0.5B:阿里2024年9月开源的通义千问系列最小尺寸模型,支持32K上下文长度和8K生成长度。在中文场景下表现优异,指令跟踪、JSON结构化输出能力突出&…...
信息安全管理与评估广东省2023省赛正式赛题
任务1:网络平台搭建(60分) 题号 网络需求 1 根据网络拓扑图所示,按照IP地址参数表,对DCFW的名称、各接口IP地址进行配置。(10分) 2 根据网络拓扑图所示,按照IP地址参数表,对DCRS的名称进…...
LeetCode.225. 用队列实现栈
用队列实现栈 题目解题思路1. push2. pop3. empty CodeQueue.hQueue.cStack.c 题目 225. 用队列实现栈 请你仅使用两个队列实现一个后入先出(LIFO)的栈,并支持普通栈的全部四种操作(push、top、pop 和 empty)。 实现…...
CTF--bp
一、原题: (1)提示:弱密码top1000?z????? (2)原网页: 二、步骤: 1.先打开BP,随便输入一个密码: 2.打开BP,发现password&#…...
01_背包问题
package org.josh; import java.util.*; public class Main { public static void main(String[] args) { Scanner scanner new Scanner(System.in); int n scanner.nextInt(); // 物品数量 long w scanner.nextLong(); // 背包容量,使用long防止溢出 int[] v …...
ps 人像学习
视频: 一ps快捷键 1.1 创建图层 ctrlj 1.2 放大缩小图片的大小 按住alt 滚轮 1.3 移动图片 空格 左键 1.4 撤回 ctrlz 二 精修的第一步是去除斑点,瑕疵, 2.1 污点修复画笔工具 新建一个图层,点击污点修复工具进行修复…...
【AI论文】MM-IFEngine:迈向多模态指令遵循
摘要:指令遵循(IF)能力衡量多模态大语言模型(MLLM)准确理解用户告诉他们的内容以及他们是否做得正确的能力。 现有的多模态指令训练数据很少,基准测试简单,指令原子化,对于要求精确输…...
【C++初学】课后作业汇总复习(五) 单目运算符重载
本题主要考察-构造函数的定义和操作符重载、友元函数等 根据后缀和程序样例输出,完成分数类和相关函数的定义, 输入: -6 12 8 -16 输出: 1/2 1/1 -1/2 / -1/2 - -1/2 0/1 输入: 3 7 2 6 输出: 1/…...
Python基础语法速通(自用笔记)
目录 # 输出直接print就行了 # 次方,除法,取整 # 定义变量直接写就可以,不用写类型 # 基础的while不用写()和{},直接用冒号即可,缩进对齐 # 这里的for循环直接用in就可以,意思是从...中一个…...
Nginx基础讲解
Nginx基础讲解 Nginx 是一款高性能的 HTTP 服务器和反向代理服务器,广泛用于负载均衡、静态资源托管、SSL 终端等场景。以下是对 Nginx 的详细讲解: 1. Nginx 核心概念 事件驱动架构:基于异步非阻塞模型,高效处理高并发连接…...
K8S+Prometheus+Consul+alertWebhook实现全链路服务自动发现与监控、告警配置实战
系列文章目录 k8s服务注册到consul prometheus监控标签 文章目录 系列文章目录前言一、环境二、Prometheus部署1.下载2.部署3.验证 三、kube-prometheus添加自定义监控项1.准备yaml文件2.创建新的secret并应用到prometheus3.将yaml文件应用到集群4.重启prometheus-k8s pod5.访…...
组件安全工程化革命:从防御体系构建到安全基因重塑
文章目录 总起:数字世界的钢铁长城 分论: 一、组件生态的"七宗罪"与安全基因重组 二、百万级流量下的安全工程化实战 三、性能与安全的共生进化论 四、安全工程化全链路解决方案 总束:安全基因驱动的未来图景 五、时代思考…...
(PC+WAP)大气滚屏网站模板 电气电力设备网站源码下载
源码介绍 (PCWAP)大气滚屏网站模板 电气电力设备网站源码下载。PbootCMS内核开发的网站模板,该模板适用于滚屏网站模板、电气电力设备网站源码等企业,当然其他行业也可以做,只需要把文字图片换成其他行业的即可;PCWAP,…...
发送加密信息的简单实现【Java】
(修改期) 一、代码的引用处 public static SecretKeys generateKeys() throws NoSuchAlgorithmException {: 定义一个公共静态方法,用于生成 AES 和 HMAC 密钥对。 public static String encrypt(String plaintext, SecretKey aesKey, S…...
阿里云域名解析
一、打开域名控制台 PC端浏览器打开阿里云域名控制台:域名控制台,点击"域名解析"。 二、添加解析设置 选择需要解析的域名,点击"解析设置"。 点击"添加记录"。 添加@和www即可。...
DNS域名解析服务(正向 反向 主从)
DNS 1.分散式管理: Hosts文件 一改百度就不会访问了 Ip地址 域名 121.226.246.3 www.jd.com 2.我们会搭建一台 域名解析服务器全世界得域名全靠这台服务器进行解析 中央集权制 域名是由多个部分组成的 www.baidu.com .baidu .com是域…...
ROS2---std_msgs基础消息包
std_msgs 是ROS 2(Robot Operating System 2)里的基础消息包,它定义了一系列简单却常用的消息类型,为不同节点间的通信提供了基础的数据格式。 1. 消息包概述 std_msgs 包包含了多种基础消息类型,这些类型用于表示常…...
python基础:数据类型转换、运算符(算术运算符、比较运算符、逻辑运算符、三元运算符、位运算符)
目录 一、类型转换 隐式类型转换/自动转换: 显示类型转换/强制转换: 二、运算符 算数运算符: - * / 比较运算符 逻辑/布尔运算符 赋值运算符: 三元运算符 位运算符 [二进制] 运算符优先级 一、类型转换 python变量的类…...
[特殊字符] 终端效率提升指南:zsh + tmux
在日常开发中,一个舒适、高效的终端环境能显著提升工作效率。本文将介绍如何通过配置 oh-my-zsh 和 tmux 打造一个功能强大、便捷实用的终端工具集。无论你是 Linux 新手,还是资深开发者,都能从中获得实用的提升技巧。 🌀 一、终…...
【Linux篇】深入理解文件系统:从基础概念到 ext2 文件系统的应用与解析
文件系统的魔法:让计算机理解并存储你的数据 一. 文件系统1.1 块1.2 分区1.3 inode(索引节点) 二. ext2文件系统2.1 认识文件系统2.2 Block Group (块组)2.2.1 Block Group 的基本概念2.2.2 Block Group 的作用 2.3 块组内部结构2.3.1 超级块(Super Bloc…...
MarkDown 输出表格的方法
MarkDown用来输出表格很简单,比Word手搓表格简单多了,而且方便修改。 MarkDown代码: |A|B|C|D| |:-|-:|:-:|-| |1|b|c|d| |2|b|c|d| |3|b|c|d| |4|b|c|d| |5|b|c|d|显示效果: ABCD1bcd2bcd3bcd4bcd5bcd A列强制左对齐…...
DOM解析XML:Java程序员的“乐高积木式“数据搭建
各位代码建筑师们!今天我们要玩一个把XML变成内存乐高城堡的游戏——DOM解析!和SAX那种"边看监控边破案"的刺激不同,DOM就像把整个乐高说明书一次性倒进大脑,然后慢慢拼装(内存:你不要过来啊&…...
Python 数组里找出子超集
碰见一个问题,有一个大数组,如下所示: xx [[1, 3, 4], [3, 4, 5], [1, 2, 3, 4, 5], [6], [7, 8], [6, 7, 8]]大数组里面有好多小的数组,观察发现,小的数组其实有挺多别的小数组的子集,现在问题来了&…...
上层 Makefile 控制下层 Makefile ---- 第二部分(补充一些例子与细节)
1. 递归调用子目录 Makefile 通过 $(MAKE) -C 进入子目录并执行其 Makefile,这是最常见的分层构建方法。 示例:基本递归调用 目录结构: project/ ├── Makefile # 顶层 Makefile ├── lib/ │ ├── Makefile # 子目录…...
LeetCode算法题(Go语言实现)_44
题目 有 n 个城市,其中一些彼此相连,另一些没有相连。如果城市 a 与城市 b 直接相连,且城市 b 与城市 c 直接相连,那么城市 a 与城市 c 间接相连。 省份是一组直接或间接相连的城市,组内不含其他没有相连的城市。 给你…...
STM32 HAL库之USART示例代码
串口发送和接收以及回调函数都可在这个文件中查询:stm32f1xx_hal_uart.h 串口配置初始化代码main.c中:MX_USART1_UART_Init();,初始化 UART 高层参数(波特率、数据位、停止位、校验、模式等) void MX_USART1_UART_In…...
头歌educoder——数据库 第10-11章
第10章 1、 事务的( )特性要求事务必须被视为一个不可分割的最小工作单元 A、 原子性 B、 一致性 C、 隔离性 D、 持久性 2、 事务的( )特性要求一个事务在执行时,不会受到其他事务的影响。 A、 原子性 B、 一致性 C…...
从 Vue 到 React:深入理解 useState 的异步更新与函数式写法
目录 从 Vue 到 React:深入理解 useState 的异步更新与函数式写法1. Vue 的响应式回顾:每次赋值立即生效2. React 的状态更新是异步且批量的原因解析 3. 函数式更新:唯一的正确写法4. 对比 Vue vs React 状态更新5. React useState 的核心源码…...
如何实现元素随滚动平滑上升
#技术栈Vue3TypeScript# 相比大家没少见过这个的效果: 作为视觉效果是很不错的 同时实现也很简单,本质是封装一个Vue指令 1,创建指令文件 src / directives / vSlidenIn.ts import type { Directive } from vueconst vSlideIn: Directive …...
Nginx部署spa单页面的小bug
没部署过,都是给后端干的,自己尝试部署了一个下午终于成功了 我遇到的最大的bug是进入后只有首页正常显示 其他页面全是404,于是问问问才知道,需要这个 location / { try_files $uri $uri/ /index.html; } 让…...
关于全球化大规模混合云 Kubernetes Prometheus 监控体系标准化及 GitOps 自动化改进方案
背景 现状 某司概况: PaaS/SaaS 公司,业务面向全球,包括 东南亚/南亚/中东/欧洲/非洲/美洲/东亚…生产 k8s 集群数十套,生产非生产 >100 套(多种集群类型,各种公有云/专有云/私有云/数据中心…)疫情以来ÿ…...
力扣DAY51 | 热100 | 岛屿数量
前言 中等 √ 做得我元气大伤,超级naive方法,新开辟一个数组存岛屿编号,一个数组存岛屿上的点。 题目 给你一个由 1(陆地)和 0(水)组成的的二维网格,请你计算网格中岛屿的数量。 …...
二叉树的最近公共祖先二叉搜索树的最近公共祖先
1 二叉树的最近公共祖先 学习: 代码 class Solution:def lowestCommonAncestor(self, root: TreeNode, p: TreeNode, q: TreeNode) -> TreeNode:if root is None or root is p or root is q:return rootleft self.lowestCommonAncestor(root.left,p,q)right …...
关于 LLB 的问题
This error occurs when you’re trying to run a program or library that was compiled with GLIBC (GNU C Library) version 2.29, but your system has an older version of GLIBC installed. Solutions: 1. Upgrade your system’s GLIBC (Recommended if possible) Fo…...
kafka4.0浅尝辄止
最近工作中接触消息队列比较多,前几周又看到kafka4.0发布,故写一篇博客对消息队列做一个复盘。 目录 消息队列对比1. Apache Kafka 4.02. RabbitMQ3. RocketMQ4. ActiveMQ5. Apache Pulsar6. NSQ kafka4.0鲜明的新特性Java 版本要求升级API 更新与精简移…...
nmcli创建wpa-psk2 wifi热点
1. 创建新的WiFi连接: sudo nmcli connection add type wifi ifname wlan0 con-name WiFi名称 autoconnect yes ssid WiFi名称 2. 配置接入点模式和IP共享: sudo nmcli connection modify WiFi名称 802-11-wireless.mode ap 802-11-wireless.band …...
分布式日志治理:Log4j2自定义Appender写日志到RocketMQ
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…...
【STM32单片机】#8 定时器编码器接口ADC模数转换器
主要参考学习资料: B站江协科技 STM32入门教程-2023版 细致讲解 中文字幕 开发资料下载链接:https://pan.baidu.com/s/1h_UjuQKDX9IpP-U1Effbsw?pwddspb 单片机套装:STM32F103C8T6开发板单片机C6T6核心板 实验板最小系统板套件科协 实验&…...