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://qdmana.com/2021/02/20210223152859509Z.html

  1. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  2. About webpack
  3. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  4. 详解vue静态资源打包中的坑与解决方案
  5. 一篇搞懂TCP、HTTP、Socket、Socket连接池
  6. 字节跳动2021前端技术岗发布+最新内部面试题
  7. Detailed explanation of Vue static resource packaging and Solutions
  8. Understanding TCP, HTTP, socket, socket connection pool
  9. 2008-2021 front end technical post release + latest internal interview questions
  10. 4. Vue基本指令
  11. 4. Vue basic instruction
  12. Java 发起 http 请求
  13. Java initiates HTTP request
  14. 网站由http升级为https图文教程
  15. Upgrade the website from HTTP to HTTPS
  16. 更简洁、更快速!腾讯云 Serverless 云函数创建流程再次升级!
  17. More concise and faster! Tencent cloud serverless cloud function creation process upgrade again!
  18. 混合开发入门 Vue结合Android/iOS开发仿京东项目App
  19. Hybrid development entry Vue combined with Android / IOS to develop app imitating Jingdong project
  20. 无缝对接 Tableau,这家月活跃用户 5000+ 的大型银行如何实现自助式分析?
  21. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  22. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  23. react-native版文字跑马灯
  24. React native text running lantern
  25. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  26. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  27. this.byId(SupplierForm).bindElement in SAP UI5
  28. SAP UI5 JavaScript文件的lazy load - 懒加载
  29. this.byId (SupplierForm).bindElement in SAP UI5
  30. Lazy load lazy load of SAP ui5 JavaScript files
  31. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  32. How to connect the ground gas to the micro front end?
  33. How to transform single / micro service application into serverless application
  34. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  35. Seven array methods for JavaScript you need to master in 2021
  36. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  37. Seven array methods for JavaScript you need to master in 2021
  38. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  39. Seven array methods for JavaScript you need to master in 2021
  40. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  41. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  42. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  43. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  44. 前端面试常考题:JS垃圾回收机制
  45. Frequently asked questions in front end interview: JS garbage collection mechanism
  46. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  47. Java之HTTP网络编程(一):TCP/SSL网页下载
  48. HTTP network programming in Java (1): TCP / SSL web page download
  49. Java之HTTP网络编程(一):TCP/SSL网页下载
  50. HTTP network programming in Java (1): TCP / SSL web page download
  51. 使用vite搭建vue项目
  52. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  53. 在 vue 中通过 express 连接数据库
  54. Using vite to build Vue project
  55. Display PDF file in component: Vue pdf
  56. Connecting database through express in Vue
  57. 2021届秋招哈啰出行前端面经(一面)
  58. vue使用sdk进行七牛云上传
  59. Javascript性能优化【内联缓存】 V8引擎特性
  60. Small true wireless smart headset evaluation: put intelligence into the ear