JavaScript 浏览器对象

BOM与DOM操作详解

最新推荐文章于 2020-06-21 10:13:09 发布

转载最新推荐文章于 2020-06-21 10:13:09 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jeco-li/p/10146890.html

文章标签：

#javascript #ViewUI

本文深入探讨了浏览器对象模型(BOM)与文档对象模型(DOM)的基本概念及应用，包括如何通过BOM操作浏览器环境，如窗口、框架、位置等，以及如何使用DOM操作网页内容，例如修改元素、样式和事件监听。此外，还提供了具体示例代码，展示如何实现页面跳转等常见操作。

bom 把浏览器看成一个对象，是操作浏览器

dom是操作浏览器的内容

页面的文档对象
console.log(window.document);
浏览器的框架
console.log(window.frames);
浏览器的信息
console.log(window.navigator);
屏幕的信息
console.log(window.screen);

href属性   控制浏览器地址内容
reload    刷新页面
reload(true)    刷新页面，不带缓存
assign     加载新的页面
replace（） 加载新的页面不会在历史记录留下记录
connsole.log(window.locationn);
console.log(window.history);


======================================================

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button>按钮</button>
<button onclick="func()">跳转到红页面</button>



</body>
</html>


================================

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button>按钮</button>
<button onclick="func()">跳转到红页面</button>



</body>
</html>


================================

function func(){
    console.log("点我干嘛")
//  跳转到red。html
//  window.location.href = "red.html"
//    window.location.reload()
    window.location.assign("red.html")
}
console.log(window.document);
console.log(window.frames);
console.log(window.navigator);
console.log(window.screen);
console.log(window.locationn);
console.log(window.history);
console.log(window,location)