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

JavaScript基础（Dom操作）

news 2026/2/3 1:20:51

一，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

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...

编程新知 2026/1/26 5:25:25

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

Psychopy音频的使用

Psychopy音频的使用本文主要解决以下问题： 指定音频引擎与设备；播放音频文件本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器纯前端实现高延迟高流量帧率极低个人demo测试超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...

编程新知 2026/1/31 6:12:33

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载四、智能指针…...

编程新知 2026/1/31 6:12:22

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录一、SQL注入二、字符型SQL注入三、字符型注入与数字型注入四、源码分析五、渗透实战 1、渗透准备 2、SQL注入探测 （1）输入单引号 （2）万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2026/2/2 14:56:57

Kafka主题运维全指南：从基础配置到故障处理

#作者：张桐瑞文章目录主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1：主题删除失败。常见错误2：__consumer_offsets占用太多的磁盘。主题日常管理 …...

编程新知 2025/6/10 21:14:43

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具，专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑（如DBC、LDF、ARXML、HEX等），并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

编程新知 2026/1/24 16:26:07

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分三、代码实现3.1 Python实现3.2 Java实现3.3 C实现四、性能分析4.1 时间复杂度…...

编程新知 2026/1/25 15:30:14

LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》

🧠 LangChain 中 TextSplitter 的使用详解：从基础到进阶（附代码） 一、前言在处理大规模文本数据时，特别是在构建知识库或进行大模型训练与推理时，文本切分（Text Splitting） 是一个…...

编程新知 2025/10/10 9:24:44

目录

一，BOM模型

1.1，BOM可实现功能

二，Window对象的常用属性

2.1，Window对象的常用方法

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

三，History对象

四，Location对象

五，Document对象的常用方法

六，定时函数

6.1，清除函数

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

最后

相关文章：

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