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

JavaScript的BOM编程

BOM编程

what

通过JS代码操作浏览器,js的编程就是面向对象编程,最多的就是面向标签对象编程

BOM:Browser Object Model 浏览器对象模型,以window对象为依托,表示浏览器窗口以及页面可见区域

学习BOM操作,就是学习对浏览器窗口的操作

  • History:历史管理对象
  • Location:地址对象
  • DOM:文档对象——document
  • window:整个html页面的顶层对象,所有的内容都是window的成员,window可以省略,表示整个浏览器窗口,所有的全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下

Browser对象

名称描述
window浏览器窗口
location包含关于当前 URL 的信息
history包含了用户已浏览的 URL 的信息
event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态(周围的整体的环境信息!)
document代表给定浏览器窗口中的 HTML 文档
统一资源占位符/定位符

网址:https://www.runoob.com/jsref/obj-location.html#aaa

​ http://127.0.0.1:8848/project/02-javascript/js-07/bom.html?name=zhangsan&age=18&address=郑州#aaa

  1. 网络传输协议:http:// (不加密) https://(加密)

  2. 域名=IP地址+端口号:www.runboob.com 80端口为默认端口,可省略

    IP地址:定位主机 127.0.0.1

    端口号:相当于系统中每个软件的IP 8848

  3. 资源路径:/project/02-javascript/js-07/

  4. 分隔符:? 分隔路径与表单数据

  5. 表单数据:使用&连接 name=zhangsan&age=18&address=郑州

  6. 锚点:#aaa

1. Location对象

Location对象包含有关当前URL的信息

  • 属性
  1. hash:返回一个url的锚部分(从#开始)
  2. host:返回一个URL的主机名和端口号
  3. hostname:返回URL主机名
  4. href:返回一个完整的URL,改变当前页面的地址(有历史)
  5. pathname:返回URL路径名
  6. port:返回一个URL服务器使用的端口号
  7. protocol:返回一个URL协议
  8. search:返回一个URL的查询部分
<script>
    // 创建 a 标签并设置 href 属性
    var url = document.createElement('a');
    url.href = 'https://www.runoob.com/?s=python#test';
    console.log(url.href);      // https://www.runoob.com/?s=python
    console.log(url.protocol);  // https:
    console.log(url.host);      // www.runoob.com
    console.log(url.hostname);  // www.runoob.com
    console.log(url.port);      // (输出为空 - https 默认端口为 443)
    console.log(url.pathname);  // /
    console.log(url.search);    // en-US/search
    console.log(url.hash);      // #test
console.log(url.origin);    // https://www.runoob.com
</script>
  • 方法
    1. assign():载入一个新的文档,改变当前页面的地址(有历史)
    2. reload():重新加载当前页面
    3. replace():替换当前页面的地址(无历史)
2. History对象

History对象包含用户(在浏览器窗口中)访问过的URL。是window对象的一部分,可通过window.history属性对其进行访问

属性不带(),带()的都是方法

  • 属性

    • length:返回历史列表中的网址数
  • 方法

  • forward():前进

  • back():后退

  • go(): 1. go(value) 前进

​ 2. go(-value) 后退

​ 3. go(0) 刷新,等同于location里面的reload()方法——重新加载当前页面

<a href="http://www.baidu.com">百度</a>
		<button onclick="aaa()">前进</button>
		<button onclick="bbb()">后退</button>
		<script type="text/javascript">
			function aaa(){
				//前进
				//window.history.forward();
				//go(1) <==> forward();
				window.history.go(1);
			}
			function bbb(){
				//后退
				//window.history.back();
				//go(-1) <==> back();
				window.history.go(-1);
			}
			function ff(){
				//前进
				//window.history.forward();
				//写几代表前进几个页面
				window.history.go(2);
			}
			function bb(){
				//后退
				//window.history.back();
				window.history.go(-1);
				//写几代表后退几个页面
			}
		</script>
event事件对象

代表事件发生时周围的环境信息,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮的状态。

window对象常用方法

名称描述
alert显示自定义消息的对话框
confirm显示确认对话框
prompt显示输入对话框
setTimeout 重点经过指定毫秒值后计算表达式,并返回该事件对象
setInterval 重点每过一定时间间隔调用一次指定函数
close关闭当前浏览器窗口
1.confirm方法

一般用于判断,是否进行下一步的操作

<script>
        var aa=confirm("你确定要删除吗?");
        alert(aa);
</script>
2.setTimeout方法-延时器

指定毫秒数后调用函数或计算表达式

1秒=1000毫秒

基本格式(两种):

setTimeout(要调用的函数名称,延迟时间,参数);//该格式可以实现递归,自己调自己

setTimeout(function(){},5000)//在setTimeout中直接定义函数
  • 若要实现动态显示,即每个一秒页面出现一次变化,需要递归,自己调自己
3.clearTimeout方法

取消由setTimeout()方法设置的timeout

使用该方法时,需要先将setTimeout(要调用的函数名称,延迟时间,参数)用一个变量接收,后续才能用clearTimeout(变量名)接收。

4.setInterval方法 clearInterval()-定时器

按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval 每隔一定的时间执行方法。

clearInterval 关闭定时器

相关文章:

  • 前端页面什么是全屏嵌入/什么是局部嵌入
  • 费曼学习法7 - NumPy 数组的 “变形术”:形状变换与索引切片 (基础篇)
  • 当PHP遇上区块链:一场奇妙的技术之旅
  • 基于SSA-KELM-Adaboost(麻雀搜索优化的极限学习机自适应提升算法)的多输入单输出回归预测【MATLAB】
  • 如何用python将pdf转为text并提取其中的图片
  • js基础语法
  • 前端监控与埋点
  • Three.js 入门(辅助、位移、父子关系、缩放旋转、响应式布局)
  • VC++零基础入门之系列教程 【附录E MFC快速参考指南】
  • 20250212:ZLKMedia 推流
  • Visual Studio Code 远程开发方法
  • C#从入门到精通(35)—如何防止winform程序因为误操作被关闭
  • 為什麼使用不限量動態住宅IP採集數據?
  • 2024-2025 学年广东省职业院校技能大赛 “信息安全管理与评估”赛项 技能测试试卷(四)
  • Redis详解
  • 为AI聊天工具添加一个知识系统 之122 详细设计之63 实体范畴论和神经元元模型:命名法函子
  • MySQL 入门“鸡”础
  • 如何查看PostgreSQL的版本
  • Java常见设计模式(中):结构型模式
  • 375_C++_cloud手机推送,添加人脸告警信息到任务队列中,UploadAlarmPush是典型的工厂模式应用,为什么使用工厂模式完成这部分代码
  • 和平会谈两天后,俄对乌发动冲突爆发以来最大规模无人机袭击
  • 调查丨永久基本农田沦为垃圾堆场,整改为何成“纸面工程”?
  • 美国务卿与以色列总理通话,讨论加沙局势
  • 复旦建校120周年大型义诊举行,百余名专家服务市民超三千人次
  • 广药集团原董事长李楚源被“双开”:去年8月被查,曾多次发表争议言论
  • 淮安市车桥中学党总支书记王习元逝世,终年51岁