- A+
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
前端“三清”
在前端开发中,我们经常听到关于“三清”的说法,即 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 的基本概念:
- 节点(Node): DOM 中的基本单位,文档中的所有内容都是节点。节点可以是元素、属性、文本等。
- 元素节点(Element Node): 表示文档中的元素,如
<div>
、<p>
、<span>
等。 - 属性节点(Attribute Node): 表示元素的属性,如
<div id="example">
中的id
属性。 - 文本节点(Text Node): 表示元素中的文本内容。
- 父节点、子节点、兄弟节点: 节点之间的关系。一个节点的直接包含者称为父节点,被它直接包含的节点称为子节点,具有相同父节点的节点称为兄弟节点。
以下是 DOM 的一些常见属性和方法:
document
对象: 表示整个文档,是 DOM 树的入口。通过document
对象,可以访问和操作文档的各个部分。getElementById()
方法: 通过元素的id
获取元素节点。
var element = document.getElementById('example');
getElementsByClassName()
和getElementsByTagName()
方法: 分别通过类名和标签名获取元素节点。
var elementsByClass = document.getElementsByClassName('example'); var elementsByTag = document.getElementsByTagName('p');
querySelector()
和querySelectorAll()
方法: 使用 CSS 选择器语法获取元素节点。
var element = document.querySelector('#example'); var elements = document.querySelectorAll('.example');
createElement()
和createTextNode()
方法: 创建新的元素和文本节点。
var newElement = document.createElement('div'); var newText = document.createTextNode('Hello, DOM!');
- 节点的属性和方法: 节点对象有各种属性和方法,用于访问和操作节点的内容、样式、事件等
// 获取节点的文本内容 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 操作的基本流程:
- 选择目标节点: 使用上述方法选择要操作的元素节点。
- 操作节点: 使用节点的属性和方法进行相关操作,如修改文本内容、样式、添加或移除节点等。
- 更新页面: 对节点进行操作后,通过
appendChild()
、insertBefore()
等方法将更新后的节点插入到文档中,或者通过修改节点的属性直接更新页面。
DOM 的灵活性和强大性使得它成为前端开发中不可或缺的一部分。通过合理地使用 DOM,开发者能够实现动态更新页面、响应用户操作、处理表单数据等丰富的功能,提升用户体验。然而,需要注意的是,频繁的 DOM 操作可能导致性能问题,因此在实际开发中应该注意优化操作,并尽量减少不必要的重绘和回流。
JS的顶层对象
JavaScript 的顶层对象是
Object
,它是所有对象的父对象。Object
对象在 JavaScript 中扮演着非常重要的角色,提供了一些常用的方法和属性,同时也是原型链的起点。
创建对象的方式
-
使用字面量:
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 的对象模型。