JS常用的DOM操作

选择元素

指定搜索

可以使用 querySelectorquerySelectorAll 方法选择指定的元素。

例如:

1
2
3
document.querySelector('.class')

document.querySelectorAll('p')

所有子DOM

1
mDom.querySelectorAll(".mcomp");

根据data-id搜索

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

获取最近的父DOM

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

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

子DOM只查找一层

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

使用

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

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

父DOM

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

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

1
var parentElement = childElement.parentNode;

parentNode 返回的是指定元素的直接父元素。

需要注意的是,在最上层的元素上调用 parentNode 会返回 null,因为它没有父元素。

另外,如果你希望获取更高级别的祖先元素,可以使用 parentElement.parentNode 连续调用 parentNode 方法来获取更高层次的父 DOM 元素。

或者,你可以使用 parentElement.parentElement 来获取直接父元素。

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

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

    它是许多 DOM 元素对象的特定属性,例如 HTMLInputElementHTMLDivElement 等。

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

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

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

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

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

子DOM

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

1
var children = parentElement.children;

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

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

1
var childNodes = parentElement.childNodes;

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

获取和修改元素的属性

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

例如:

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

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

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

例如:

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

添加和删除元素

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

例如:

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

监听事件

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

例如:

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

修改样式

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

例如:

1
element.style.color = 'red'