【JavaScript】DOM之BOM
BOM
1.BOM是什么
提供了独立页面内容，与浏览器相关的一系列对象，管理窗口之间通信
2.Window对象
具有双重角色，对象即是允许JS访问浏览器窗口的一个对象，和ECMAScript规范中的Global全局对象，在浏览器运行JS逻辑时，在全局作用域定义的对象，变量和函数
<body>
<form action="#">
<input type="text" id="username">
<input type="submit">
</form>
<script>
var form = document.forms[0];
form.addEventListener('submit',function (event) {
console.log('该表单已被提交');
});
</script>
</body>window对象的属性
<script>
// BOM中其他对象是作为window对象的属性存在
console.log(window.navigator);
console.log(window.location);
console.log(window.history);
console.log(window.document);
console.log(window);
// window对象的self属性-表示window对象本身(是只读属性)
console.log(window.self);// 还是window对象
console.log(window.innerWidth, window.innerHeight);
// window对象的innerWidth和innerHeight - 浏览器窗口的内部宽度和高度
</script>window对象的方法
<style>
#qh {
width: 300px;
height: 200px;
border: 1px solid black;
display: none;
}
</style>
</head>
<body>
<!-- 点击按钮时，打开提示框 -->
<button id="btn">按钮</button>
<div id="qh"></div>
<script>
// 提示框
// window.alert('xxxx');
// 确定框
// var flag = window.confirm('你确定退出吗？');
// alert(flag);
// 输入框
/*var result = window.prompt('请输入你的用户名:');
alert(result);*/
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
var dialog = document.getElementById('qh');
dialog.style.display = 'block';
});
/*
* window.setTimeout()和window.clearTimeout()方法
* 该组方法表示延迟执行
* window.setInterval()和window.clearInterval()方法
* 该组方法表示循环(周期)执行
*/
</script>Navigator对象
<body>
<script>
console.log('浏览器代码名: ' + navigator.appCodeName);
console.log('浏览器名称: ' + navigator.appName);
console.log('浏览器平台和版本信息: ' + navigator.appVersion);
console.log('运行浏览器操作系统平台: ' + navigator.platform);
console.log(navigator.userAgent);
</script>
</body>定时器
延时执行
setlnterval（）方法设置个定时器，将该定时器只执行一次函数
`<script>
console.log('this is message...');
/*
setTimeout(function, delay)方法
* 设置个定时器
* 参数
function-表示延迟执行的代码逻辑
delay-表示延迟执行时间，单位为毫秒
* 返回值-表示当时器的标识
* 注意-打乱代码默认的顺序执行流程
*/
var t = setTimeout(function(){
console.log('you my timeout...');
},10000);
// clearTimeout(t);
console.log('you my message too...');
</script>`
周期执行
以setlnterval()方法，重复调用个函数或执行段代码
<script>
console.log('you my message...');
/*
setInterval(function, delay)方法
* 设置个周期执行的定时器
*
function - 表示延迟执行的代码逻辑
delay - 表示延迟执行的时间，单位为毫秒
* 返回值 - 表示当前定时器的标识
*/
/*setInterval(function(){
console.log('you my interval...');
},1000);*/
/*function fun(){
console.log('you my interval...');
setTimeout(fun,1000);
}
fun();*/
(function fun(){
console.log('you my interval...');
setTimeout(fun,1000);
// setTimeout(arguments.callee,1000);
})();
console.log('this is message too...');
</script>【JavaScript】DOM之BOM的更多相关文章
- 前端学习 之 JavaScript DOM 与 BOM
一. DOM介绍 1. 什么是DOM? DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的其实就是为了能让js操作html元素而制定的一个规范. DOM就 ...
- javascript、ECMAScript、DOM、BOM关系
ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因 ...
- 理清javascript的相关概念 DOM和BOM
javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...
- WEB 技术分类 Javascript DOM(Element Node) BOM
Web technology for developers Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范 ...
- 【JavaScript】DOM和BOM之我的理解
2018年12月17日 一.我们能够对html文档和浏览器做的操作 (一)html文档 增.删.改.可以在html中增加.删除.改动元素 (二)浏览器 地址栏:输入.修改地址 历史记录:前进.后退.跳 ...
- Javascript的组成——EMACScript、DOM、BOM
EMACScript:一种规范,JS必须准守它的约定,JS的核心. DOM:文档对象模型,W3C标准,JS访问HTML文档的接口. BOM:浏览器对象模型,没有统一的标准.JS访问浏览器的接口. EM ...
- JAVAScript中DOM与BOM的差异分析
JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...
- javascript学习笔记 BOM和DOM详解
js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...
- 关于JavaScript的DOM和BOM
本文探讨JavaScript的三大部分中的两个部分,DOM和BOM. DOM介绍 DOM,全称Document Object Model,即文档对象模型.它 是W3C的一个标准,定义了一个对文档操作的 ...
- 前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
随机推荐
- Git-Runoob：Git 创建仓库
ylbtech-Git-Runoob:Git 创建仓库 1.返回顶部 1. Git 创建仓库 本章节我们将为大家介绍如何创建一个 Git 仓库. 你可以使用一个已经存在的目录作为Git仓库. git ...
- leetcode 441.排列硬币（python）
1.题目描述 你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币. 给定一个数字 n,找出可形成完整阶梯行的总行数. n 是一个非负整数,并且在32位有符号整型的范 ...
- Cloudera-JDBC-Driver-for-Impala
Cloudera-JDBC-Driver-for-Impala-Install-Guide-2-5-5.pdf https://github.com/FlowerBirds/flowerbirds.g ...
- oracle expdp/impdp/可传输表空间
oracle expdp/impdp/可传输表空间/及一些参数 Oracle data pump 导出操作能够将表.索引.约束.权限.PLSQL包.同义词等对象从数据库导出,并将它们保存在一种非文本格 ...
- Java面试题全集（中）
这部分主要是与Java Web和Web Service相关的面试题. 96.阐述Servlet和CGI的区别? 答:Servlet与CGI的区别在于Servlet处于服务器进程中,它通过多线程方式运行 ...
- java 多线程并发问题总结
java 多线程并发主要通过关键字synchronized实现 Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问 ...
- python+selenium操作cookie
WebDriver提供了操作Cookie的相关方法,可以读取.添加和删除cookie信息. WebDriver操作cookie的方法: get_cookies(): 获得所有cookie信息. get ...
- Java实验报告(一)
1.水仙花数 public class test1{ public static void main(String[] args){ for(int num=100;num<1000;num++ ...
- Eclipse使用jdbc连接MySql数据库报：java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)
在使用eclipse连接mysql数据库时报异常: java.sql.SQLException: Access denied for user 'root'@'localhost' (using pa ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...