JavaScript操作BOM对象

简介: JavaScript操作BOM对象

一、BOM模型:浏览器对象模型



二、BOM实现的功能:


1.弹出新的浏览器窗口


2.移动关闭浏览器窗口以及调整窗口的大小。


3.页面的前进、后退。


三、Window常用的属性:


1.history:有关客户访问过的URL信息


2.location:有关当前URL信息


语法:window.属性名 = “属性值”,eg:

window.location=“http://www.bdqn.club”;



四、window里面常用的方法:


1.prompt:显示可以输入的对话框


2.alert:弹出框


3.confim:弹出一个确认对话框


4.close:关闭浏览器窗口(IE下面可以直接关闭,但是其他浏览器关闭不了非模式打开的窗口)


5.open:打开浏览器窗口


6.setTimeout:在指定的时间之后调用函数


7.setInterval:在指定周期内调用函数


注意:setTimeout和setInterval的区别就是,第一个在5s之后执行函数,第二个则是每隔5s执行一次函数



五、弹出窗体open


语法:


window.open(“弹出窗体的URL地址”,“窗体名称”,“窗体属性1,窗体属性2”)


eg:window.open(“index.html”,“标题”,“higth=500,width=500”);



六、关闭窗口:

window.close();



七、window里常用的事件:


1.onload():加载事件


2.onmouseover():鼠标移动到某元素上的事件


3.onclick():单击事件


4.onchange():改变事件



八、history对象:


1.back():加载history对象列表的前一个url


2.forword():加载history对象列表的后一个url


3.go():里面是一个数字参数,如果是1,则去下一个url,如果是-1,则去上一个url



九、location对象:


1.host:主机名和端口号


2.hostname:主机名


3.href:返回完整的url


4.reload():重新加载当前文档



十、document对象:


1.referrer:返回载入当前文档的URL


2.Url:返回当前文档的url



十一、当不是访问超链接的时候,document.referrer返回的是空字符串(" "),如果是通过超链接访问的话,document.referrer返回的不是空。



十二、document常用的方法:


1.getElementById():获取指定的id元素


2.getElementsByName():获取指定的name元素


3.getElementsByTagName():获取指定的标签名称元素


4.write():向文档中写入信息。



十三、JavaScript的内置对象:


1.Date():用于操作日期和时间


var date = new Date();


(1)获取当前年:getFullYear();


(2)获取当前月:getMonth();


(3)获取当前日:getDate();


(4)获取当前小时:getHours();


(5)获取当前分钟:getMinutes();


(6)获取当前秒:getSeconds();


2.Array():数组的关键词


3.String():用于支持对字符串的处理


4.Math():数学函数


(1)ceil:对数进行上舍入,eg:ceil(1.2),返回2;


(2)floor:对数进行下舍入,eg:floor(1.2),返回1;


(3)random:随机数,比如1-10的随机数,Math.random()*10;



十四、定时函数:


1.setTimeout(“调用的事件”,时间);

eg:5秒之后弹出来一个框,setTimeout(“alert(‘弹框’)”,5000);


2.setInterval(“调用的事件”,时间);

eg:每隔5秒弹出一个框:setInterval(“alert(‘弹框’)”,5000);



目录
相关文章
|
3天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
17 3
|
15天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
4天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
10天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
14 0
|
11天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4
|
12天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
12天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
14 4
|
15天前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`'1.2,2,3,4,5'`)转换为对象数组。通过使用`split(',')`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
|
JavaScript 前端开发 Go
JavaScript系列--BOM(二)
JavaScript系列--BOM(二)
130 0