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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/518265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一文带你认识keepalived,再带你通关LVS+Keepalived!

来源 | 故事凌责编 | Carol封图 | CSDN 下载于视觉中国昨天我们讲到《那些你不知道的 LVS 秘密》&#xff0c;今天我们就继续一起来进行 LVS 更深的探索&#xff0c;来一起通关 LVSKeepalived吧&#xff01;keepalivedkeepalive的学习参考网站&#xff1a;https://www.keepali…

手把手教你D2C,走向前端智能化

这几年来 AI 来势汹汹&#xff0c;在部分领域应用也逐渐成熟。前端发展至今&#xff0c;我们也有许多成熟的前端解决方案代码&#xff0c;有大量的设计稿&#xff0c;我们是否能够结合智能化的能力将一个 Design 变成一个 Code &#xff08;设计转代码&#xff0c;简称 D2C&…

TortoiseGit 冲突和解决方案_入门试炼_07

文章目录一、张三操作1. 张三新增hello.java2. 提交本地仓库3. 更新项目4. 将本地仓库变动文件提交远程二、李四操作2.1. 编辑Hello.java2.2. 提交三、张三操作23.1. 在hello.java中添加内容3.2. 提交本地仓库3.3. 更新项目至最新版本3.4. 更新最版本异常&#xff08;冲突&…

如何低成本实现Flutter富文本,看这一篇就够了!

作者&#xff1a;闲鱼技术-玄川 背景 闲鱼是国内最早使用Flutter 的团队&#xff0c;作为一个电商App商品详情页是非常重要场景&#xff0c;其中最主要的技术能力是文字混排。 我们面对文本类的需求是复杂而且多变&#xff0c;然而Flutter历史的几个版本&#xff0c;Text只能…

赋能零售成长型企业营销增长,云徙「数盈·新营销中台」发布

巨石崩裂时&#xff0c;有人看见了恐惧&#xff0c;有人看见了光。 因为有光&#xff0c;万物生长。 疫情给每个企业的影响都是巨大的。但在疫情冲击之下&#xff0c;由中台技术推动企业数字化转型&#xff0c;又给企业带来了希望。 从2016年创业至今&#xff0c;云徙科技的每…

TortoiseGit 下载、安装、配置_入门试炼_01

TortoiseGit 简介: TortoiseGit 简称 tgit&#xff0c; 中文名海龟Git。TortoiseGit是一个开放的GIT版本控制系统的源客户端。 文章目录一、软件下载1.1. 下载安装Git1.2. Tortoisegit二、安装流程2.1. 双击安装程序2.2. 直接点击下一步(Next)2.3. Next2.4. 选择安装目录2.5. 点…

ArchSummit分享 | 高德地图App架构演化与实践

讲师介绍 郝仁杰&#xff0c;高德地图无线开发专家。在7月13日落幕的2019年ArchSummit峰会上就高德地图近几年的App架构演化和实践进行了分享。 背景概述 高德是国内领先的数字地图内容、导航和位置服务解决方案提供商&#xff0c;端上分手机和车机两条主线。近年来&#xf…

工程师的灵魂拷问:你的密钥安全吗?

阿里妹导读&#xff1a;密钥管理是密码学应用的核心问题之一。任何涉及加密/签名的应用&#xff0c;无论算法本身机制多么安全&#xff0c;最终都会受到灵魂拷问&#xff1a;你密钥存在哪儿&#xff1f;本文实现了一种安全的密钥管理方案&#xff0c;基于安全多方计算技术&…

优化算法2D可视化的补充

4. 分析上图&#xff0c;说明原理&#xff08;选做&#xff09; 1、为什么SGD会走“之字形”&#xff1f;其它算法为什么会比较平滑&#xff1f; 之所以会走"之字形"&#xff0c;是因为它在每次更新参数时只考虑当前的样本梯度。这导致参数更新非常不稳定&#xff0c…

TortoiseGit 本地仓库和远程仓库建立联系_入门试炼_02

TortoiseGit 简介: TortoiseGit 简称 tgit&#xff0c; 中文名海龟Git。TortoiseGit是一个开放的GIT版本控制系统的源客户端。 文章目录一、前提准备1.1. 生成秘钥和公钥1.2. 把 SSH Key 填到Git 服务器的配置中一、前提准备 声明&#xff1a;此处介绍通过SSH URL方式传输&…

