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(拥有一个入参值,指定页数前后跳转)
相关文章
|
28天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
14天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
14天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
15天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
25天前
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之,优化 DOM 和 BOM 的性能需要综合考虑多个方面,通过合理的设计和技术手段,提升项目的运行效率和用户体验。在实际开发中,要不断地进行性能优化实践,以适应不断变化的需求和技术发展。
|
25天前
|
JavaScript 安全 物联网
DOM 和 BOM 在项目中的应用
【10月更文挑战第19天】在现代网页开发和应用项目中,DOM(文档对象模型)和 BOM(浏览器对象模型)扮演着至关重要的角色。它们为开发者提供了与网页文档和浏览器环境进行交互的能力,使项目能够实现丰富的功能和用户体验。
|
25天前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
JavaScript 前端开发 Go
JavaScript系列--BOM(二)
JavaScript系列--BOM(二)
150 0
|
JavaScript 前端开发 API
JavaScript系列--BOM(一)
JavaScript系列--BOM(一)
103 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
96 2