Dom的优势

最新推荐文章于 2024-09-14 21:48:00 发布

天蓝蓝23528

最新推荐文章于 2024-09-14 21:48:00 发布

阅读量689

点赞数 11

文章标签： java maven struts spring boot

本文链接：https://blog.csdn.net/Chujun123528/article/details/140421332

版权

Dom的优势

DOM（Document Object Model，文档对象模型）和CSS（Cascading Style Sheets，层叠样式表）在网页开发中扮演着不同的角色，它们之间既有区别也有联系。

区别

定义与功能
- DOM：DOM是W3C组织推荐的处理可扩展置标语言（如HTML或XML）的标准编程接口。它提供了一种方式，使得程序和脚本（尤其是JavaScript）能够动态地访问和更新文档的内容、结构和样式。DOM将文档视为一个由节点组成的树状结构，每个节点都代表文档的一个部分（如元素、属性、文本等）。
- CSS：CSS是一种用于描述HTML或XML等文档外观和样式的语言。它定义了网页中元素的布局、颜色、字体等样式属性，使得网页的呈现更加美观和一致。CSS通过选择器指定哪些元素应该应用哪些样式规则，这些规则被浏览器解析并应用于相应的元素上。
操作方式
- DOM：DOM主要通过JavaScript等脚本语言进行操作。开发者可以使用JavaScript提供的DOM API来访问、修改或删除DOM树中的节点，从而实现网页的动态效果。
- CSS：CSS主要通过在HTML文档中嵌入CSS代码、链接外部CSS文件或在HTML元素中直接使用内联样式来应用。CSS的样式规则被浏览器解析并应用于HTML元素上，以控制其外观和布局。
关注点
- DOM：DOM主要关注文档的结构和内容，它提供了一种方式来访问和操作这些结构和内容。
- CSS：CSS主要关注文档的样式和布局，它定义了元素应该如何被呈现给用户。

联系

共同作用于网页
- DOM和CSS共同作用于网页的呈现。DOM提供了网页的结构和内容，而CSS则定义了这些结构和内容的样式和布局。两者结合使用，可以创建出功能丰富、外观美观的网页。
相互影响
- DOM的修改可能会影响CSS的渲染效果。例如，通过JavaScript动态添加或删除DOM元素时，这些元素可能会继承或覆盖原有的CSS样式规则。
- 同时，CSS的某些特性（如伪类和伪元素）也可以被用来影响DOM的行为或样式。
协同工作
- 在现代网页开发中，DOM和CSS经常协同工作以实现复杂的交互效果和布局设计。开发者通常会使用JavaScript来操作DOM元素，并使用CSS来定义这些元素的样式和布局。这种协同工作的方式使得网页开发更加灵活和高效。

综上所述，DOM和CSS在网页开发中扮演着不同的角色，但它们之间又存在着紧密的联系和相互影响。掌握DOM和CSS的使用对于进行高效的网页开发至关重要。

Bom是什么？

BOM（Browser Object Model，浏览器对象模型）是与浏览器进行交互的一种接口，它提供了一套对象和方法，用于访问和控制浏览器的某些功能。与DOM（Document Object Model，文档对象模型）不同，DOM主要关注于文档的内容、结构和样式，而BOM则更多地关注于浏览器窗口和框架的交互。

BOM并不是一个官方的标准，不同的浏览器厂商可能会实现自己的BOM接口，但大多数现代浏览器都支持一套相似的BOM功能。BOM的核心对象是window，它代表了浏览器的一个实例（即一个打开的窗口或标签页），并且是一个全局对象，这意味着在浏览器中定义的任何变量、函数都会成为window对象的属性或方法。

BOM提供的功能包括但不限于：

窗口管理：可以调整浏览器窗口的大小（通过window.resizeTo()和window.resizeBy()方法）、移动窗口（通过window.moveTo()和window.moveBy()方法）、打开新窗口（通过window.open()方法）等。
导航和会话历史：可以加载新的文档（通过window.location对象）、刷新当前页面（通过window.reload()方法）、查询和修改浏览器的会话历史（通过window.history对象）等。
弹出框：可以显示警告框（通过window.alert()方法）、确认框（通过window.confirm()方法）和输入框（通过window.prompt()方法），与用户进行简单的交互。
定时器和间隔调用：可以设置定时器（通过setTimeout()方法）和间隔调用（通过setInterval()方法），实现代码的延迟执行或周期性执行。
屏幕信息：可以查询与屏幕相关的信息，如屏幕宽度和高度（通过window.screen对象）。
本地存储：虽然这通常与Web Storage API相关，但BOM也提供了对cookie的支持，用于在用户的计算机上存储少量的数据。