在js中操作DOM的常用方法

一. 获取DOM元素

• querySelector / querySelectorAll：返回文档中匹配指定 CSS 选择器的第一个元素或所有元素的 NodeList。
  const ele = document.querySelector('.header')
• getElementById / getElementsByClassName / getElementsByTagName：通过元素 ID / 类名 / 标签名获取 DOM 元素。
  const parentElement = document.getElementById("parentElementId");

二. 获取或设置元素的属性、样式、内容

• setAttribute / getAttribute：设置或获取元素的属性。
  ele.setAttribute('id', 'new-id');
const id = ele.getAttrubute('id');
• classList：用于添加、删除、检查元素的 class 组。
  ele.classList.add('new-class');
ele.classList.remove('new-class');
const hasClass = ele.classList.contains('some-class');
• style：获取或设置元素的样式。
  ele.style.color = 'red';
const color = ele.style.color;
• innerHTML：设置或获取元素内的 HTML 内容。
  ele.innerHTML = '<span>content</span>';
const content = ele.innerHTML;
• innerText：获取或设置元素的文本内容。与 innerHTML 的区别在于，innerText 只获取元素中显示的文本，会忽略 HTML 标签。渲染时也是按照文本渲染的，不会解析 HTML 代码。
  ele.innerText = 'content';
const content = ele.innerText;

三. 操作 DOM 子元素

• createElement：创建一个新的 DOM 元素
  var newElement = document.createElement("div");
• appendChild：将一个新元素添加到现有元素的子节点列表的末尾。
  parentElement.appendChild(newElement);
• insertBefore：将一个新元素插入到现有元素的子节点列表的特定位置。
  const referenceElement = document.getElementById("referenceElementId");
parentElement.insertBefore(newElement, referenceElement);
• removeChild：从其父元素的子节点列表中移除一个元素。
• replaceChild：用新元素替换现有元素。