DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
在JavaScript中，可以使用DOM（文档对象模型）操作来添加、移除、移动、复制、创建和查找节点。
- 添加节点：
- 创建新节点：使用
document.createElement(tagName)方法创建一个新的元素节点。 - 插入节点：使用
parentElement.appendChild(newNode)方法将新节点添加为指定父节点的最后一个子节点，或使用insertBefore(newNode, referenceNode)方法在一个节点之前插入新节点。
- 移除节点：
- 移除节点：使用
parentElement.removeChild(node)方法从父节点中移除指定节点。 - 移除自身：使用
node.remove()方法直接移除自身。
- 移动节点：
- 移动节点：使用
parentElement.appendChild(node)方法将节点从当前位置移到指定父节点的最后一个子节点位置。
- 复制节点：
- 复制节点：使用
node.cloneNode(true)方法将节点进行复制，传入参数true表示复制节点及其整个子节点树。
- 创建节点：
- 创建元素节点：使用
document.createElement(tagName)方法创建一个新的元素节点。 - 创建文本节点：使用
document.createTextNode(text)方法创建一个新的文本节点。
- 查找节点：
- 根据ID查找节点：使用
document.getElementById(id)方法通过节点的ID属性找到指定节点。 - 根据选择器查询：使用
document.querySelector(selector)方法根据CSS选择器查询匹配的第一个节点。 - 查询多个节点：使用
document.querySelectorAll(selector)方法根据CSS选择器查询匹配的所有节点，并返回一个节点列表。
请注意，这些操作都是基于DOM提供的相关API进行的。要确保在对文档进行更改时，DOM已经加载完毕。
以下是一个示例，演示如何创建、添加、移除和查找节点：
// 创建新节点 const newNode = document.createElement('div'); newNode.textContent = 'Hello, World!'; // 添加节点 const parent = document.getElementById('parent'); parent.appendChild(newNode); // 移除节点 const child = document.getElementById('child'); parent.removeChild(child); // 移动节点 const container = document.getElementById('container'); const movedNode = document.getElementById('movedNode'); container.appendChild(movedNode); // 复制节点 const originalNode = document.getElementById('originalNode'); const clonedNode = originalNode.cloneNode(true); // 查找节点 const selectedNode = document.querySelector('.selectedNode'); const nodeList = document.querySelectorAll('p');
以上示例演示了如何使用DOM操作来添加、移除、移动、复制、创建和查找节点。根据具体的需求和操作，可以使用这些API来进行灵活的节点操作。
documen.write和 innerHTML的区别?
document.write和innerHTML都是用于更改DOM元素的内容，但它们有一些重要的区别。
document.write：
document.write是一个早期的DOM方法，在页面加载过程中或在文档完全加载后调用时，将直接向文档流写入指定的HTML字符串。- 当使用
document.write时，会将内容插入到当前的文档位置。如果在文档已经加载完毕后调用document.write，它将覆盖整个文档。 - 每次调用
document.write时，浏览器会重新解析整个文档，此过程可能会影响性能，并且可能导致意外的结果。 - 使用
document.write时需要小心，尤其在文档加载后使用它可能会导致不期望的行为。因此，它在现代JavaScript开发中很少被使用。
innerHTML：
innerHTML是DOM元素的属性，可以直接访问和更改元素的HTML内容。- 通过设置元素的
innerHTML属性，可以将指定的HTML字符串作为元素的内容插入。它会解析并创建DOM节点，并将其包含在元素中。 innerHTML可以灵活地修改元素的内容，允许添加、修改、删除和替换元素内部的HTML结构。- 使用
innerHTML修改内容不会触发浏览器的重新解析整个文档，因此性能较好。
总结：
document.write是一个较早的DOM方法，它将指定的HTML字符串直接写入文档流，可能会导致意外的结果和性能问题。而innerHTML是DOM元素的属性，提供了更灵活的方式来修改元素的HTML内容，而且不会触发整个文档的重新解析。
建议在现代JavaScript开发中使用innerHTML进行动态内容的更新和插入，避免使用document.write来修改文档内容。
说下DOM0、DOM1、DOM2
DOM（文档对象模型）是用于操作HTML和XML文档的编程接口。
DOM规范分为不同的级别，其中常用的包括DOM0级、DOM1级和DOM2级。
1. DOM0级
- DOM0级是最早的DOM规范，它由不同的浏览器厂商根据早期的JavaScript标准（ECMAScript 1）实现的。
- DOM0级定义了几个常用的属性和方法，可以直接在HTML元素上使用。例如，可以通过直接设置
onclick属性来添加点击事件处理程序。 - DOM0级没有正式的规范文档，因为它只是不同浏览器所支持的JavaScript特性的集合。
2. DOM1级
- DOM1级是第一个正式的DOM规范，由W3C（万维网联盟）于1998年发布。
- DOM1级定义了核心DOM的基本结构和方法，包括
Document、Element、Node等对象及其相关属性和方法。 - DOM1级提供了通过JavaScript访问和操纵文档内容的基本功能，可以通过DOM进行元素遍历、节点的增删改查等操作。
3. DOM2级
- DOM2级是对DOM1级的扩展和增强，由W3C于2000年发布。
- DOM2级增加了更多的对象、接口和方法，涵盖了CSS、事件、范围和遍历等方面的功能。
- DOM2级引入了
querySelector、addEventListener等方法，提供了更便捷和强大的操作DOM的能力。 - DOM2级也引入了一些高级特性，如XML命名空间的支持、文档验证等功能。
总结：
DOM0级是早期的实现，没有正式的规范，而DOM1级是第一个正式规范，定义了基本的DOM结构和操作方法。
DOM2级对DOM1级进行了扩展，增加了更多的对象和功能，提供了更强大的DOM操作能力。
在现代的Web开发中，主要参考和使用DOM2级及以上的规范，以获得更好的兼容性和功能。
说下addEventListener
addEventListener是JavaScript中用于为DOM元素添加事件监听器的方法。通过使用addEventListener，可以将事件处理函数绑定到指定的元素上，以便在特定事件发生时执行相应的操作。
使用addEventListener方法的基本语法如下：
element.addEventListener(event, listener, options);
其中，
element是要添加事件监听器的DOM元素。event是要监听的事件类型，比如click、keydown等。事件类型也可以是自定义事件。listener是事件处理函数，即事件触发时执行的代码块。options是一个可选的配置对象，用于设置一些事件相关的选项，比如once、capture、passive等。
通过addEventListener添加的事件监听器可以同时添加多个，并且不会覆盖先前添加的监听器。当事件发生时，监听器会按照添加的顺序执行，可以确保多个处理函数按照预期顺序进行处理。
示例：
以下示例演示了如何使用addEventListener为按钮添加点击事件监听器：
const button = document.querySelector('button'); function handleClick() { console.log('Button clicked!'); } button.addEventListener('click', handleClick);
上述代码会在按钮被点击时输出"Button clicked!"。
addEventListener的优势：
- 可以在同一元素上添加多个事件监听器。
- 通过配置
options参数，可以设置更多的事件选项。 - 监听器执行的顺序与添加的顺序一致，提供了更好的可控性。
- 可以使用匿名函数作为事件处理函数，更灵活地编写代码。
总结：
addEventListener是在DOM元素上添加事件监听器的常用方法。它提供了一种有效的方式来处理特定事件发生时的操作，并且具有更高的灵活性和可扩展性。
