【JavaScript入门-22】DOM,window和navigator对象
前言
JavaScript可以在很多环境中运行(浏览器,服务器)中运行,大部分的使用都是将JavaScript作为脚本!
运行在WEB浏览器中的JavaScript,很大一部分都是与页面上的元素交互。
Vue和React等前端框架,封装了大量的DOM操作,减少了我们开发的难度!
但是作为一个前端开发人员,想走的更快,走的更好! 必须要学习如何操作DOM,知道Vue这些框架时如何封装操作DOM的操作!
当HTML 文件运行在浏览器中,浏览器会将HTML转换成Document object Model (DOM)。DOM支持我们通过JavaScript机型交互。
我们可以做的事情有很多!
- 监听点击事件,监听滚动事件
- 可以在页面中添加,移动,删除元素或文本,图像等内容!
- 触发动画中元素中添加和删除CSS class。
- 可以播放音频视频
- 可以获取数据
- 。。。。。。
window对象
window对象是一个全局变量,在其上挂载很多属性!例如window.location
我们可以认为widow就是打开窗口的所有内容。
包括:
- 浏览器栏
- 选项卡
- 滚动条
- 窗口上的一切,例如窗口的宽度 和高度
document对象
document表示HTML网页从**<html>开始标签到</html>**结束标签的所有内容。
document不关心浏览器选项卡或者页面之外其他元素,他只关心整个整个DOM。Document对象是HTML文档的根节点,通过它我们可以访问HTML页面中的所有元素!
我们在控制台输入document,并将鼠标返回的内容上,你会发现整个页面高亮!
通常我们想要操作DOM的方法,全部都是放在document上。
例如我们常用的document.getElementById()
navigator对象
navigator对象是比窗口更高级的东西,它不仅为我们提供了浏览器的信息,还提供了设备本身的信息。
例如我们可以通过navigator.appName
获取当前浏览器的名称!
- 点赞
- 收藏
- 关注作者
评论(0)