来自 Spring Cloud 官方的消息,Spring Cloud Alibaba 即将毕业

2019 年 7 月 24 日晚&#xff0c;Spring Cloud 官方发布公告&#xff1a; 仓库迁移是官方决定Spring Cloud Alibaba 即将毕业 根据官方最新的发版规则&#xff0c;我们会把孵化器中的 Spring Cloud Alibaba 仓库迁移回 Alibaba 官方仓库&#xff0c;进行正式的毕业发布&#…

TortoiseGit 克隆_入门试炼_03

文章目录一、 Git克隆1.1. 右击选择Git克隆1.2. 输入URL1.3. 提示输入密码一、 Git克隆 1.1. 右击选择Git克隆 在本地文件夹的空白位置处&#xff0c;右击鼠标&#xff0c;在菜单中选择【Git克隆】&#xff1a; 1.2. 输入URL 标签说明URL是git项目地址&#xff0c;简言之后…

5分钟在PAI算法市场发布自定义算法

概述 在人工智能领域存在这样的现象&#xff0c;很多用户有人工智能的需求&#xff0c;但是没有相关的技术能力。另外有一些人工智能专家空有一身武艺&#xff0c;但是找不到需求方。这意味着在需求和技术之间需要一种连接作为纽带。 今天PAI正式对外发布了“AI市场”以及“PA…

Gartner:阿里云蝉联全球第三、亚太第一

4月23日消息&#xff0c;国际研究机构Gartner发布最新云计算市场追踪数据&#xff0c;阿里云亚太市场排名第一&#xff0c;全球市场排名第三。阿里云亚太市场份额从26%上涨至28%&#xff0c;接近亚马逊和微软总和&#xff1b;全球市场份额从7.7%上涨至9.1%&#xff0c;进一步拉…

消息点击率翻倍,原来这就是闲鱼背后的神器

阿里妹导读&#xff1a;IFTTT是一个被称为 “网络自动化神器” 的创新型互联网服务理念&#xff0c;它既实用&#xff0c;概念又简单&#xff0c;可以通过标准化协议满足用户的强需求&#xff0c;让各种互联网产品为用户服务&#xff0c;2010年刚推出&#xff0c;就拥有了极高的…

TortoiseGit 将工作区变动文件提交本地仓库_入门试炼_04

文章目录一、将工作区代码提交到本地仓库1.1. 新增/改动文件1.2. 将变动文件提交本地仓库1.3. 填写提交注释说明一、将工作区代码提交到本地仓库 Git的使用类似TFS、SVN等源代码或者文件管理器&#xff0c;惯例的流程&#xff1a; 1.1. 新增/改动文件 改动/修改本地项目中的…

MongoDB Sharding 请勿复用已删除的 namespace

SERVER-17397: Dropping a Database or Collection in a Sharded Cluster may not fully succeed 是 MongoDB 里老大难的问题&#xff0c;库或集合删除操作如果没有完全执行成功&#xff0c;再新建相同名字的集合&#xff0c;可能导致读到老版本数据的问题。 集合分片原理 Mon…

32岁被裁补偿N+2:“感谢裁我,让我翻倍!” 网友:求同款被裁!

2020年的冬天&#xff0c;“冷”的有些频繁。最近浏览一则新闻&#xff0c;19年12月19日&#xff0c;《马蜂窝被曝裁员40% UGC模式变现难&#xff1f;》爆火&#xff0c;据悉马蜂窝将裁员40%&#xff0c;交易中心成了“重灾区”&#xff0c;赔偿N2&#xff0c;留下的除搜索推荐…

JavaScript-操作DOM对象-创建和插入dom节点

插入节点 我们获得了某个Dom节点&#xff0c;假设这个dom节点是空的&#xff0c;我们通过innerHTML就可以增加一个元素了&#xff0c;但是这个DOM节点已经存在元素了&#xff0c;我们就不能这么干了&#xff01;会产生覆盖 将标签 追加 到其他标签 <p id"js">J…

技术架构演进|0到千万DAU,微淘如何走过?

导读&#xff1a;大家经常看到手淘里面的第二个TAB 就是微淘了&#xff01;目前有几千万 DAU&#xff0c;几百亿关注关系&#xff0c;每天几十万的商家生产内容&#xff0c;对系统的挑战较大。产品形态上目前以关注 feeds 流为主&#xff0c;是商家非常重要的获取流量阵地&…