记录--让我们来深入了解一下前端“三清”是什么

news2024/11/18 7:39:46

 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

前端“三清”

在前端开发中,我们经常听到关于“三清”的说法,即 windowdocumentObject。这三者分别代表了 BOM(浏览器对象模型)、DOM(文档对象模型)以及 JS 的顶层对象。在这个体系中,我们通过 JavaScript 与浏览器进行深度交互,构建出丰富多彩的网页应用。同时,JS 类也是前端开发中常用的构建模块,通过构造函数和原型,我们能够创建出更为复杂的对象和功能。

BOM

首先让我们来了解BOM:

BOM(浏览器对象模型)是一组用于与浏览器交互的对象,提供了 JavaScript 访问浏览器功能的接口。对于JavaScript:为了能够让JavaScript能控制浏览器的行为JavaScript就有了一套自己的BOM接口

以下是 BOM 中一些常见的对象和功能:

1. window 对象:

window 对象是 BOM 的顶层对象,代表浏览器的一个窗口或一个标签页。window 对象包含了很多属性和方法,例如:

  • window.innerWidthwindow.innerHeight:获取浏览器窗口的内部宽度和高度。
  • window.location:提供了与当前窗口中加载的文档有关的信息,比如当前 URL。
  • window.document:表示当前窗口中加载的文档,即 DOM。

2. 弹窗和对话框:

  • window.alert():弹出警告框。
  • window.confirm():弹出确认框,用户可以点击“确定”或“取消”。
  • window.prompt():弹出提示框,通常用于从用户获取输入。

3. 定时器:

  • window.setTimeout():在一定时间后执行一次指定的函数。
  • window.setInterval():以指定的时间间隔重复执行指定的函数。
  • window.clearTimeout()window.clearInterval():用于取消之前通过 setTimeoutsetInterval 设置的定时器。

4. 导航和历史:

  • window.history:提供对浏览器历史记录的操作,比如前进、后退。
  • window.location:提供对当前 URL 的操作,可以用于导航到新的页面。

5. 屏幕信息:

  • window.screen:提供有关用户屏幕的信息,如屏幕宽度、高度。

6. 存储:

  • window.localStoragewindow.sessionStorage:用于在客户端存储数据,分别在本地存储和会话存储中。

7. 其他:

  • window.navigator:提供关于浏览器的信息,如浏览器名称、版本、操作系统等。
  • window.console:用于在控制台输出信息,方便调试。

BOM 提供了丰富的接口,使开发者能够与浏览器进行交互,控制页面的导航、执行定时任务、获取用户屏幕信息等。在编写代码时,建议谨慎使用不同浏览器独有的 BOM 特性,以确保跨浏览器的兼容性。

DOM

DOM(文档对象模型)是一种用于表示和操作文档的树状结构的编程接口。它将文档表示为一个由节点组成的树,每个节点代表文档中的一个元素、属性、文本等。DOM 提供了一种以编程方式访问、更新和操作 HTML 或 XML 文档的方法,使开发者能够通过 JavaScript 动态地操纵页面的内容和结构。

对于JavaScript:为了能够使JavaScript操作HtmlJavaScript就有了一套自己的DOM编程接口

DOM 的基本概念:

  1. 节点(Node): DOM 中的基本单位,文档中的所有内容都是节点。节点可以是元素、属性、文本等。
  2. 元素节点(Element Node): 表示文档中的元素,如 <div><p><span> 等。
  3. 属性节点(Attribute Node): 表示元素的属性,如 <div id="example"> 中的 id 属性。
  4. 文本节点(Text Node): 表示元素中的文本内容。
  5. 父节点、子节点、兄弟节点: 节点之间的关系。一个节点的直接包含者称为父节点,被它直接包含的节点称为子节点,具有相同父节点的节点称为兄弟节点。

以下是 DOM 的一些常见属性和方法:

  1. document 对象: 表示整个文档,是 DOM 树的入口。通过 document 对象,可以访问和操作文档的各个部分。
  2. getElementById() 方法: 通过元素的 id 获取元素节点。
