JavaScriptBOM操作

黑夜中的天空 2021-02-23 15:29:11
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()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval()方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。

语法:

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

参数:

code(必需。要调用的函数或要执行的代码串。)

millisec(必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。)

下面用法:

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('冬奥会已到!');
}
}

       在动画设计中,setInterval()方法适合在不确定的时间内持续执行某个动作,而setInterval()方法适合在有限的时间内执行可以确定起点和终点的动画。

1.2 使用navigator对象

navigator对象包含了浏览器的基本信息,如名称、版本和系统等。利用它的属性来读取客户端基本信息。

1.2.1 浏览器检测方法

浏览器检测的方法有多种。

常用方法包括2种:

特征检测法

字符串检测法

1. 特征检测法

特性检测法就是根据浏览器是否支持特定功能来决定操作的方式。

下面用法:

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

2. 字符串检测法

使用用户代理字符串检测浏览器类型。

下面用法:

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

1.2.2 检测插件

可以使用navigator对象的plugins属性实现。而plugins是一个数组。

该数组中的每一项都包含下列属性:

name

插件的名字。

description

插件的描述。

filename

插件的文件名。

length

插件所处理的MIME类型。

下面用法:

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 使用location对象

location对象存储当前页面与位置相关的信息,表示当前显示文档的Web地址。使用location对象,结合字符串方法可以抽取URL中查询字符串的参数值。

用法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]);
}

用法2跳转网页。

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

1.4 使用history对象

      history对象存储浏览器窗口的浏览历史,通过window对象的history属性可以访问该对象。实际上,history对象存储最近访问的、有限条目的URL信息。为了保护客户端浏览信息的安全和隐私,history对象禁止Js脚本直接操作这些访问信息。

history对象允许使用length属性读取列表中URL的个数,并可以调用back()、forward()和go()方法访问数组中的URL。

  1. back():返回到前一个URL。

  2. forward():访问下一个URL。

  3. go():该方法比较灵活,它能根据参数决定可访问的URL。

  • 该参数是正整数,浏览器就会在历史列表中向前移动;该参数是负整数,浏览器就会在历史列表中向后移动;
  • 参数为一个字符串,则history对象能够从浏览历史中检索包含该字符串的URL,并访问第一个检索到的URL。

下面用法:

frames[1].history.back();

1.5 使用screen对象

screen对象存储客户端屏幕信息,这些信息可以用来探测客户端硬件的基本配置。满足不同用户的显示要求。

下面用法:

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 使用document对象

在浏览器窗口中,每个widow对象都会包含一个document属性,该属性引用窗口中显示HTML文档的document对象。

1.6.1 动态生成文档内容

下面用法:

window.onload = function () {
document.body.onclick = f;
}
function f() {
parent.frames[1].document.open();
parent.frames[1].document.write('<h2>我是程序员</h2>');
parent.frames[1].document.close();
}
版权声明
本文为[黑夜中的天空]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/hjy0806/p/14432606.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