兄弟节点元素:和该元素处在同一等级的元素,如:
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
上述代码片段中 1 的兄弟元素为 2 和 3 ,要获取这两个元素
let list= document.getElementsByTagName('p')
for (let i = 0; i < list.length; i++) {
list[i].onclick = () => {
list[i].classList.add('isActive')
let par = list[i].parentNode.children
for (let j = 0; j < par.length; j++) {
if (par[j] != list[i]) {
par[j].classList.remove('isActive')
}
}
}
}
上述代码片段为:获取所有的p标签,给其中的一个p标签添加一个名为isActive的类名之后,其兄弟元素移出该类名,其中的par[j]为添加类名list[i]的兄弟元素。
思路为:先找到该节点元素list[i]的父级元素,再通过该父级元素查找所有的子元素,拿到不等于list[i]所有的子元素,即为list[i]兄弟元素。
enjoy it !
本文介绍了一种使用JavaScript操作DOM中兄弟节点的方法。通过获取所有p标签,并为其中一个添加类名'isActive',同时移除其兄弟元素上的相同类名,实现了元素间的交互效果。关键步骤包括定位目标元素、获取其父级元素及所有子元素,最终筛选出兄弟节点。

1078





