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

4. 导航和历史：

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

5. 屏幕信息：

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

6. 存储：

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

7. 其他：

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

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

1. document 对象： 表示整个文档，是 DOM 树的入口。通过 document 对象，可以访问和操作文档的各个部分。
2. getElementById() 方法： 通过元素的 id 获取元素节点。

var element = document.getElementById('example');

3. getElementsByClassName() 和 getElementsByTagName() 方法： 分别通过类名和标签名获取元素节点。

var elementsByClass = document.getElementsByClassName('example');
var elementsByTag = document.getElementsByTagName('p');

4. querySelector() 和 querySelectorAll() 方法： 使用 CSS 选择器语法获取元素节点。

var element = document.querySelector('#example');
var elements = document.querySelectorAll('.example');

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 操作的基本流程：

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

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

JS的顶层对象

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

创建对象的方式

1. 使用字面量：

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

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 }