极客笔记JavaScript DOM操作
1. 什么是DOM？
DOM（Document Object Model，文档对象模型）是JavaScript操作HTML和XML文档的接口。它将页面结构化为一个树形的数据结构，可以通过JavaScript来访问、操作和修改网页中的元素。
DOM文档树的根节点是document对象，它代表整个文档。DOM将HTML或XML文档解析为一个树形结构，其中每个元素都是一个节点，通过这些节点可以对页面进行增删改查的操作。
2. DOM节点
DOM节点是文档中的各个元素。DOM节点分为以下几种类型：
Element：HTML文档中的标签元素，如<div>、<p>等。Attribute：HTML元素的属性。Text：HTML元素中的文本内容。Comment：HTML文档中的注释。Document：整个文档。
JavaScript可以通过DOM提供的方法和属性来获取和操作DOM节点。
2.1 获取DOM节点
在JavaScript中，可以通过以下方法来获取DOM节点：
getElementById(id)：通过元素的id属性获取节点。getElementsByClassName(className)：通过元素的类名获取节点数组。getElementsByTagName(tagName)：通过元素的标签名获取节点数组。querySelector(selector)：通过CSS选择器获取第一个匹配的节点。querySelectorAll(selector)：通过CSS选择器获取所有匹配的节点数组。
示例代码：
// 获取id为"myDiv"的节点
var myDiv = document.getElementById("myDiv");
// 获取类名为"myClass"的节点数组
var myClassElements = document.getElementsByClassName("myClass");
// 获取标签名为"p"的节点数组
var pElements = document.getElementsByTagName("p");
// 获取第一个类名为"myClass"的节点
var firstMyClass = document.querySelector(".myClass");
// 获取所有类名为"myClass"的节点数组
var allMyClass = document.querySelectorAll(".myClass");
2.2 操作DOM节点
通过DOM对象提供的方法和属性，可以对DOM节点进行操作。
2.2.1 修改节点内容
nodeValue属性：获取或设置节点的文本内容。
示例代码：
// 获取id为"myDiv"的节点
var myDiv = document.getElementById("myDiv");
// 修改节点的文本内容
myDiv.nodeValue = "Hello, DOM!";
2.2.2 修改节点属性
getAttribute(name)：获取属性值。setAttribute(name, value)：设置属性值。
示例代码：
// 获取id为"myLink"的节点
var myLink = document.getElementById("myLink");
// 获取href属性值
var hrefValue = myLink.getAttribute("href");
// 设置href属性值
myLink.setAttribute("href", "https://www.example.com");
2.2.3 添加和删除节点
appendChild(node)：添加子节点。removeChild(node)：删除子节点。
示例代码：
// 获取id为"myList"的有序列表节点
var myList = document.getElementById("myList");
// 创建一个新的列表项节点
var newItem = document.createElement("li");
newItem.textContent = "New Item";
// 添加新的列表项节点到列表中
myList.appendChild(newItem);
// 删除列表中的第一个列表项节点
var firstItem = myList.firstChild;
myList.removeChild(firstItem);
2.2.4 修改节点样式
style属性：获取或设置节点的样式。
示例代码：
// 获取id为"myDiv"的节点
var myDiv = document.getElementById("myDiv");
// 修改节点的样式
myDiv.style.color = "red";
myDiv.style.fontSize = "20px";
2.3 遍历DOM节点树
可以通过以下方法来遍历DOM节点树：
parentNode属性：获取父节点。childNodes属性：获取子节点列表。firstChild属性：获取第一个子节点。lastChild属性：获取最后一个子节点。nextSibling属性：获取下一个兄弟节点。previousSibling属性：获取上一个兄弟节点。
示例代码：
// 获取id为"myList"的有序列表节点
var myList = document.getElementById("myList");
// 遍历子节点列表
for (var i = 0; i < myList.childNodes.length; i++) {
var item = myList.childNodes[i];
console.log(item.textContent);
}
// 获取第一个子节点
var firstItem = myList.firstChild;
// 获取最后一个子节点
var lastItem = myList.lastChild;
// 获取下一个兄弟节点
var nextItem = firstItem.nextSibling;
// 获取上一个兄弟节点
var previousItem = lastItem.previousSibling;
3. DOM事件
DOM事件是用户与网页交互时触发的动作，比如点击按钮、鼠标移动等。通过使用DOM事件，可以在特定的事件发生时执行相应的JavaScript代码。
3.1 添加事件监听器
可以通过以下方法来为DOM节点添加事件监听器：
addEventListener(event, listener)：为节点添加事件监听器。
示例代码：
// 获取id为"myButton"的按钮节点
var myButton = document.getElementById("myButton");
// 添加点击事件监听器
myButton.addEventListener("click", function() {
console.log("Button clicked!");
});
3.2 事件类型
常见的DOM事件类型包括：
click：点击事件。mouseover：鼠标移入事件。mouseout：鼠标移出事件。keydown：按下键盘事件。keyup：松开键盘事件。
示例代码：
// 获取id为"myDiv"的节点
var myDiv = document.getElementById("myDiv");
// 添加鼠标移入事件监听器
myDiv.addEventListener("mouseover", function() {
console.log("Mouse over!");
});
// 添加键盘按下事件监听器
window.addEventListener("keydown", function(event) {
console.log("Key pressed: " + event.key);
});
3.3 事件传递机制
DOM事件有三个阶段：捕获阶段、目标阶段和冒泡阶段。
- 捕获阶段：事件从最外层的祖先节点依次往下传递到目标节点。
- 目标阶段：事件达到目标节点时触发。
- 冒泡阶段：事件从目标节点往上冒泡到最外层的祖先节点。
通过addEventListener方法的第三个参数可以指定事件是否在捕获阶段触发。
示例代码：
// 获取id为"myDiv"的节点
var myDiv = document.getElementById("myDiv");
// 添加点击事件监听器，并在捕获阶段触发
myDiv.addEventListener("click", function() {
console.log("Div clicked in capturing phase!");
}, true);
// 添加点击事件监听器，并在冒泡阶段触发
myDiv.addEventListener("click", function() {
console.log("Div clicked in bubbling phase!");
}, false);
总结
通过JavaScript对DOM进行操作，可以实现动态的网页交互效果。DOM提供了丰富的方法和属性来获取和操作HTML元素，可以通过获取节点、修改节点内容、属性和样式，添加和删除节点，以及遍历节点树等操作。
同时，可以通过添加事件监听器来响应用户的交互行为，例如点击按钮、鼠标移动等。DOM事件可以在特定的事件发生时执行相应的JavaScript代码。
在进行DOM操作时，需要注意以下几点：
- 尽量减少DOM查询和操作次数，因为这些操作会带来性能开销。可以通过使用变量缓存已获取的节点，以及批量操作多个节点来提高性能。
-
使用事件委托（Event Delegation）技术可以减少事件监听器的数量。将事件监听器添加到父元素，然后根据事件目标来判断具体触发事件的子元素，可以有效管理事件处理。
-
考虑浏览器的兼容性。不同的浏览器可能对DOM操作的支持有差异，可以使用浏览器兼容性库或根据浏览器类型进行判断和适配。
总之，掌握DOM操作技术可以灵活地控制和修改网页内容，实现丰富的交互效果。在编程过程中，建议结合具体需求和场景，合理运用DOM操作的方法和属性，为用户提供更好的网页体验。