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

JavaScript基础（Dom操作）

news 2025/10/19 16:32:57

一，BOM模型
- 1.1，BOM可实现功能
二，Window对象的常用属性
- 2.1，Window对象的常用方法
- - 2.1-1，open()和close()方法
三，History对象
四，Location对象
五，Document对象的常用方法
六，定时函数
- 6.1，清除函数
七，写了一个小游戏（模拟小球移动）
最后

一，BOM模型

BOM提供了独立于内容的、可与浏览器窗口进行互动的对象结构
BOM：浏览器对象模型（Browser Object Model）
在这里插入图片描述

1.1，BOM可实现功能

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

二，Window对象的常用属性

表示浏览器中打开的窗口
常用的属性

在这里插入图片描述
这里面有Window所有对象我这截图不全，里面带f的是函数，不带的是属性

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息
screen	只读属性，包含客户端显示屏幕的信息

语法：
window.属性名= "属性值";

在这里插入图片描述
返回这个点击直接跳转百度页面

screen.width 返回浏览器屏幕的宽度，单位为像素;
在这里插入图片描述

2.1，Window对象的常用方法

常用的方法

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式
clearTimeout( )	用于停止执行setTimeout( )方法的函数代码
clearInterval( )	用于停止 setInterval( ) 方法执行的函数代码

2.1-1，open()和close()方法

<body><div><input type="button" value="打开窗口" onclick="openwin()"></input><input type="button" value="关闭窗口" onclick="closewin()"></div></body>
<script>function openwin(){window.open("https://www.baidu.com.cn","win1")}function closewin(){window.close()}
</script>

Video_20230822152329

在这里插入图片描述

第一个按钮可以打开窗口，第二个按钮可以关闭窗口

窗口特征的一些属性

属性名称	说明
height、width	窗口文档显示区的高度、宽度，以像素计
left、top	窗口的x坐标、y坐标，以像素计
toolbar=yes ，no， 1 ， 0	是否显示浏览器的工具栏，黙认是yes
scrollbars=yes，no，1，0	是否显示滚动条，黙认是yes
location=yes，no，1，0	是否显示地址地段，黙认是yes
status=yes，no，1，0	是否添加状态栏，黙认是yes
menubar=yes，no，1，0	是否显示菜单栏，黙认是yes
resizable=yes，no，1，0	窗口是否可调节尺寸，黙认是yes
titlebar=yes，no，1，0	是否显示标题栏，黙认是yes
fullscreen=yes，no，1，0	是否使用全屏模式显示浏览器，黙认是no。处于全屏模式的窗口必须同时处于剧院模式

三，History对象

保存用户上网的历史记录，可通过window.history属性访问

常用属性和方法

类别	名称	说明
属性	length	返回历史记录列表中的网址数
方法	back()	加载 History 对象列表中的前一个URL
方法	forward()	加载 History 对象列表中的下一个URL
方法	go()	加载 History 对象列表中的某个具体URL

在这里插入图片描述

<body><div><input type="button" value="跳转窗口" onclick="gotodemo01()"></div></body>
<script>function gotodemo01(){window.location.href="demo01.html"}
</script>

Video_20230822152033

<body><div><input type="button" value="打开窗口" onclick="openwin()"></input><input type="button" value="关闭窗口" onclick="closewin()"><input type="button" value="跳转窗口" onclick="gotodemo01()"><input type="button" value="前进" onclick="qinajin()"></div></body>
<script>function openwin(){window.open("https://www.baidu.com.cn","win1")}function closewin(){window.close()}function gotodemo01(){window.location.href="demo01.html"}function qinajin(){window.history.forward();}
</script>

<body>passerby<div><input type="button" value="后退" onclick="goblock()"></div>
</body>
<script>function goblock(){window.history.back();}
</script>

Video_20230822152919

四，Location对象

包含有关当前URL的信息，可通过window.location属性访问

常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

在这里插入图片描述

五，Document对象的常用方法

Document对象代表整个HTML文档
Document对象的常用方法

名称	说明	唯一
getElementById()	返回对拥有指定id的第一个对象的引用	对象的id唯一
getElementsByName()	返回带有指定名称的对象的集合	相同name属性
getElementsByTagName()	返回带有指定标签名的对象的集合	相同的元素
write()	向文档写文本、HTML表达式或JavaScript代码