var element = document.getElementById('example');
  1. getElementsByClassName() 和 getElementsByTagName() 方法: 分别通过类名和标签名获取元素节点。
var elementsByClass = document.getElementsByClassName('example');
var elementsByTag = document.getElementsByTagName('p');
  1. querySelector() 和 querySelectorAll() 方法: 使用 CSS 选择器语法获取元素节点。
var element = document.querySelector('#example');
var elements = document.querySelectorAll('.example');
  1. createElement() 和 createTextNode() 方法: 创建新的元素和文本节点。
var newElement = document.createElement('div');
var newText = document.createTextNode('Hello, DOM!');
  1. 节点的属性和方法: 节点对象有各种属性和方法,用于访问和操作节点的内容、样式、事件等
// 获取节点的文本内容
var textContent = element.textContent;

// 设置节点的样式
element.style.color = 'red';

// 添加事件监听器
element.addEventListener('click', function() {
  // 处理点击事件
});

// 向element内部的最后面添加一个节点,传入的参数是节点类型
element.appendChild(Node)
 
// 向element内部某个已存在的节点的前面插入一个节点,仍然传入一个节点类型的参数
element.insertBefore(new_Node,existed_Node)

// 删除element内的某个节点,传参是节点类型参数
element.removeChild(Node) 

DOM 操作的基本流程:

  1. 选择目标节点: 使用上述方法选择要操作的元素节点。
  2. 操作节点: 使用节点的属性和方法进行相关操作,如修改文本内容、样式、添加或移除节点等。
  3. 更新页面: 对节点进行操作后,通过 appendChild()insertBefore() 等方法将更新后的节点插入到文档中,或者通过修改节点的属性直接更新页面。

DOM 的灵活性和强大性使得它成为前端开发中不可或缺的一部分。通过合理地使用 DOM,开发者能够实现动态更新页面、响应用户操作、处理表单数据等丰富的功能,提升用户体验。然而,需要注意的是,频繁的 DOM 操作可能导致性能问题,因此在实际开发中应该注意优化操作,并尽量减少不必要的重绘和回流。

JS的顶层对象

JavaScript 的顶层对象是 Object,它是所有对象的父对象。Object 对象在 JavaScript 中扮演着非常重要的角色,提供了一些常用的方法和属性,同时也是原型链的起点。

创建对象的方式

  1. 使用字面量:

javascriptCopy code
var obj = { key: 'value' };

         2.使用构造函数:

javascriptCopy code
var obj = new Object();
obj.key = 'value';

Object 对象的属性和方法

1. 属性
  • Object.prototype Object 对象的原型,所有对象都继承自这个原型。这是原型链的起点。
  • Object.length 通常用于获取 Object 构造函数的长度属性,值为 1。
2. 方法
  • Object.assign(target, ...sources) 用于将一个或多个源对象的属性复制到目标对象。它会返回目标对象。

javascriptCopy code
var target = { a: 1, b: 2 };
var source = { b: 3, c: 4 };
var result = Object.assign(target, source);
console.log(result); // { a: 1, b: 3, c: 4 }
  • Object.create(proto, [propertiesObject]): 创建一个新对象,使用现有的对象作为新对象的原型。
javascriptCopy code
var protoObj = { x: 10 };
var newObj = Object.create(protoObj);
console.log(newObj.x); // 10
  • Object.keys(obj) 和 Object.values(obj) 返回一个包含对象自身所有属性名或属性值的数组
javascriptCopy code
var obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // ['a', 'b', 'c']
console.log(Object.values(obj)); // [1, 2, 3]
  •  Object.entries(obj) 返回一个包含对象自身所有 [key, value] 对的数组。
javascriptCopy code
var obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]
  • Object.freeze(obj) 和 Object.seal(obj) 分别用于冻结对象(使对象不可更改)和封闭对象(使对象不可添加、删除属性)。
javascriptCopy code
var obj = { x: 1, y: 2 };
Object.freeze(obj);
obj.x = 10; // 不会生效,obj.x 仍然为 1


