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 :


client JavaScript Top objects in .


Contains client information about the browser .


Contains information for the client display .


Contains browser window access to URL Information .


Contains the document of the current web page URL Information .


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; = 'block';} else {var div = document.createElement('div'); = 'alert_box'; = '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 :


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 .


本文为[Program ape Owen]所创,转载请带上原文链接,感谢

  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包运行时找不到类问题