写了一个小例子：

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>使用document对象操作页面</title><style type="text/css">body,input,div,p{margin: 0;padding: 0;}body {font-size: 14px;font-family: "微软雅黑";line-height: 25px;}.content {width: 600px;margin: 30px auto;}.content img {float: left;width: 180px;}.r {float: right;width: 400px;}input[name="changephone"] {width: 100px;height: 28px;line-height: 28px;text-align: center;font-size: 14px;font-family: "微软雅黑";margin: 10px 0 10px 0;}input[name="size"] {width: 50px;text-align: center;}#replace {border: 1px solid rgb(179, 179, 179);height: 60px;}</style>
</head><body><div class="content"><img src="images/pro4.jpg" alt="1+8Plus" /><div class="r">产品名称：<span id="phone123">1+8 Plus</span> <br><input name="changephone" value="更换产品名称" type="button" onclick="changeName();" /><br>规格选择：<input name="size" type="text" value="64G" /><input name="size" type="text" value="128G" /><input name="size" type="text" value="256G" /><input name="size" type="text" value="512G" /><br><input name="b2" type="button" value="input内容" onclick="all_input()" /><input name="b3" type="button" value="所有规格" onclick="s_input()" /><input name="b4" type="button" value="清空页面内容" onclick="clearAll()" /><p id="replace"></p></div></div><script type="text/javascript">function changeName(){document.getElementById("phone123").innerHTML="ABC"}function all_input(){var inputArray = document.getElementsByTagName("input");var inputHtml = "";for(var i=0; i<inputArray.length; i++){var myinput = inputArray[i];inputHtml = inputHtml + myinput.value + "";}document.getElementById("replace").innerHTML=inputHtml;}function s_input(){var inputArray = document.getElementsByName("size");var inputHtml = "";for(var i=0; i<inputArray.length; i++){var myinput = inputArray[i];inputHtml = inputHtml + myinput.value + "";}document.getElementById("replace").innerHTML=inputHtml;}function clearAll(){document.getElementById("replace").innerHTML="";}</script>
</body></html>

Video_20230822170835

六，定时函数

超时调用：setTimeout()

window.setTimeout("调用的函数", 等待的毫秒数);

间歇调用：setInterval()

window.setInterval("调用的函数", 间隔的毫秒数);

示例

