什么是BOM?
BOM(Browser Object Model)即浏览器对象模型,它为JavaScript提供了访问和操作浏览器窗口的方法和属性。BOM由多个对象组成,包括window、document、navigator、screen等。
window对象
window对象是BOM中最核心的对象之一,它代表整个浏览器窗口。我们可以使用window对象进行如下操作:
访问和设置窗口属性
console.log(window.innerWidth); // 获取窗口的内部宽度 console.log(window.innerHeight); // 获取窗口的内部高度 window.location.href = 'https://example.com'; // 设置当前页面的URL地址
操作窗口
window.open('https://example.com', '_blank'); // 打开一个新窗口并导航到指定网址 window.close(); // 关闭当前窗口
调用浏览器功能
window.alert('Hello world!'); // 弹出警告框 window.prompt('What is your name?'); // 弹出输入框 window.confirm('Are you sure?'); // 弹出确认框
document对象
document对象代表当前文档,在BOM中也是非常重要的对象。我们可以使用document对象进行如下操作:
访问和修改文档内容
console.log(document.title); // 获取文档标题 console.log(document.body.innerHTML); // 获取文档主体内容的HTML代码 document.title = 'New Title'; // 修改文档标题 document.body.innerHTML = '<h1>Hello world!</h1>'; // 修改文档主体内容
操作DOM
const element = document.getElementById('my-element'); // 获取指定ID的元素 element.style.backgroundColor = 'red'; // 修改元素样式 element.addEventListener('click', () => { // 添加点击事件监听器 console.log('Element clicked!'); });
navigator对象
navigator对象包含了浏览器的信息,如名称、版本、供应商等。我们可以使用navigator对象进行如下操作:
console.log(navigator.userAgent); // 获取浏览器用户代理字符串 console.log(navigator.appName); // 获取浏览器名称 console.log(navigator.appVersion); // 获取浏览器版本号
screen对象
screen对象代表屏幕信息,如分辨率、颜色深度等。我们可以使用screen对象进行如下操作:
console.log(screen.width); // 获取屏幕宽度 console.log(screen.height); // 获取屏幕高度 console.log(screen.colorDepth); // 获取颜色深度
总结
BOM提供了丰富的方法和属性来访问和操作浏览器窗口的各个部分,在前端开发中非常常用。熟练掌握BOM的基础知识对于进一步深入学习和开发具有重要的指导意义。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/2134