JS常用的DOM操作

选择元素

指定搜索

可以使用 querySelector 或 querySelectorAll 方法选择指定的元素。

例如：

document.querySelector('.class')

document.querySelectorAll('p')

所有子DOM

mDom.querySelectorAll(".mcomp");

根据data-id搜索

//防止移动到同一个地方时 DOM复用导致无法显示
let hideDom = document.querySelector(
  '[data-id="' + moveNodeObj.id + '"]'
);
if (hideDom) {
  hideDom.style.opacity = 1;
}

获取最近的父DOM

closest 方法是用于查找元素的最近祖先元素，包括自身。

let mDom = targetDom.closest(".mcomp");

父DOM

要获取一个 DOM 元素的父元素，可以使用其 parentElement 属性。

以下是一个示例，展示如何获取一个元素的父元素：

const parentElement = page.parentElement

要使用HTML中DOM的方法最好用parentElement，因为parentNode缺少很多方法。

parentElement 和 parentNode 是两个不同的属性，用于获取 DOM 元素的父元素，但存在一些区别。

1. parentElement 是一种非标准属性，仅在 HTMLElement 对象上可用，而不是在所有的 DOM 元素对象上都可用。

   它是许多 DOM 元素对象的特定属性，例如 HTMLInputElement、HTMLDivElement 等。

   parentElement 返回元素的直接父元素，如果没有父元素，则返回 null。

2. parentNode 是 DOM Node 接口定义的标准属性，可在任何 DOM 元素对象上使用。

   parentNode 返回元素的直接父节点，如果没有父节点，则返回 null。

总的来说，主要区别在于不同类型的 DOM 元素对象上可用性和实现规范。

在绝大多数情况下，我们会使用 parentNode 属性来获取 DOM 元素的父元素，因为它是标准化的。

子DOM

使用 children 属性获取所有子元素节点，其中不包括文本节点和注释节点：

var children = parentElement.children;

children 返回的是一个实时更新的 HTMLCollection 对象，包含指定元素的所有非文本子元素节点。

使用 childNodes 属性获取所有子节点，包括文本节点和注释节点：

var childNodes = parentElement.childNodes;

childNodes 返回的是一个类数组的对象，可以通过索引来访问每个子节点。需要注意的是，包括空白文本节点和注释节点在内。

子DOM只查找一层

let mcompList = mDom.querySelectorAll(":scope > .mcomp");

使用

• :scope 选择器可以限制选择器范围仅在当前元素内部进行搜索。

• > 选择器表示只选择直接子元素。

同级DOM

前一个DOM

// 获取目标元素
const targetElement = document.getElementById('target');
// 获取目标元素的上一个同级元素
const previousElement = targetElement.previousElementSibling;

if (previousElement) {
    console.log('上一个同级元素的文本内容是: ', previousElement.textContent);
} else {
    console.log('没有上一个同级元素。');
}

后一个DOM

// 获取目标元素
const targetElement = document.getElementById('target');
// 获取目标元素的下一个同级元素
const nextElement = targetElement.nextElementSibling;

if (nextElement) {
    console.log('下一个同级元素的文本内容是: ', nextElement.textContent);
} else {
    console.log('没有下一个同级元素。');
}

获取和修改元素的属性

可以使用 getAttribute 和 setAttribute 方法来获取和设置元素的属性。

例如：

element.getAttribute('src')
element.setAttribute('class', 'new-class')

获取和修改元素的文本内容

可以使用 textContent 属性来获取和设置元素的文本内容。

例如：

element.textContent 
element.textContent = '新的文本内容'

添加和删除元素

可以使用 createElement 创建新的元素，使用 appendChild 将新元素添加到指定的父元素中，使用 removeChild 或 remove 方法从父元素中移除指定的子元素。

例如：

var newElement = document.createElement('div')
parentElement.appendChild(newElement)
parentElement.removeChild(childElement)

监听事件

可以使用 addEventListener 方法添加事件监听器，以响应用户交互和其他事件。

例如：

element.addEventListener('click', function() { ... })

修改样式

可以使用 style 属性来修改元素的样式。

例如：

element.style.color = 'red'