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

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

前端“三清”

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

BOM

首先让我们来了解BOM：

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

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

1. window 对象：

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

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

2. 弹窗和对话框：

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

3. 定时器：

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

4. 导航和历史：

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

5. 屏幕信息：

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

6. 存储：

  • window.localStorage 和 window.sessionStorage：用于在客户端存储数据，分别在本地存储和会话存储中。

7. 其他：

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

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

DOM

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

对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的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

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

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C/C++轻量级并发TCP服务器框架Zinx-游戏服务器开发006：基于redis查找玩家姓名+游戏业务实现总结

C/C++轻量级并发TCP服务器框架Zinx-游戏服务器开发006：基于redis查找玩家姓名+游戏业务实现总结

文章目录 1 Redis的安装与API的使用1.1 安装目录及环境变量1.2 设置远程客户端连接和守护进程1.3 启动redis1.4 Hiredis API的使用1.5 我的动态库和头文件 2 Redis的使用2.1 初始化时候2.2 结束的时候 3 测试4 Makefile5 游戏业务总结 1 Redis的安装与API的使用 1.1 安装目录及…
阅读更多...
为什么UI自动化难做？—— 关于Selenium UI自动化的思考

为什么UI自动化难做？—— 关于Selenium UI自动化的思考

在快速迭代的产品、团队中&#xff0c;UI自动化通常是一件看似美好&#xff0c;实际“鸡肋”&#xff08;甚至绝大部分连鸡肋都算不上&#xff09;的工具。原因不外乎以下几点&#xff1a; 1 效果有限 通常只是听说过&#xff0c;就想去搞UI自动化的团队&#xff0c;心里都认…
阅读更多...
【数据分享】2021-2023年我国主要城市逐月轨道交通运营数据

【数据分享】2021-2023年我国主要城市逐月轨道交通运营数据

以地铁为代表的轨道交通是大城市居民的主要交通出行方式之一&#xff0c;轨道交通的建设和运营情况也是一个城市发展水平的重要体现。本次我们为大家带来的是2021-2023年我国主要城市的逐月的轨道交通运营数据&#xff01; 数据指标包括&#xff1a;运营线路条数&#xff08;条…
阅读更多...
浅谈掌动智能验收测试主要服务内容

浅谈掌动智能验收测试主要服务内容

所谓验收测试是对软件的功能性、性能效率、兼容性、易用性、可靠性、信息安全性、维护性、可移植性进行测试&#xff0c;对产品说明、用户文档集进行审阅&#xff0c;为科研项目、信息工程项目等进行第三方验收评测&#xff0c;交付验收测试报告。本文将介绍掌动智能验收测试主…
阅读更多...
BlendTree动画混合算法详解

BlendTree动画混合算法详解

【混合本质】 如果了解骨骼动画就知道&#xff0c;某一时刻角色的Pose是通过两个邻近关键帧依次对所有骨骼插值而来&#xff0c;换句话说就是由两个关键帧混合而来。 那么可不可以由多个关键帧混合而来呢&#xff1f;当然可以。 更多的关键帧可以来自不同的动画片段&#xf…
阅读更多...
weblogic集群配置信息，IIOP问题解决,节点配置管理

weblogic集群配置信息，IIOP问题解决,节点配置管理

第一、创建域的时候&#xff0c;管理服务器&#xff0c;受管服务器&#xff0c;选择管理服务器&#xff0c;设置端口9001&#xff0c;其他默认下一步即可。 第二、启动管理服务器&#xff0c;打开控制台&#xff0c;增加服务器&#xff0c;集群如图&#xff0c;如果这两部有问…
阅读更多...
RT-DETR算法优化改进：Backbone改进 | HGBlock完美结合PPHGNetV2 GhostConv

RT-DETR算法优化改进：Backbone改进 | HGBlock完美结合PPHGNetV2 GhostConv

💡💡💡本文独家改进： GhostConv助力RT-DETR ,HGBlock与PPHGNetV2 GhostConv完美结合 推荐指数：五星 HGBlock_GhostConv | 亲测在多个数据集能够实现涨点 RT-DETR魔术师专栏介绍： https://blog.csdn.net/m0_63774211/category_12497375.html ✨✨✨魔改创新RT-…
阅读更多...
【FPGA】十进制计数器 | 实现 4-bit 2421 十进制计数器 | 有限状态机（FSM）

【FPGA】十进制计数器 | 实现 4-bit 2421 十进制计数器 | 有限状态机（FSM）

目录 Ⅰ. 实践说明 0x00 十进制计数器 0x01 有限状态机&#xff08;FSM&#xff09; Ⅱ. 实践部分 0x00 4-bit 2421 十进制计数器 Ⅰ. 实践说明 0x00 十进制计数器 十进制计数器是一种以十进制运算的计数器&#xff0c;从 0 数到 9&#xff0c;然后返回 0 状态。由于它需…
阅读更多...
吃透 Spring 系列—IOC部分

吃透 Spring 系列—IOC部分

目录 ◆ 传统Javaweb开发的困惑 -传统Javaweb开发代码分析-用户模块 -传统Javaweb开发困惑及解决方案 ◆ IoC、DI和AOP思想提出 - IoC 控制反转思想的提出 - DI 依赖注入思想的提出 - AOP 面向切面思想的提出 - 框架概念的出现 - 思想、框架和编码关系 ◆ Spring框架…
阅读更多...
11-13 周一 同济子豪兄CNN卷积神经网络学习记录

