兄弟节点元素:和该元素处在同一等级的元素,如:
<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 !