常用DOM 目录获取DOM节点通过ID查找节点通过标签名查找节点通过类名查找节点通过CSS选择器查找单个节点

获取DOM节点

通过ID查找节点

let element = document.getElementById('elementId');

通过标签名查找节点

let elements = document.getElementsByTagName('tagName'); // 返回HTMLCollection

通过类名查找节点

let elements = document.getElementsByClassName('className'); 
// 返回HTMLCollection

通过CSS选择器查找单个节点

let element = document.querySelector('.className #elementId'); 
// 返回第一个匹配的元素

通过CSS选择器查找所有节点

let elements = document.querySelectorAll('.className, #elementId'); 
// 返回NodeList

通过关系获取节点

获取下一个兄弟节点

let nextSibling = element.nextElementSibling;

获取上一个兄弟节点

let prevSibling = element.previousElementSibling;

获取所有子节点（元素节点）

let children = element.children; // 返回HTMLCollection，只包含元素节点

获取父级节点

let parent = element.parentNode; 
//如果需要父元素节点，可以使用element.parentElement

创建、删除、替换和克隆节点

创建节点

let newElement = document.createElement('tagName');

删除节点（自删除）
```
element.remove();
```
删除子节点
```
parentElement.removeChild(childNode);
```

替换节点

parentElement.replaceChild(newNode, oldNode);

克隆节点

let clonedNode = originalNode.cloneNode(true); 
// true表示深拷贝，false表示浅拷贝

操作节点属性

设置属性

element.setAttribute('attributeName', 'value');

获取属性

let value = element.getAttribute('attributeName');

删除属性

element.removeAttribute('attributeName');

类名操作

直接设置类名（会覆盖原有的类名）
```
element.className = 'newClassName';
```

使用classList操作类名

element.classList.add('className'); // 添加
element.classList.remove('className'); // 删除
element.classList.toggle('className'); // 切换
let hasClass = element.classList.contains('className'); // 判断是否存在

向标签内部写入内容

写入文本

element.innerText = 'text'; // 不会解析HTML
element.textContent = 'text'; // 与innerText类似，但兼容性更好

写入文本或标签

element.innerHTML = '<p>HTML content</p>'; // 会解析HTML

事件处理

基本事件

element.onclick = function() { /* code */ };
element.onmouseenter = function() { /* code */ };
element.onmouseleave = function() { /* code */ };
element.onmousemove = function() { /* code */ };

阻止事件冒泡
```
event.stopPropagation();
```
阻止默认行为
```
event.preventDefault();
```

输入框事件

inputElement.onblur = function() { /* code when element loses focus */ };
inputElement.onfocus = function() { /* code when element gains focus */ };
inputElement.oninput = function() { /* code when input value changes */ };
inputElement.onchange = function() { 
/* code when input value is committed (e.g., after losing focus and value has changed) */ 
};

键盘事件

element.onkeydown = function(event) { 
/* code; event.keyCode is deprecated, use event.key or event.code */ 
};
element.onkeyup = function(event) { /* code */ };

绑定事件（不推荐，因为无法绑定多个事件处理器）
```
element.onclick = function() { /* code */ };
```

事件监听（推荐方式）

element.addEventListener('click', function(event) { /* code */ });
element.addEventListener('mouseenter', function(event) { /* code */ }, false); 
// 第三个参数为捕获阶段（可选，默认为false，即冒泡阶段）

移除事件监听

element.removeEventListener('click', functionReference); 
// 必须传递与添加时相同的函数引用

注意：event.keyCode 在现代浏览器中已被弃用，建议使用 event.key 或 event.code 来获取键盘事件的键值。同时，当使用 addEventListener 和 removeEventListener 时，传递给 removeEventListener 的函数必须与传递给 addEventListener 的函数完全相同（通常是同一个函数引用）。如果传递的是匿名函数，则无法正确移除事件监听器。

常用DOM