JavaScript-操作BOM对象

BOM（Browser Object Model）: 浏览器对象模型

浏览器介绍

JavaScript 和浏览器关系？
JavaScript 诞生就是为了能够让他在浏览器中运行！

内核：

IE 6~11
Chrome
Safari
FireFox

第三方浏览器（可以换上面的内核）：

QQ 浏览器
360浏览器

window (重要)

window 代表浏览器窗口

window.alert(2)
undefined
window.innerHeight
184
window.innerWidth
730
window.outerHeight
768
window.outerWidth
956
// 浏览器窗口大小

Navigator

Navigator, 封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36"
navigator.platform
"Win32"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36"

大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1536
screen.height
864

location (重要)

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()  // 刷新网页
// 设置新的地址
location.assign("https://juejin.cn/")

document

document 代表当前的页面， HTML、DOM文档树

document.title
"百度一下，你就知道"
document.title = 'wang'
"wang"

获取具体的文档树节点

<dl id="app"><dt>java</dt><dd>JavaSE</dd><dd>JavaEE</dd>
</dl>
<script>let dl = document.getElementById("app")console.log(dl)
</script>

获取cookie

document.cookie
"BIDUPSID=708BC2 ........."

服务器端可以设置cookie: httpOnly，防止cookie被劫持

history (不建议使用)

history 代表浏览器的历史记录

history.back()  // 后退
history.forward()  // 前进

https://www.bilibili.com/video/BV1JJ41177di?p=19

JavaScript-操作BOM对象相关推荐

JavaScript学习笔记2——JavaScript操作BOM对象
BOM模型 BOM:浏览器对象模型(Browser Object Model) BOM提供了独立于内容的.可以与浏览器窗口进行互动的对象结构 BOM可实现功能弹出新的浏览器窗口移动.关闭浏览器窗口 ...
JavaScript基础——第二章，JavaScript操作BOM对象
一,BOM模型(Borwser Object Model) BOM提供了独立内容的,可以与浏览器窗口进行互动的对象结构 BOM可实现功能: 弹出新的浏览器窗口移动,关闭浏览器窗口以及调整窗口的大小 ...
JavaScript操作BOM对象
window对象浏览器对象模型(BOM)是JavaScript的组成之一 ,它提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互.它的作用是将相关的元素组织包装起 ...
JavaScript操作BOM对象 - document对象； history 和 location对象，对话框，Date时间对象...
getElementById返回拥有指定id的第一个对象(注意只是一个且是第一个)getElementsByName返回带有指定名称的对象集合getElementsBytagNam返回指定标签的对象集 ...
JavaScript操作DOM对象 Day05
JavaScript操作DOM对象 0 核心浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点更新:更新Dom节点添加:添加一个新的节点删除:删除一个Dom节点要操作一个Do ...
JavaScript基础——第三章，JavaScript操作DOM对象
JavaScript操作DOM对象 DOM:Document Object Model (文档对象模型) 节点和节点的关系访问节点使用getElement系列方法访问指定节点根据层次关系访问节点 ...
JavaScript之BOM对象（JS函数作用域、window、history、location对象）
文章目录一.JS作用域二.window窗口三.history对象四.location对象本篇文章来简单介绍一下JS作用域,以及BOM对象中的三个基础对象,分别是window对象.histor ...
javascript之BOM对象总结
BOM编程基础全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的. 为了便 ...
[Javascript]：BOM对象详解和BOM与DOM的层次关系
BOM与DOM的结构层次图 BOM对象是什么 BOM:浏览器对象模型(Brower Object Model),是用于操作浏览器而出现的API,BOM对象则是Javascript对BOM接口的实现. ...
JavaScript操作DOM对象
目录一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...

JavaScript-操作BOM对象

JavaScript-操作BOM对象相关推荐

最新文章

热门文章