<!-- 加载完执行的事件 -->
<body onload="init()"></body>
<script>function init(){setTimeout("fun1()",3000);// 3秒(3000毫秒)后执行fun1()函数一次setInterval("fun2()",2000)// 每隔2秒(2000毫秒)执行一次fun2()函数}function fun1(){console.log(1);}function fun2(){console.log(2);}
</script>

Video_20230822172316

6.1，清除函数

clearTimeout()

clearTimeout(setTimeOut()返回的ID值)

clearInterval()

clearInterval(setInterval()返回的ID值)

示例

<!-- 加载完执行的事件 -->
<body onload="init()"><input type="button" value="停止" onclick="stopInterval()"><input type="button" value="开始" onclick="startInterval()"></body>
<script>var intervalIndex;function init(){setTimeout("fun1()",3000);// 3秒(3000毫秒)后执行fun1()函数一次intervalIndex = setInterval("fun2()",2000)// 每隔2秒(2000毫秒)执行一次fun2()函数}function fun1(){console.log(1);}function fun2(){console.log(2);}function stopInterval(){clearInterval(intervalIndex)}function startInterval(){intervalIndex = setInterval("fun2()",2000)// 每隔2秒(2000毫秒)执行一次fun2()函数}
</script>

Video_20230822173613

七，写了一个小游戏（模拟小球移动）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#box{border: 1px sandybrown solid;height: 100px;width: 100px;text-align: center;line-height: 100px;border-radius: 50px;position: absolute;left: 100px;}
</style>
<body> <div id="box">点击开始</div>
</body>
<script>//    绑定点击事件/*** 1.画静态页面* 2.绑定点击事件* 3.点击一次移动导固定位置（点一次移动一次）* 4.点击一次在原有的基础上移动固定位置（点一次移动一次）* 5.点击一次持续移动* 6.点击后，能判断出是要停止还是移动* 7.在停止的对应的代码上，停止循环* **/var boxDom = document.getElementById("box");// 创建一个绑定事件boxDom.addEventListener("click",isMove);var intervalIndex; function isMove(){var boxHtml = boxDom.innerHTML // Div文字内容if(boxHtml=='点击停止'){// 停止循环clearInterval(intervalIndex);boxDom.innerHTML="点击开始"}else{// 开始循环intervalIndex = setInterval("Move()",10)}}// 方法调用一次移动1pxfunction Move(){console.log(1);var leftVal = window.getComputedStyle(boxDom).left;console.log(leftVal);leftVal = parseInt(leftVal);leftVal =  leftVal+1;boxDom.style.left = leftVal+"px"boxDom.innerHTML="点击停止"}
</script>
</html>

Video_20230822175824

最后

送大家一句话：变好的过程都不太舒服，试试在努力点

JavaScript基础（Dom操作）

目录一，BOM模型1.1，BOM可实现功能二，Window对象的常用属性2.1，Window对象的常用方法2.1-1，open()和close()方法三，History对象四，Location对象五，Document对象的常用方法六&#…...

编程日记 2023/8/23 7:02:41

.NET6.0 System.Drawing.Common 通用解决办法

最近有不少小伙伴在升级 .NET 6 时遇到了 System.Drawing.Common 的问题，同时很多库的依赖还都是 System.Drawing.Common ，而 .NET 6 默认情况下只在 Windows 上支持使用，Linux 上默认不支持这就导致在 Linux 环境上使用会有问题，…...

编程日记 2023/8/23 7:01:40

k8s ingress (二）

k8s ingress (二) Ingress介绍在前面课程中已经提到，Service对集群之外暴露服务的主要方式有两种：NodePort和LoadBalancer，但是这两种方式，都有一定的缺点： NodePort方式的缺点是会占用很多集群机器的端口&#xff0…...

编程日记 2023/8/23 7:00:37

如何实现element UI中table操作栏更多按钮的展示与折叠？

解决思路：直接使用elementUI文档上Popover 弹出框组件废话不多说，直接上代码吧 <el-table :data="locationList" v-loading="loading" border class="table" ref="multipleTable" @selection-change="handleSelecti…...

编程日记 2023/8/23 6:59:35

SpringBoot（二）

###SpringBoot原理分析 ###SpringBoot监控 ###SpringBoot项目部署 #SpringBoot自动配置 Condition：（条件） Condition是在Spring4.0增加的条件判断功能，通过这个功能可以实现选择性的创建Bean操作 SpringBoot是如何知道要创建…...

编程日记 2023/8/23 6:58:34

python脚本——批量将word文档转换成pdf文件

语言：python 3 用法：点击运行后，弹出窗口选择word文档所在文件夹，程序运行后对该文件夹下所有的word文件全部转换成pdf文件，生成的pdf文件名字与原wrod文件相同。如运行中报错，需要自行根据报错内容按照…...

编程日记 2023/8/23 6:57:32

自然语言处理从入门到应用——LangChain：链（Chains）-[通用功能：链的保存（序列化）与加载（反序列化）]

分类目录：《自然语言处理从入门到应用》总目录本文介绍了如何将链保存（序列化）到磁盘和从磁盘加载（反序列化）。我们使用的序列化格式是json或yaml。目前，只有一些链支持这种类型的序列化。随着时间的推移&…...

编程日记 2023/8/23 6:56:30

机器学习：开启智能时代的重要引擎

引言随着科技的飞速发展，人工智能已经渗透到我们生活的各个领域。而在人工智能的众多领域中，机器学习以其强大的数据处理能力和智能决策能力受到了广泛关注。本文将向您介绍机器学习的概念、工作原理、应用领域以及未来的发展前景。一、什么是机器学…...

编程日记 2023/8/23 6:55:29

ES搭建集群

一、创建 elasticsearch-cluster 文件夹创建 elasticsearch-7.8.0-cluster 文件夹，在内部复制三个 elasticsearch 服务。然后每个文件目录中每个节点的 config/elasticsearch.yml 配置文件 node-1001 节点 #节点 1 的配置信息： #集群名称&#xff0…...

编程日记 2023/8/23 6:54:26

# Lua与C++交互（二）———— 交互

C 调用lua 基础调用再来温习一下 myName “beauty girl” C想要获取myName的值，根据规则，它需要把myName压入栈中，这样lua就能看到；lua从堆栈中获取myName的值，此时栈顶为空；lua拿着myName去全局表中查…...

编程日记 2023/8/23 6:53:25

机器人焊接生产线参数监控系统理解需求

机器人焊接生产线参数监控系统是以参数来反映系统状态并以直观的方式表现出来，及时了解被监视对象的状态和状态的变化情况。其主要目标是为了达到减少生产线的处理时间，降低故障率，缩短故障排除时间，从而提高生产线的生产效率 …...

编程日记 2023/8/23 6:52:24

前端基础（ES6 模块化）

目录前言复习 ES6 模块化导出导入解构赋值导入js文件 export default 全局注册局部注册前言前面学习了js，引入方式使用的是<script s"XXX.js">，今天来学习引入文件的其他方式，使用ES6 模块化编程，…...

编程日记 2023/8/23 6:51:23

第七章，文章界面

7.1添加个人专栏 <template><div class="blog-container"><div class="blog-pages"><router-view/><div class="col-md-3 main-col pull-left"><div cla…...

编程日记 2023/8/23 6:50:21

HJ102 字符统计

描述输入一个只包含小写英文字母和数字的字符串，按照不同字符统计个数由多到少输出统计结果，如果统计的个数相同，则按照ASCII码由小到大排序输出。数据范围：字符串长度满足 1≤len(str)≤1000 1≤len(str)≤1000 输入描述&a…...

编程日记 2023/8/23 6:49:20

Maven聚合项目（微服务项目）创建流程，以及pom详解

1、首先创建springboot项目作为父项目只留下pom.xml 文件，删除src目录及其他无用文件 2、创建子项目子项目可以是maven项目，也可以是springboot项目 3、父子项目关联 4、父项目中依赖管理 <?xml version"1.0" encoding"UTF-8&qu…...

编程日记 2023/8/23 6:48:19

演进之路:原生Android框架不好用 ---- HttpUrlConnect 和 Apache HTTPClient 第一版底层使用HTTPURLConnect 第二版 Square构建从Android4.4开始基本使用: val okhttp OkHttpClient()val request Request.Builder().url("http://www.baidu.com").buil…...

编程日记 2023/8/23 6:47:18

【Redis】——Redis基础的数据结构以及应用场景

什么是redis数据库 Redis 是一种基于内存的数据库，对数据的读写操作都是在内存中完成，因此读写速度非常快，常用于缓存，消息队列、分布式锁等场景。，Redis 还支持事务、持久化、Lua 脚本、多种集群方案（主…...

编程日记 2023/8/23 6:46:17

SpringBoot+WebSocket搭建多人在线聊天环境

一、WebSocket是什么？ WebSocket是在单个TCP连接上进行全双工通信的协议，可以在服务器和客户端之间建立双向通信通道。 WebSocket 首先与服务器建立常规 HTTP 连接，然后通过发送Upgrade标头将其升级为双向 WebSocket 连接。 WebSocket使得…...

编程日记 2023/8/23 6:45:16

推荐适用于不同规模企业的会计软件：选择最适合您企业的解决方案

高效的会计软件不仅可以协助企业进行财务管理，做出科学的财务决策，还可以对企业数字化转型提供助力。不同规模的企业需要根据其特定需求选择适合的会计软件。那么有什么适合不同规模企业的会计软件推荐吗？ 小型企业的选择对于小型企业而言&…...

编程日记 2023/8/23 6:44:15

Apache Zookeeper架构和选举机制

ZooKeeper是一个开源的分布式协调服务，旨在解决分布式系统中的一致性、配置管理、领导者选举等问题。它由Apache软件基金会维护，是Hadoop生态系统的一部分，被广泛用于构建高可用、可靠和具有一致性的分布式应用程序和服务。 ZooKeeper提供了一个层次化的命名空间，类似于文…...

编程日记 2023/8/23 6:43:13

【Java学习笔记】Arrays类

Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...

编程新知 2025/10/7 1:33:22

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据准备一个容器,例如: …...

编程新知 2025/10/16 13:27:36

《通信之道——从微积分到 5G》读书总结

第1章绪论 1.1 这是一本什么样的书通信技术，说到底就是数学。那些最基础、最本质的部分。 1.2 什么是通信通信发送方接收方承载信息的信号解调出其中承载的信息信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...

编程新知 2025/10/17 7:57:55

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/10/10 9:55:46

苍穹外卖--缓存菜品

1.问题说明用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路通过Redis来缓存菜品数据，减少数据库查询操作。缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/10/15 9:09:57

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2025/10/4 11:20:42

docker 部署发现spring.profiles.active 问题

报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。船舶装配过程中的挑战与需求挑战 (1…...

编程新知 2025/10/2 4:37:55

【Go语言基础【13】】函数、闭包、方法

文章目录零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...

编程新知 2025/9/12 8:21:45

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/17 17:28:25

目录

一，BOM模型

1.1，BOM可实现功能

二，Window对象的常用属性

2.1，Window对象的常用方法

2.1-1，open()和close()方法

三，History对象

四，Location对象

五，Document对象的常用方法

六，定时函数

6.1，清除函数

七，写了一个小游戏 （模拟小球移动）

最后

相关文章：

七，写了一个小游戏（模拟小球移动）