JS操作 DOM 的方法事件和DOM方法：事件是在特定交互或状态变化时触发的操作，而 DOM 方法是用于操作和查询页面

事件和DOM方法：

事件是在特定交互或状态变化时触发的操作，而 DOM 方法是用于操作和查询页面内容的工具。

1. 获取元素

getElementById(id) : 获取具有指定 id 属性的元素。
```
let element = document.getElementById("myId");
```
getElementsByClassName(className) : 获取具有指定类名的所有元素，返回一个 HTMLCollection。
```
jet elements = document.getElementsByClassName("myClass");
```
getElementsByTagName(tagName) : 获取具有指定标签名的所有元素，返回一个 HTMLCollection。
```
let elements = document.getElementsByTagName("div");
```

querySelector(selector) : 返回匹配指定 CSS 选择器的第一个元素。

//选择类名为 myClass 的第一个元素
<div class="myClass">This is the first example</div>

<script>
let element = document.querySelector(".myClass");
console.log(element.textContent);
</script>

querySelectorAll(selector) : 返回匹配指定 CSS 选择器的所有元素，返回一个 NodeList。
```
let elements = document.querySelectorAll(".myClass");
```

2. 创建和添加元素

createElement(tagName) : 创建一个指定标签名的新元素。
```
let newElement = document.createElement("div");
```
appendChild(childNode) : 将一个子元素添加到父元素的末尾。
```
parentElement.appendChild(newElement);
```
insertBefore(newNode, referenceNode) : 在指定的子元素之前插入一个新的子元素。
```
parentElement.insertBefore(newElement, referenceElement);
```

3. 修改元素内容和属性

innerHTML: 获取或设置元素的 HTML 内容。
```
element.innerHTML = "<p>New Content</p>";
```
textContent: 获取或设置元素的文本内容。
```
element.textContent = "New Text";
```
setAttribute(name, value) : 设置元素的属性值。
```
element.setAttribute("class", "newClass");
```
getAttribute(name) : 获取元素的属性值。
```
let value = element.getAttribute("class");
```
removeAttribute(name) : 移除元素的指定属性。
```
element.removeAttribute("class");
```

4. 样式和类操作

style: 直接访问元素的内联样式。
```
element.style.backgroundColor = "red";
```
classList.add(className) : 添加一个或多个类到元素。
```
element.classList.add("newClass");
```
classList.remove(className) : 从元素中移除一个或多个类。
```
element.classList.remove("oldClass");
```
classList.toggle(className) : 切换元素的指定类（如果存在则移除，如果不存在则添加）。
```
element.classList.toggle("active");
```
classList.contains(className) : 检查元素是否包含指定的类。
```
let hasClass = element.classList.contains("active");
```

5. 删除元素

removeChild(childNode) : 从父元素中移除一个子元素。
```
parentElement.removeChild(childElement);
```
remove() : 直接删除当前元素。
```
element.remove();
```

6. 事件处理

addEventListener(event, handler) : 为元素添加事件监听器。

element.addEventListener("click", function() {
    alert("Element clicked!");
});

removeEventListener(event, handler) : 移除元素上的事件监听器。

在 addEventListener 中传递的事件处理函数的引用。必须传入与 addEventListener 时相同的函数引用，匿名函数无法移除。

如果你使用匿名函数作为事件处理程序，由于无法再引用这个函数，无法通过 removeEventListener 移除它。

let element = document.getElementById("myButton");

// 添加匿名函数的事件监听器
element.addEventListener("click", function() {
    alert("This can't be removed!");
});

// 下面的尝试将无法移除事件监听器，因为函数引用不一致
element.removeEventListener("click", function() {
    alert("This can't be removed!");
});

dispatchEvent(event) : 触发指定的事件。

//模拟表单提交。还可以触发简单的点击事件、触发带有数据的自定义事件

// 获取表单元素
let form = document.getElementById("myForm");

// 监听表单提交事件
form.addEventListener("submit", function(event) {
    event.preventDefault();  // 阻止实际提交
    console.log("Form was submitted!");
});

// 创建并触发提交事件
let submitEvent = new Event("submit", {
    bubbles: true,   // 事件将会冒泡
    cancelable: true // 事件可以被取消
});
form.dispatchEvent(submitEvent);  // 控制台输出: "Form was submitted!"

事件类型: dispatchEvent 可以触发任何标准的或自定义的 DOM 事件，如 "click", "submit", "change"，以及你自己定义的事件类型。

事件传播: 事件将按照标准的事件传播机制（捕获阶段 -> 目标阶段 -> 冒泡阶段）传播，除非该事件被取消或处理。

bubbles 和 cancelable: 如果需要事件冒泡或允许取消，可以在创建事件时设置这些选项。

通过 dispatchEvent，你可以精确控制和测试你的代码中如何响应事件的触发，非常有助于在开发和调试复杂的交互功能时使用。

7. 遍历和查找

parentNode: 获取元素的父节点。
```
let parent = element.parentNode;
```
childNodes: 获取元素的所有子节点，返回一个 NodeList。
```
let children = element.childNodes;
```
firstChild: 获取元素的第一个子节点。
```
let firstChild = element.firstChild;
```
lastChild: 获取元素的最后一个子节点。
```
let lastChild = element.lastChild;
```
nextSibling: 获取元素的下一个兄弟节点。
```
let nextSibling = element.nextSibling;
```
previousSibling: 获取元素的上一个兄弟节点。
```
let previousSibling = element.previousSibling;
```

8. 元素尺寸和位置

offsetWidth / offsetHeight: 获取元素的宽度/高度（包括内边距和边框）。
```
let width = element.offsetWidth;
let height = element.offsetHeight;
```
clientWidth / clientHeight: 获取元素+padding的宽度/高度（包括内边距，但不包括边框）。
```
let width = element.clientWidth;
let height = element.clientHeight;
```
getBoundingClientRect() : 获取元素的大小及其相对于视口的位置。
```
let rect = element.getBoundingClientRect();
```
这些方法涵盖了常见的 DOM 操作，可以帮助你在 JavaScript 中动态地创建、修改、删除、遍历以及操作网页上的 HTML 元素。

scrollIntoView

element.scrollIntoView([options]);

scrollIntoView 方法可以接收一个布尔值或一个对象作为参数：

布尔值

true: 将元素滚动到视口的顶部（默认行为）即元素的顶部对齐到浏览器视口的顶部。
false: 将元素滚动到视口的底部。

document.getElementById("myElement").scrollIntoView(true);  // 滚动到视口顶部
document.getElementById("myElement").scrollIntoView(false); // 滚动到视口底部

对象（更常用）
- behavior: 定义滚动行为。可以是 'auto'（默认值），'smooth'（平滑滚动）。
- block: 定义垂直方向的对齐方式。可以是 'start'，'center'，'end'，'nearest'。
- inline: 定义水平方向的对齐方式。可以是 'start'，'center'，'end'，'nearest'。
```
document.getElementById("myElement").scrollIntoView({
    behavior: 'smooth',
    block: 'start',
    inline: 'nearest'
});
```

示例

假设你有一个很长的页面，并且希望当用户点击某个按钮时，页面自动滚动到一个特定的元素，你可以使用 scrollIntoView 来实现。

HTML:

<button onclick="scrollToElement()">Scroll to Element</button>
<div style="height: 1500px;"></div> <!-- 模拟长页面 -->
<div id="targetElement">目标元素</div>

JavaScript:

function scrollToElement() {
    document.getElementById("targetElement").scrollIntoView({
        behavior: 'smooth',
        block: 'start'
    });
}

当用户点击按钮时，页面将平滑滚动到 targetElement 所在的位置。