【JavaScript】DOM之BOM
2024-09-05 21:27:13
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>最新文章
- C# IGUID的生成
- HBase单个RegionServer的region数目上限
- Arduino101学习笔记（四）—— 数字IO
- Swift语言—常量、变量、类型赋值
- linux 客户端 Socket 非阻塞connect编程
- Linux 2.6 内核实时性分析 (完善中...)
- linux下使用split 来分割大文件
- bootstrap基础知识
- 用xftp传送避免乱码问题
- linux性能优化cpu 磁盘IO MEM
- QQ互联申请及配置
- [Swift]UIKit学习之警告框:UIAlertController和UIAlertView
- 开源库BaseRecyclerViewAdapterHelper
- [WEB]绕过安全狗与360PHP一句话的编写
- Project Structure详解
- Python turtle绘制阴阳太极图代码解析
- 某公司面试java试题之【一】，看看吧，说不定就是你将要做的题
- [20180408]那些函数索引适合字段的查询.txt
- springboot找不到主类
- hdu 3415(单调队列) Max Sum of Max-K-sub-sequence