JavaScript BOM operation

Program ape Owen 2021-02-23 16:04:54
javascript bom operation


       BOM( Browser object model ) Mainly used to manage browser windows , It provides a lot of independent 、 Functions that can interact with browser windows , These features have nothing to do with any web content . Browser window window The object is BOM The top object of , Other objects are children of the object .

1.1 Use window object

window The object is BOM At the heart of , Represents an instance of a browser window . All variables and functions declared in the global scope are also window Properties and methods of objects .

1.1.1  Access browser window

adopt window Objects can be accessed in the browser window .

A brief description of the browser object is as follows :

window

client JavaScript Top objects in .

navigator

Contains client information about the browser .

screen

Contains information for the client display .

history

Contains browser window access to URL Information .

location

Contains the document of the current web page URL Information .

document

Including the whole HTML file , Can be used to access document content , And all of its page elements .

1.1.2 Global scope

client JavaScript The code runs in a global context ,window Object provides global scope .

The following usage :

var a = ' I'm a programmer ';window.b = 'window.b';c = ' I like 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);

Use var Statement to declare global variables ,window For this property, a ‘configgurable’ Characteristics of .

1.1.3  Use system testing methods

window Object defines 3 Personal computer interaction Interface method :

  1.  alert(): Simple prompt dialog , Prompt information will pop up to users by browser . The method contains an optional prompt parameter .

  2.  confirm(): Simple prompt dialog , Prompt information will pop up to users by browser . However, the dialog box that pops up with this method contains two buttons ,‘ confirm ’ and ‘ Cancel ’.

  3.  prompt(): The prompt dialog box pops up , It can receive information from users , And return the user's input information to .

usage 1:

var user = prompt(' Please enter your user name :');if (!!user) {var ok = confirm(' The user name you entered is :\n' + user + '\n Please make sure the .');if (ok) {document.write(' Welcome :\n' + user);} else {user = prompt(' Please re-enter your user name :');document.write(' Welcome :\n' + user);}} else {user = prompt(' Please enter your user name :');}

        this 3 Receive only plain text messages , Users can only use spaces 、 Line breaks and various symbols are used to format the displayed text in the prompt dialog box . Different browsers for this 3 The two dialog boxes display slightly different .

usage 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(' I'm a programmer ', ' I like Js!');

1.1.4 Control window position

        Use window Object's moveTo() and moveBy() Method can precisely move the window to a new location . These two methods take two parameters , among moveTo() It's in the new location x and y Coordinate value , and moveBy() Received is the number of pixels moving horizontally and vertically .

The following usage :

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

1.1.5 Use timer

window Object contains 4 This is a timer specific method , Using them, you can run it at a bad time , Avoid continuous operation . You can design animation .

1. setTimeout() Method

Definition :

setTimeout() Method is used to call functions or compute expressions after specified milliseconds. .

grammar :

var o=setTimeout(code,millisec)

Parameters :

code ( It's necessary . Code string to delay execution .)
millisec It's necessary . The number of milliseconds to wait before executing the code .)


The following usage :

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() Method

Definition :

clearTimeout() Method can be cancelled by setTimeout() Method set timeout.

grammar :

clearTimeout(id_of_settimeout)

Parameters :

id_of_settimeout( from setTimeout() Back to ID value . This value identifies the block of deferred execution code to cancel .)

The following usage :

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() Method

Definition :

setInterval() Method according to the specified period ( In milliseconds ) To call a function or evaluate an expression .

setIn.........

版权声明
本文为[Program ape Owen]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223160139233q.html

  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