11-13 周一 同济子豪兄CNN卷积神经网络学习记录

11-13 周一 同济子豪兄CNN卷积神经网络学习记录 时间版本修改人描述2023年11月13日14:02:14V0.1宋全恒新建文档2023年11月13日19:05:29V0.2宋全恒完成 大白话讲解卷积神经网络的学习 简介 为了深入理解CNN&#xff0c;进行B站 同济子豪兄深度学习之卷积神经网络的学习. 主要内…
阅读更多...
如何在电脑和手机设备上编辑只读 PDF

如何在电脑和手机设备上编辑只读 PDF

我们大多数人更喜欢以 PDF 格式共享和查看文件&#xff0c;因为它更专业、更便携。但是&#xff0c;通常情况下您被拒绝访问除查看之外的内容编辑、复制或评论。如果您希望更好地控制您的 PDF 或更灵活地编辑它&#xff0c;请弄清楚为什么您的 PDF 是只读的&#xff0c;然后使用…
阅读更多...
NLP在网安领域中的应用（初级）

NLP在网安领域中的应用（初级）

NLP在网安领域的应用 写在最前面1. 威胁情报分析1.1 社交媒体情报分析&#xff08;后面有详细叙述&#xff09;1.2 暗网监测与威胁漏洞挖掘 2. 恶意软件检测2.1 威胁预测与趋势分析 3. 漏洞管理和响应4. 社交工程攻击识别4.1 情感分析与实时监测4.2 实体识别与攻击者画像构建4.…
阅读更多...
网络编程 初探windows编程

网络编程 初探windows编程

目录 一、什么是Winodws编程 二、开发环境搭建以及如何学习 三、VA助手安装 四、第一个Win32程序 五、窗口类句柄/窗口类对象 六、Winodws消息循环机制 七、Windows数据类型 一、什么是Winodws编程 Windows 编程指的是在 Microsoft Windows 操作系统上进行软件开发的过…
阅读更多...
Spring IOC - BeanDefinition解析

Spring IOC - BeanDefinition解析

1. BeanDefinition的属性 BeanDefinition作为接口定义了属性的get、set方法。这些属性基本定义在其直接实现类AbstractBeanDefinition中&#xff0c;各属性的含义如下表所示&#xff1a; 类型 名称 含义 常量 SCOPE_DEFAULT 默认作用域&#xff1a;单例模式 AUT…
阅读更多...
《Semantics Disentangling for Generalized Zero-Shot Learning》论文解读

《Semantics Disentangling for Generalized Zero-Shot Learning》论文解读

其实除了VAE自监督外&#xff0c;引入语义属性来约束生成特征的质量。感觉解纠缠这个说法有点扯淡。 语义相关模块的作用 其实就是把语义属性也作为标签。除了VAE外&#xff0c;加了语义属性作为标签&#xff0c;这样生成的特征就可以即跟原始视觉特征对齐&#xff0c;又跟语…
阅读更多...
大数据治理运营整体解决方案：PPT全文39页，附下载

大数据治理运营整体解决方案：PPT全文39页，附下载

关键词&#xff1a;大数据&#xff0c;数据治理&#xff0c;数据治理解决方案&#xff0c;数据治理的目的和意义 一、数据治理的定义 数据治理专注于将数据作为企事业单位数据资产进行应用和管理的一套管理机制&#xff0c;能够消除数据的不一致性&#xff0c;建立规范的数据应…
阅读更多...
5年测试经验之谈：2年功能测试、3年自动化测试，从入门到25k...

5年测试经验之谈：2年功能测试、3年自动化测试，从入门到25k...

毕业3年了&#xff0c;学的是环境工程专业&#xff0c;毕业后零基础转行做软件测试。 已近从事测试行业8年了&#xff0c;自己也从事过2年的手工测试&#xff0c;从事期间越来越觉得如果一直在手工测试的道路上前进&#xff0c;并不会有很大的发展&#xff0c;所以通过自己的努…
阅读更多...
Ansible角色定制实例

Ansible角色定制实例

目录 角色定制&#xff1a;roles 角色定制实例&#xff1a;利用角色部署wordpress 1.在roles目录下生成对应的目录结构 2.定义配置文件 ①nginx ②php ③mysql ④定义剧本文件 ⑤启动服务 角色定制&#xff1a;roles 对于普通的剧本&#xff08;playbook&#xff09;有…
阅读更多...
web前端开发第3次Dreamweave课堂练习/html练习代码《网页设计语言基础练习案例》

web前端开发第3次Dreamweave课堂练习/html练习代码《网页设计语言基础练习案例》

目标图片&#xff1a; 文字素材&#xff1a; 网页设计语言基础练习案例 ——几个从语义上和文字相关的标签 * h标签&#xff08;h1~h6&#xff09;&#xff1a;用来定义网页的标题&#xff0c;成对出现。 * p标签&#xff1a;用来设置网页的段落&#xff0c;成对出现。 * b…
阅读更多...
Linux下的文件系统

Linux下的文件系统

文章目录 一、初始文件系统 二、理解磁盘文件 三、了解磁盘 四、深入理解磁盘文件 4、1 磁盘分区 4、2 分区存储细节 4、3 磁盘文件的操作 4、3、1 查找某个磁盘文件 4、3、2 创建文件 4、3、3 对文件进行写入 4、3、4 删除文件 4、4 再次理解文件权限 &#x1f64b;‍♂️ 作…
阅读更多...
最新文章

Copyright @ 2022~2023