js BOM和DOM是什么

简介: js BOM和DOM是什么

目录


前言


同样是对一个基础的查缺补漏,以最精炼的话概括DOM与BOM究竟是什么,通俗易懂,一篇掌握,面试无忧。


DOM(文档对象模型)


概念


DOM是文档对象模型,html页面上的从顶级元素html开始,包括中间的body、div等等标签,它们在被加载时同时会生成一个文档对象,js可以通过这个对象处理网页内容,这对象就是DOM。

节点


DOM文档对象由节点构成,节点有很多种,但是最主要节点有三种:元素节点、文本节点和属性节点,nodeType可以获取它们的节点类型值,这三种分别对应值1,2,3。

HTML的标签元素就是DOM的元素节点,而这些元素节点也都是一个个对象,用DOM提供的方法可以获得这些对象,比如js通过DOM操作网页之前需要使用document.getElementById获取元素对象等。

BOM(浏览器对象模型)


概念


BOM是浏览器对象模型,该对象模型提供一些对象,这些对象提供一些方法,可以用于js操作浏览器一些功能。

对象


window对象:BOM的核心,表示正打开的窗口,同时也是html中的js所说的全局对象,且全局对象上的方法和属性使用时不用加上前缀window,比如我们常常使用的alert,实际上是window.alert,剩下介绍的三个对象都存在于 window 对象上。


location对象:提供一些属性返回url请求的信息,比如host:服务器名称+端口,以下记录一些常用的

image.png

  1. navigator对象:检测当前浏览器一些信息,比如是什么浏览器什么内核等等,做兼容性处理时用得到。
  2. history对象:可以对当前用户会话产生的路由栈进行跳转,back(向后跳转一页)、forward(向前跳转一页)、go(拥有一个入参值,指定页数前后跳转)
相关文章
|
6天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
12 5
|
6天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
8 4
|
7天前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别,并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
|
6天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
13 2
|
8天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
8天前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
8天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
JavaScript 前端开发 Go
JavaScript系列--BOM(二)
JavaScript系列--BOM(二)
145 0
|
JavaScript 前端开发 API
JavaScript系列--BOM(一)
JavaScript系列--BOM(一)
99 0
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
78 2