JavaScript中的BOM操作

简介: JavaScript中的BOM操作

@TOC

一、JavaScript

JavaScript = ECMAScript + DOM + BOM

  • DOM : 文档对象模型(document对象)
  • BOM : 浏览器对象模型

二、BOM 对象

  • window对象:全局对象
  • screen对象包含有关用户屏幕的信息
  • location对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面
  • history对象包含浏览器的历史
  • navigator对象包含有关访问者浏览器的信息

三、window对象

window对象是全局对象,所有在浏览器可以直接使用的方法,都是window对象
计时器方法
弹出框方法

// alert("hello,world!");// 弹窗
prompt("请输入你的的名字","猪小虎"); //prompt("提示信息","文本框内容");
confirm("确定是否删除");// 该弹框返回值是一个布尔值

四、location对象

1、location对象 - 属性返回当前页面的URL - :https://www.baidu.com/
2、location.hostname - 主机的域名 - www.baidu.com
3、location.pathname - 当前页面的路径和文件名 /s
4、location.port - 端口 - 8080
5、location.protocol - 协议 - https:

五、navigator对象

navigator.userAgent  检查当前设备,并在控制台输出

六、实战

1、猜数字游戏

2、水果列表删除提示功能


在这里插入图片描述

相关文章
|
27天前
|
缓存 JavaScript 前端开发
JavaScript中DOM操作:新手常犯错误与避免策略
【4月更文挑战第1天】本文介绍了JavaScript中DOM操作的基础和新手常犯错误,包括频繁查询DOM、不恰当的遍历、滥用innerHTML、忽视异步与DOM状态以及过度同步更新。建议包括缓存DOM引用、注意文本节点、慎用innerHTML以防止XSS、正确处理异步和批量更新。遵循最佳实践,开发者能提升代码质量和应用性能。
24 2
|
2月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
4天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
14 4
|
8天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
15天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
16 0
|
15天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
15 4
|
22天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
29天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
19 4
|
2月前
|
JavaScript 前端开发
JavaScript操作BOM简单案例
JavaScript操作BOM简单案例
9 1
|
2月前
|
JavaScript 前端开发
JavaScript操作BOM对象
JavaScript操作BOM对象
9 1