js中DOM的基础方法

获取元素

• 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基础方法是操作网页文档结构和实现交互效果的重要工具，通过它们可以动态地改变页面的内容、样式和行为，为用户提供丰富的交互体验。