JavaScript BOM operation

The sky in the dark 2021-02-23 15:41:58
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 Space A newline and All kinds of symbols to Formatting the display 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 .

setInterval() Methods will call functions all the time , until clearInterval() Called or window closed . from setInterval() Back to ID Value can be used as clearInterval() Method parameters .

grammar :

setInterval(code,millisec[,"lang"])

Parameters :

code( It's necessary . Function to call or code string to execute .)

millisec( must . To execute or call periodically code Time interval between , In milliseconds .)

The following usage :

var t = document.getElementsByTagName('input')[0];
var i = 959;
var out = setInterval(f, /*24 * 60 * 60 */ 1000);
function f() {
t.value = i--;
if (i <= 0) {
crearTimeout(out);
document.write(' The Winter Olympics have arrived !');
}
}

        In animation design ,setInterval() The method is suitable for Uncertain time Continue to perform a certain action within a certain period of time , and setInterval() The method is suitable for performing animations that can determine the start and end points in a limited time .

1.2 Use navigator object

navigator Object contains the basic information of the browser , Such as the name 、 Version and system, etc . Use its properties to read basic client information .

1.2.1 Browser detection method

There are many ways to detect browsers .

Common methods include 2 Kind of :

Feature detection

String detection

1.  Feature detection

Feature detection method is based on whether the browser supports specific functions to determine the way of operation .

The following usage :

if (document.getElementsByName) {
var a = document.getElementsByName('p');
} else if (document.getElementsByTagName) {
var a = document.getElementsByTagName('p');
}

2.  character string Detection method

Use the user agent string to detect the browser type .

The following usage :

var s = window.navigator.userAgent;
console.log(s);

1.2.2 Test plug-in

have access to navigator Object's plugins attribute Realization . and plugins Is an array .

Each item in the array contains the following properties :

name

The name of the plug-in .

description

Description of the plug-in .

filename

The file name of the plug-in .

length

What the plug-in does MIME type .

The following usage :

function hasPlugin(name) {
name = name.toLowerCase();
for (var i = 0; i < navigator.plugins.length; i++) {
if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
return true;
}
}
return false;
}
document.write(hasPlugin('Flash'));
document.write(hasPlugin('QuickTime'));
document.write(hasPlugin('Java'));

1.3 Use location object

location object Store information about the location of the current page , Represents... Of the currently displayed document Web Address . Use location object , Combined with string method, we can extract URL The parameter value of the query string in .

usage 1:

var queryString = function () {
var q = location.search.substring(1);
var a = q.split('&');
var o = {};
for (var i = 0; i < a.length; i++) {
var n = a[i].indexOf('=');
if (n == -1) continue;
var v1 = a[i].substring(o, n);
var v2 = a[i].substring(n + 1);
o[v1] = unescape(v2);
}
return o;
};
var f1 = queryString();
for (var i in f1) {
document.write(i + '=' + f1[i]);
}

usage 2 The jump page .

location = 'http://www.bj-xinhua.com/?bdpz';

1.4 Use history object

      history object Store the browsing history of the browser window , adopt window Object's history Property to access the object . actually ,history Object to store the most recently accessed 、 Limited entry URL Information . In order to protect the security and privacy of client browsing information ,history Object prohibition Js The script directly operates on the access information .

history Object allows the use of length Property in the read list URL The number of , And can call back()、forward() and go() Method Access... In the array URL.

  1. back(): Go back to the previous URL.

  2. forward(): Visit the next URL.

  3. go(): This method is flexible , It can determine the accessibility based on parameters URL.

  • This parameter is a positive integer , The browser will move forward in the history list ; This parameter is a negative integer , The browser moves back in the history list ;
  • The parameter is a string , be history Object to retrieve the... Containing the string from the browsing history URL, And access the first URL.

The following usage :

frames[1].history.back();

1.5 Use screen object

screen object Store client screen information , This information can be used to detect the basic configuration of the client hardware . Meet the display requirements of different users .

The following usage :

function center(url) {
var w = screen.availWidth / 2;
var h = screen.availHeight / 2;
var t = (screen.availHeight - h) / 2;
var l = (screen.availWidth - w) / 2;
var p = 'top=' + t + ',left=' + l + ',width=' + w + ',height=' + h;
var win = window.open(url, 'url', p);
win.focus();
}
center('file:///D:/jsBOM%E6%93%8D%E4%BD%9C/11history.html');

