JavaScriptBOM操作

程序猿欧文 2021-02-23 16:03:29
java 开源中国 操作 javascriptbom


       BOM(浏览器对象模型)主要用于管理浏览器窗口,它提供了大量独立的、可以与浏览器窗口进行互动的功能,这些功能与任何网页内容无关。浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。

1.1使用window对象

window对象是BOM的核心,代表浏览器窗口的一个实例。在全局作用域中声明的所有变量和函数也是window对象的属性和方法。

1.1.1 访问浏览器窗口

通过window对象可用访问浏览器窗口。

浏览器对象简单说明如下:

window

客户端JavaScript中的顶层对象。

navigator

包含客户端有关浏览器的信息。

screen

包含客户端显示屏的信息。

history

包含浏览器窗口访问过的URL信息。

location

包含当前网页文档的URL信息。

document

包含整个HTML文档,可被用来发访问文档内容,及其所有页面元素。

1.1.2全局作用域

客户端JavaScript代码都在全局上下文环境中运行,window对象提供了全局作用域。

下面用法:

var a = '我是程序员';window.b = 'window.b';c = '我喜欢js';document.write(delete window.a);document.write(delete window.b);document.write(delete window.c + '<br>');document.write(window.a);document.write(window.b);document.write(window.c);

使用var语句声明全局变量,window会为这个属性定义一个名为‘configgurable’的特性。

1.1.3 使用系统测试方法

window对象定义了3个人机交互的接口方法:

  1.  alert():简单的提示对话框,由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。

  2.  confirm():简单的提示对话框,由浏览器向用户弹出提示性信息。不过该方法弹出的对话框包含两个按钮,‘确认’和‘取消’。

  3.  prompt():弹出提示对话框,可以接收用户输入的信息,并把用户输入的信息返回。

用法1:

var user = prompt('请输入你的用户名:');if (!!user) {var ok = confirm('你输入的用户名为:\n' + user + '\n请确认。');if (ok) {document.write('欢迎您:\n' + user);} else {user = prompt('请重新输入你的用户名:');document.write('欢迎您:\n' + user);}} else {user = prompt('请输入你的用户名:');}

       这3个仅接收纯文本信息,用户只能使用空格、换行符和各种符号来格式化提示对话框中的显示文本。不同浏览器对于这3个对话框的显示效果略有不同。

用法2

window.alert = function (title, info) {var box = document.getElementById('alert_box');var html = '<dl><dt>' + title + '</dt><dd>' + info + '</dd><\/dl>';if (box) {box.innerHTML = html;box.style.display = 'block';} else {var div = document.createElement('div');div.id = 'alert_box';div.style.display = 'block';document.body.appendChild(div);div.innerHTML = html;}}alert('我是程序员', '我喜欢Js!');

1.1.4 控制窗口位置

       使用window对象的moveTo()moveBy()方法可以将窗口精确地移动到一个新位置。这两个方法接收两个参数,其中moveTo()接收的是新位置的x和y坐标值,而moveBy()接收的是在水平和垂直方向上移动的像素数。

下面用法:

window.moveTo(0, 0);window.moveBy(0, 100);window.moveTo(200, 300);window.moveBy(-50, 0);

1.1.5 使用定时器

window对象包含4个定时器专用方法,使用他们可以实现倒霉定时运行,避免连续运行。就可以设计动画。

1. setTimeout()方法

定义:

setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

语法:

var o=setTimeout(code,millisec)

参数:

code (必需。要延时执行的代码字符串。)
millisec 必需。在执行代码前需等待的毫秒数。)


下面用法:

var o = document.getElementsByTagName('body')[0].childNodes;for (var i = 0; i < o.length; i++) {o[i].onmouseover = function (i) {return function () {f(o[i]);}}(i);}function f(o) {var out = setTimeout(function () {document.write(o.tagName);}, 500);}

2. clearTimeout()方法

定义:

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

语法:

clearTimeout(id_of_settimeout)

参数:

id_of_settimeout(由setTimeout()返回的ID值。该值标识要取消的延迟执行代码块。)

下面用法:

var o = document.getElementsByTagName('body')[0].childNodes;for (var i = 0; i < o.length; i++) {o[i].onmouseover = function (i) {return function () {f(o[i]);}}(i);o[i].onmouseout = function (i) {return function () {clearTimeout(o[i].out);}}(i);}function f(o) {o.out = setTimeout(function () {document.write(o.tagName);}, 500);}

3. Setlnterval()方法

定义:

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

setIn.........

版权声明
本文为[程序猿欧文]所创,转载请带上原文链接,感谢
https://my.oschina.net/mikeowen/blog/4960703

  1. Spring can still play like this! Ali's new spring product has successfully overturned my understanding of spring!
  2. IntelliJ idea can also draw mind maps. It's really the strongest ide!
  3. JavaScript performance optimization [inline cache] V8 engine features
  4. linux 配置java环境
  5. linux find 查找文件
  6. 深入理解 Web 协议 (三):HTTP 2
  7. IntelliJ IDEA 相关问题记录
  8. Deep understanding of Web protocol (3): http 2
  9. 深入理解 Web 协议 (三):HTTP 2
  10. 腾讯IEG开源AI SDK:自动化测试吃鸡、MOBA类游戏
  11. Mysql Command
  12. Configuring Java environment with Linux
  13. Find files in Linux
  14. docker-Dockerfile 创建镜像
  15. Redis Cluster
  16. 深入理解 Web 协议 (三):HTTP 2
  17. JavaScriptBOM操作
  18. JavaScriptBOM操作
  19. Deep understanding of Web protocol (3): http 2
  20. Record of IntelliJ idea related problems
  21. Deep understanding of Web protocol (3): http 2
  22. Tencent IEG open source AI SDK: automatic testing of chicken eating and MoBa games
  23. Mysql Command
  24. Docker dockerfile create image
  25. Redis Cluster
  26. 死磕Spring之IoC篇 - 文章导读
  27. Deep understanding of Web protocol (3): http 2
  28. JavaScript BOM operation
  29. JavaScript BOM operation
  30. 死磕Spring之IoC篇 - 文章导读
  31. k8s node 操作与维护
  32. k8s 证书更新
  33. 【Java面试题第三期】JVM中哪些地方会出现内存溢出?出现的原因是什么?
  34. HashMap连环问你能答出几道?
  35. k8s-cronjob
  36. k8s-cert
  37. 头条面试官:说说Kafka的消费者提交方式,怎么实现的
  38. 什么是HTTPS以及如何实施HTTPS?
  39. Spring: an introduction to IOC
  40. Spring: an introduction to IOC
  41. Operation and maintenance of k8s node
  42. K8s certificate update
  43. vue使用sdk进行七牛上传
  44. k8s-dns
  45. JavaScript 邮箱验证 - 正则验证
  46. k8s-dashboard
  47. HashMap连环问你能答出几道?
  48. Where does memory overflow occur in the JVM? What are the reasons for this?
  49. How many questions can you answer?
  50. k8s-cronjob
  51. spring注解--Transactional
  52. k8s-cert
  53. Will the Spring Festival holiday be extended to February 27 in 2021? Here comes the response
  54. Headline Interviewer: talk about Kafka's consumer submission method, how to achieve it
  55. 【k8s集群】搭建步骤
  56. k8s-kubeadm
  57. k8s-etcd
  58. What is HTTPS and how to implement it?
  59. Java中使用HashMap改进查找性能
  60. maven发布jar包运行时找不到类问题