JS DOM中的获取节点和操作节点

在JavaScript中，可以使用DOM API来获取和操作DOM节点。以下是一些基本的方法：

1. 通过ID获取元素：

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

2. 通过类名获取元素集合：

var elements = document.getElementsByClassName('className');

3. 通过标签名获取元素集合：

var elements = document.getElementsByTagName('tagName');

4. 通过CSS选择器获取单个元素：

var element = document.querySelector('.className');

5. 通过CSS选择器获取元素集合：

var elements = document.querySelectorAll('.className');

6. 创建新节点：

var newElement = document.createElement('div');
newElement.innerHTML = 'Hello, World!';

7. 添加子节点：

var parentElement = document.getElementById('parentElementId');
parentElement.appendChild(newElement);

8. 插入节点为兄弟节点：

var referenceElement = document.getElementById('referenceElementId');
var parentElement = referenceElement.parentNode;
parentElement.insertBefore(newElement, referenceElement);

9. 删除节点：

var elementToRemove = document.getElementById('elementToRemoveId');
elementToRemove.parentNode.removeChild(elementToRemove);

10. 替换节点：

var newNode = document.createElement('div');
var oldNode = document.getElementById('oldNodeId');
oldNode.parentNode.replaceChild(newNode, oldNode);

11. 获取和设置属性：

var element = document.getElementById('elementId');
var attributeValue = element.getAttribute('attributeName');
element.setAttribute('attributeName', 'newValue');

12. 获取和设置节点内容：

var element = document.getElementById('elementId');
var content = element.textContent; // 获取文本内容
element.textContent = 'New content'; // 设置文本内容

13. 获取和设置节点的HTML内容：

var element = document.getElementById('elementId');
var htmlContent = element.innerHTML; // 获取HTML内容
element.innerHTML = '<strong>New content</strong>'; // 设置HTML内容

14. 获取和设置节点的值（例如输入框的值）：

var inputElement = document.getElementById('inputElementId');
var value = inputElement.value; // 获取值
inputElement.value = 'New value'; // 设置值

这些是DOM操作的基本方法，可以根据需要进行组合和使用。