获取元素
getElementById()：通过元素的id属性获取单个元素。这是最常用的方法之一，返回与指定id匹配的第一个元素对象。如果没有找到匹配的元素，则返回null。
var element = document.getElementById('myElement');
getElementsByClassName()：根据类名获取元素集合。它返回一个包含所有具有指定类名的元素的 HTMLCollection 对象。可以通过索引来访问集合中的元素。
var elements = document.getElementsByClassName('myClass');
for (var i = 0; i < elements.length; i++) {
console.log(elements[i]);
}
getElementsByTagName()：按照标签名获取元素集合。返回一个包含所有指定标签名的元素的 HTMLCollection 对象。同样，可以使用索引来遍历和操作集合中的元素。
var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.color = 'blue';
}
querySelector()和querySelectorAll()：querySelector()方法返回文档中匹配指定 CSS 选择器的第一个元素，而querySelectorAll()方法返回所有匹配的元素集合，以 NodeList 的形式返回。这两个方法提供了更灵活的元素选择方式，类似于在 CSS 中使用选择器来定位元素。
var firstDiv = document.querySelector('div');
var allButtons = document.querySelectorAll('button');
修改元素内容和属性
innerHTML：用于获取或设置元素内部的 HTML 内容。可以通过修改innerHTML属性来动态地改变元素中的文本、HTML 标签等内容。
var element = document.getElementById('myElement');
element.innerHTML = '<p>New content</p>';
textContent：与innerHTML类似，但它只会设置或获取元素内部的纯文本内容，不会解析 HTML 标签。var element = document.getElementById('myElement'); element.textContent = 'This is plain text';setAttribute()和getAttribute()：setAttribute()方法用于设置元素的指定属性值，而getAttribute()方法用于获取元素的指定属性值。var img = document.getElementById('myImage'); img.setAttribute('src', 'new-image.jpg'); var srcValue = img.getAttribute('src');
操作元素样式
style属性：可以直接通过元素的style属性来设置内联样式。可以修改各种 CSS 属性，如颜色、大小、位置等。
var element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '16px';
classList属性：用于操作元素的类名。可以通过add()、remove()、toggle()等方法来添加、移除或切换元素的类名，从而改变元素的样式。
var element = document.getElementById('myElement');
element.classList.add('highlight');
element.classList.remove('active');
element.classList.toggle('visible');
创建和添加元素
createElement()：用于创建一个新的 HTML 元素节点。创建后，可以设置其属性和内容，并将其添加到文档中的适当位置。
var newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div';
document.body.appendChild(newDiv);
appendChild()和insertBefore()：appendChild()方法将一个节点添加到指定父节点的子节点列表的末尾，而insertBefore()方法可以在指定的子节点之前插入一个新的节点。
var parent = document.getElementById('parentElement');
var newChild = document.createElement('p');
parent.appendChild(newChild);
var referenceChild = document.getElementById('reference');
var anotherNewChild = document.createElement('span');
parent.insertBefore(anotherNewChild, referenceChild);
事件处理
addEventListener()：用于为元素添加事件监听器。可以监听各种事件，如点击事件、鼠标移动事件、键盘事件等，并指定相应的事件处理函数。
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Button clicked');
});
这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具，通过它们可以动态地改变页面的内容、样式和行为，为用户提供丰富的交互体验。
