【JavaScript入门-22】DOM,window和navigator对象

举报
搞前端的半夏 发表于 2022/05/23 22:09:29 2022/05/23
【摘要】 前言JavaScript可以在很多环境中运行(浏览器,服务器)中运行,大部分的使用都是将JavaScript作为脚本!运行在WEB浏览器中的JavaScript,很大一部分都是与页面上的元素交互。Vue和React等前端框架,封装了大量的DOM操作,减少了我们开发的难度!但是作为一个前端开发人员,想走的更快,走的更好! 必须要学习如何操作DOM,知道Vue这些框架时如何封装操作DOM的操...

前言

JavaScript可以在很多环境中运行(浏览器,服务器)中运行,大部分的使用都是将JavaScript作为脚本!

运行在WEB浏览器中的JavaScript,很大一部分都是与页面上的元素交互。

Vue和React等前端框架,封装了大量的DOM操作,减少了我们开发的难度!

但是作为一个前端开发人员,想走的更快,走的更好! 必须要学习如何操作DOM,知道Vue这些框架时如何封装操作DOM的操作!

当HTML 文件运行在浏览器中,浏览器会将HTML转换成Document object Model (DOM)。DOM支持我们通过JavaScript机型交互。

我们可以做的事情有很多!

  1. 监听点击事件,监听滚动事件
  2. 可以在页面中添加,移动,删除元素或文本,图像等内容!
  3. 触发动画中元素中添加和删除CSS class。
  4. 可以播放音频视频
  5. 可以获取数据
  6. 。。。。。。

window对象

window对象是一个全局变量,在其上挂载很多属性!例如window.location

image-20220523214517094

我们可以认为widow就是打开窗口的所有内容。

包括:

  • 浏览器栏
  • 选项卡
  • 滚动条
  • 窗口上的一切,例如窗口的宽度 和高度

document对象

document表示HTML网页从**<html>开始标签到</html>**结束标签的所有内容。

document不关心浏览器选项卡或者页面之外其他元素,他只关心整个整个DOM。Document对象是HTML文档的根节点,通过它我们可以访问HTML页面中的所有元素!

我们在控制台输入document,并将鼠标返回的内容上,你会发现整个页面高亮!

image-20220523215128204

通常我们想要操作DOM的方法,全部都是放在document上。

例如我们常用的document.getElementById()

navigator对象

navigator对象是比窗口更高级的东西,它不仅为我们提供了浏览器的信息,还提供了设备本身的信息。

例如我们可以通过navigator.appName获取当前浏览器的名称!

image-20220523215741900

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。