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

JavaScript基础（Dom操作）

news 2025/8/25 0:33:13

目录

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

最后

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

http://www.lryc.cn/news/135353.html

相关文章：

  • .NET6.0 System.Drawing.Common 通用解决办法
  • k8s ingress (二）
  • 如何实现element UI中table操作栏更多按钮的展示与折叠？
  • SpringBoot（二）
  • python脚本——批量将word文档转换成pdf文件
  • 自然语言处理从入门到应用——LangChain：链（Chains）-[通用功能：链的保存（序列化）与加载（反序列化）]
  • 机器学习：开启智能时代的重要引擎
  • ES搭建集群
  • # Lua与C++交互（二）———— 交互
  • 机器人焊接生产线参数监控系统理解需求
  • 前端基础（ES6 模块化）
  • 第七章，文章界面
  • HJ102 字符统计
  • Maven聚合项目（微服务项目）创建流程，以及pom详解
  • Android OkHttp 源码浅析一
  • 【Redis】——Redis基础的数据结构以及应用场景
  • SpringBoot+WebSocket搭建多人在线聊天环境
  • 推荐适用于不同规模企业的会计软件：选择最适合您企业的解决方案
  • Apache Zookeeper架构和选举机制
  • 车联网TCU USB的配置和使用
  • Linux系统USB摄像头测试程序（三）_视频预览
  • 目标检测任务数据集的数据增强中，图像水平翻转和xml标注文件坐标调整
  • 系统架构的演变
  • IDC发布《亚太决策支持型分析数据平台评估》报告，亚马逊云科技位列“领导者”类别
  • C#之OpenFileDialog创建和管理文件选择对话框
  • Java中使用MongoTemplate 简单操作MongoDB
  • [Mac软件]Pixelmator Pro 3.3.12 专业图像编辑中文版
  • 吴恩达 GPT Prompting 课程
  • gpt3.5写MATLAB代码剪辑视频，使之保留画面ROI区域
  • 设计模式二十一：状态模式（State Pattern）