1.6 Use document object

In the browser window , Every widow Objects will contain a document attribute , This property is displayed in the reference window HTML Document document object .

1.6.1 Dynamically generate document content

The following usage :

window.onload = function () {
document.body.onclick = f;
}
function f() {
parent.frames[1].document.open();
parent.frames[1].document.write('<h2> I'm a programmer </h2>');
parent.frames[1].document.close();
}
版权声明
本文为[The sky in the dark]所创,转载请带上原文链接,感谢
https://javamana.com/2021/02/20210223152859509Z.html

  1. docker入门到熟练
  2. Java之HTTP网络编程(一):TCP/SSL网页下载
  3. Introduction to docker
  4. HTTP network programming in Java (1): TCP / SSL web page download
  5. mysql 的ACID以及隔离级别
  6. Acid and isolation level of MySQL
  7. Java序列化对字段名的影响
  8. The influence of Java serialization on field names
  9. Redis 日志篇:系统高可用的杀手锏
  10. Java中把一个对象复制给另外一个对象引发的思考
  11. Java之HTTP网络编程(一):TCP/SSL网页下载
  12. Redis log: the killer of system high availability
  13. Thinking about copying one object to another in Java
  14. HTTP network programming in Java (1): TCP / SSL web page download
  15. 数据库--oracle安装配置(本地安装的步骤及各种问题解决方案)
  16. 从事Java9年,27天熬夜把近年遇到的面试题收录成册全网开源!
  17. Database -- Oracle installation configuration (local installation steps and various problem solutions)
  18. Engaged in Java for 9 years, 27 days stay up late, the interview questions encountered in recent years included into a volume, the whole network open source!
  19. Java序列化 / 调用 Wildfly 服务接口异常:EJBCLIENT000409
  20. docker-compose部署Estack
  21. Redis 日志篇:系统高可用的杀手锏
  22. Java中把一个对象的值复制给另外一个对象引发的思考
  23. Java serialization / call wildfly service interface exception: ejbclient000409
  24. Docker compose deploy stack
  25. Mac下查看已安装的jdk版本及其安装目录
  26. Redis log: the killer of system high availability
  27. mybatis映射xml配置文件报错:<statement> or DELIMITER expected, got ‘id‘
  28. Thinking about copying the value of one object to another in Java
  29. IntelliJ IDEA 还能画思维导图,果然最强 IDE!
  30. vue使用sdk进行七牛云上传
  31. IntelliJ IDEA 还能画思维导图,果然最强 IDE!
  32. Spring原来还可以这么玩!阿里新产Spring全线宝典成功颠覆了我对Spring的认知!
  33. View the installed JDK version and its installation directory under mac
  34. Error in mybatis mapping XML configuration file: < statement > or delay expected, got 'ID‘
  35. IntelliJ IDEA 还能画思维导图,果然最强 IDE!
  36. Javascript性能优化【内联缓存】 V8引擎特性
  37. IntelliJ idea can also draw mind maps. It's really the strongest ide!
  38. Vue uses SDK to upload Qi Niu cloud
  39. IntelliJ idea can also draw mind maps. It's really the strongest ide!
  40. 深入理解 Web 协议 (三):HTTP 2
  41. Spring can still play like this! Ali's new spring product has successfully overturned my understanding of spring!
  42. IntelliJ idea can also draw mind maps. It's really the strongest ide!
  43. JavaScript performance optimization [inline cache] V8 engine features
  44. linux 配置java环境
  45. linux find 查找文件
  46. 深入理解 Web 协议 (三):HTTP 2
  47. IntelliJ IDEA 相关问题记录
  48. Deep understanding of Web protocol (3): http 2
  49. 深入理解 Web 协议 (三):HTTP 2
  50. 腾讯IEG开源AI SDK:自动化测试吃鸡、MOBA类游戏
  51. Mysql Command
  52. Configuring Java environment with Linux
  53. Find files in Linux
  54. docker-Dockerfile 创建镜像
  55. Redis Cluster
  56. 深入理解 Web 协议 (三):HTTP 2
  57. JavaScriptBOM操作
  58. JavaScriptBOM操作
  59. Deep understanding of Web protocol (3): http 2
  60. Record of IntelliJ idea related problems