javascriptCopy code
var obj = { x: 1, y: 2 };
Object.seal(obj);
obj.z = 3; // 不会生效,obj 中不会添加 z 属性

原型链

Object 对象是 JavaScript 中原型链的起点。每个对象都有一个 __proto__ 属性,指向它的原型对象。在原型链中,Object.prototype 是所有对象的祖先。

javascriptCopy code
var myObject = {};
console.log(myObject.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null,原型链的终点

通过原型链,对象可以继承 Object.prototype 的属性和方法,这包括一些基本的对象操作,例如 toString()hasOwnProperty() 等。

javascriptCopy code
var myObject = {};
console.log(myObject.toString()); // [object Object]
console.log(myObject.hasOwnProperty('toString')); // false,来自原型链
总体而言, Object 对象作为 JavaScript 中的顶层对象,原型在哪一栈上有的方法,对象都可以用,它也提供了一些常用的工具方法和属性,同时在原型链中发挥了关键作用。也可以说js面向对象不是血缘的,而是面向原型的,理解 Object 对象有助于更深入地理解 JavaScript 的对象模型。

本文转载于:

https://juejin.cn/post/7300100800906788873

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1204991.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Git精讲(一)

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、Git初识1、提出问题2、如何解决--版本控制器3、注意事项 二、Git 安装1、Linux-centos2、…

世微 升压恒压IC dc-dc转换器 充电器手持设备便携式产品 AP8660

AP8660是一款升压dc-dc转换器&#xff0c;内置MOS调节器&#xff0c;内部补偿&#xff0c;还可以最小6个外部组件&#xff0c;内部的软识启动功能可以降压涌入电流 AP8660 SOT23-6封装&#xff0c;可以为PCB提供节省空间 特点 可调输出&#xff0c;最高达到24W 内部固定PWM频…

语言大模型的预训练过程——从无尽数据到海量知识

从目前研究结果看&#xff0c;Transformer是足够强大的特征抽取器&#xff0c;通过预训练过程&#xff0c;Transformer学到了什么&#xff1f;知识是如何存取的&#xff1f;我们又如何修正错误知识&#xff1f;本文讲述这方面的研究进展。 1、求知&#xff1a;LLM学到了什么知…

【JAVA】去掉 if...else 的七种绝佳之法...

文章目录 前言方法一&#xff1a;提前 return方法二&#xff1a;枚举方案三&#xff1a;Optional 判空方案四&#xff1a;表驱动法方案五&#xff1a;策略模式 工厂方法方案六&#xff1a;责任链模式方案七&#xff1a;Function总结 前言 我相信小伙伴一定看过多篇怎么去掉 i…

解决渗透测试js文件泄露

解决办法&#xff1a;使用过滤器过滤 public class StaticSourceFilter implements Filter {private static Logger logger LoggerFactory.getLogger(StaticSourceFilter.class);Overridepublic void init(FilterConfig filterConfig) throws ServletException {}Overridepub…

http-server安装使用

前段时间给电脑重装了系统&#xff0c;很多东西都没了&#xff0c;今天想在浏览器打开一个本地的html文件&#xff0c;发现电脑上没有http-server&#xff0c;于是装了一个&#xff0c;并且记录下安装过程 1、安装 nodejs&#xff0c;但如果你电脑上有&#xff0c;就无需下载 …

html5 初步了解

1、html5 含义 简而言之&#xff0c;html5 其实就是新的一代html标准&#xff01; 2、html5的优缺点 优点 语义化html 增加了很多语义化的标签&#xff0c;让html结构更加清晰&#xff0c;更具可读性由于增加了很多语义化的标签&#xff0c;对SEO更加友好 缺点 其他主流浏…

day59【单调栈】503.下一个更大元素Ⅱ 42.接雨水

文章目录 503.下一个更大元素Ⅱ42.接雨水 503.下一个更大元素Ⅱ 力扣题目链接 代码随想录讲解链接 题意&#xff1a;给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。 数…

(只需三步)虚拟机上vm的ubuntu不能联上网怎么办

第一步&#xff1a;重启虚拟网络适配器 第二步&#xff1a;删掉网络适配器&#xff0c;重新添加 第三步&#xff1a;重启虚拟机网络服务器 sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager.state sudo service network-manager start 再打…

【机器学习基础】机器学习入门(2)

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;机器学习 欢迎订阅&#xff01;后面的内容会越来越有意思~ &#x1f4a1;往期推荐&#xff1a;【机器学习基础】机器学习入门&#xff08;1&#xff09; &#x1f4a1;…

【算法|动态规划 | 区间dp No.1】AcWing 282. 石子合并

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【AcWing算法提高学习专栏】【手撕算法系列专栏】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&a…

数据结构--图解单链表

学习链表最重要的就是会画图&#xff0c;尤其是要理解链表的逻辑结构和物理结构&#xff0c;理解链表的底层原理才能使用的如鱼得水。 希望这篇文章可以帮助各位&#xff0c;记得关注收藏哦&#xff1b;若发现问题希望私信博主&#xff0c;十分感谢。 当然学习链表是需要大家对…

【PWN · heap | unlink | free_hook】[SUCTF 2018 招新赛]unlink

在前期学习了unlink后&#xff0c;今天翻NSSCTF找到一道名为unlink的题目&#xff0c;尝试不看wp做。过程很顺利&#xff01; 前言 题目对于知识点unlink还是非常裸的&#xff0c;很直接&#xff0c;思路很清晰。 一、题目 二、思路浅析 通过对该程序的反编译&#xff0c;我们…

AGV与AMR的区别

如今&#xff0c;市面上最受关注的两类工业移动机器人分别是AGV和AMR。但大众对于两者的区别还是不甚了解&#xff0c;因此小编将通过这篇文章为大家详细解释。 一、概念阐述 【AGV 】 AGV (Automated Guided Vehicle) 即自动导引运输车&#xff0c;可指基于各种定位导航技术…

第二章:main 方法

系列文章目录 文章目录 系列文章目录前言一、main 方法总结 前言 main方法详解。 一、main 方法 //main方法的形式 public static void main(String[] args){}解释main方法main方法被虚拟机调用Java虚拟机需要调用类的main()方法&#xff0c;所以该方法的访问权限必须是publi…

C++类中的const使用

目录 一&#xff0c;const成员函数 1&#xff0c;const成员函数的语法 2&#xff0c;相同限定符之间的调用 3&#xff0c;不同限定符对象与函数的调用 4&#xff0c;不同限定符函数之间的调用 一&#xff0c;const成员函数 1&#xff0c;const成员函数的语法 将const修饰…

关于MySQL优化的思考二【性能分析工具、优化原则】

在实际的工作中&#xff0c;我们不免需要对SQL预计进行分析和优化&#xff0c;今天我们就来一起看下相关内容&#xff1a; SQL性能分析 SQL优化原则 1 SQL性能分析 对SQL进行性能分析&#xff0c;主要有&#xff1a; 查看慢SQL 通过profile详情查看 explain执行计划 1.1…

2023年【广东省安全员B证第四批(项目负责人)】考试及广东省安全员B证第四批(项目负责人)试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 广东省安全员B证第四批&#xff08;项目负责人&#xff09;考试考前必练&#xff01;安全生产模拟考试一点通每个月更新广东省安全员B证第四批&#xff08;项目负责人&#xff09;试题及解析题目及答案&#xff01;多…

Redhat7设置国内可用yum源

问题&#xff1a; 因为最近安装了redhat7&#xff0c;在使用的时候提示系统未注册订阅&#xff0c;无法使用官方的yum源进行安装软件。为此&#xff0c;我使用centos7国内的yum源替换redhat的官方的yum源实现软件安装。 “This system is not registered with an entitlement …

iOS:何为空指针和野指针

一&#xff1a;什么是空指针和野指针 1、空指针 ①.没有存储任何内存地址的指针就成为空指针&#xff08;NULL指针&#xff09; ②.空指针就是被赋值为0的指针&#xff0c;在没有被具体初始化之前&#xff0c;其值为0. //以下都是空指针&#xff0c;eg: Person *p1 NULL; …