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. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  2. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  3. react-native版文字跑马灯
  4. React native text running lantern
  5. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  6. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  7. this.byId(SupplierForm).bindElement in SAP UI5
  8. SAP UI5 JavaScript文件的lazy load - 懒加载
  9. this.byId (SupplierForm).bindElement in SAP UI5
  10. Lazy load lazy load of SAP ui5 JavaScript files
  11. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  12. How to connect the ground gas to the micro front end?
  13. How to transform single / micro service application into serverless application
  14. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  15. Seven array methods for JavaScript you need to master in 2021
  16. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  17. Seven array methods for JavaScript you need to master in 2021
  18. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  19. Seven array methods for JavaScript you need to master in 2021
  20. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  21. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  22. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  23. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  24. 前端面试常考题:JS垃圾回收机制
  25. Frequently asked questions in front end interview: JS garbage collection mechanism
  26. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  27. Java之HTTP网络编程(一):TCP/SSL网页下载
  28. HTTP network programming in Java (1): TCP / SSL web page download
  29. Java之HTTP网络编程(一):TCP/SSL网页下载
  30. HTTP network programming in Java (1): TCP / SSL web page download
  31. 使用vite搭建vue项目
  32. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  33. 在 vue 中通过 express 连接数据库
  34. Using vite to build Vue project
  35. Display PDF file in component: Vue pdf
  36. Connecting database through express in Vue
  37. 2021届秋招哈啰出行前端面经(一面)
  38. vue使用sdk进行七牛云上传
  39. Javascript性能优化【内联缓存】 V8引擎特性
  40. Small true wireless smart headset evaluation: put intelligence into the ear
  41. The front end experience of the 2021 autumn recruitment
  42. Vue uses SDK to upload Qi Niu cloud
  43. 深入理解 Web 协议 (三):HTTP 2
  44. dhtmlxGantt如何重新排序任务
  45. JavaScript performance optimization [inline cache] V8 engine features
  46. 深入理解 Web 协议 (三):HTTP 2
  47. Deep understanding of Web protocol (3): http 2
  48. 深入理解 Web 协议 (三):HTTP 2
  49. How dhtmlxgantt reorders tasks
  50. 深入理解 Web 协议 (三):HTTP 2
  51. JavaScriptBOM操作
  52. JavaScriptBOM操作
  53. Deep understanding of Web protocol (3): http 2
  54. Deep understanding of Web protocol (3): http 2
  55. dhtmlxGantt甘特图重新排序任视频教程
  56. vue实现七牛云上传图片功能
  57. vue.js环境配置步骤及npm run dev报错解决方案
  58. Deep understanding of Web protocol (3): http 2
  59. JavaScript BOM operation
  60. JavaScript BOM operation