选择元素
指定搜索
可以使用 querySelector
或 querySelectorAll
方法选择指定的元素。
例如:
1 | document.querySelector('.class') |
所有子DOM
1 | mDom.querySelectorAll(".mcomp"); |
根据data-id搜索
1 | //防止移动到同一个地方时 DOM复用导致无法显示 |
获取最近的父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
来获取直接父元素。
parentElement
和 parentNode
是两个不同的属性,用于获取 DOM 元素的父元素,但存在一些区别。
parentElement
是一种非标准属性,仅在 HTMLElement 对象上可用,而不是在所有的 DOM 元素对象上都可用。它是许多 DOM 元素对象的特定属性,例如
HTMLInputElement
、HTMLDivElement
等。parentElement
返回元素的直接父元素,如果没有父元素,则返回null
。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
返回的是一个类数组的对象,可以通过索引来访问每个子节点。需要注意的是,包括空白文本节点和注释节点在内。
获取和修改元素的属性
可以使用 getAttribute
和 setAttribute
方法来获取和设置元素的属性。
例如:
1 | element.getAttribute('src') |
获取和修改元素的文本内容
可以使用 textContent
属性来获取和设置元素的文本内容。
例如:
1 | element.textContent |
添加和删除元素
可以使用 createElement
创建新的元素,使用 appendChild
将新元素添加到指定的父元素中,使用 removeChild
或 remove
方法从父元素中移除指定的子元素。
例如:
1 | var newElement = document.createElement('div') |
监听事件
可以使用 addEventListener
方法添加事件监听器,以响应用户交互和其他事件。
例如:
1 | element.addEventListener('click', function() { ... }) |
修改样式
可以使用 style
属性来修改元素的样式。
例如:
1 | element.style.color = 'red' |