要获取被访问元素的兄弟节点,可以使用JavaScript中的DOM方法来实现。以下是一个示例代码:
HTML代码:
兄弟节点1
兄弟节点2
被访问的节点
兄弟节点3
JavaScript代码:
// 获取被访问节点
var visitedNode = document.querySelector('.visited');
// 获取兄弟节点
var siblingNodes = Array.from(visitedNode.parentNode.children).filter(function(child) {
return child !== visitedNode;
});
// 添加样式给兄弟节点
siblingNodes.forEach(function(node) {
node.classList.add('highlight');
});
CSS代码:
.highlight {
background-color: yellow;
}
在上面的示例中,我们首先通过document.querySelector('.visited')
获取到被访问的节点。然后,我们使用parentNode
属性获取到被访问节点的父节点,再利用children
属性获取到所有的子节点。接下来,我们使用filter
方法来过滤掉被访问节点本身,得到一个兄弟节点的数组。最后,我们使用classList.add()
方法为兄弟节点添加一个名为highlight
的样式类,从而改变它们的样式。
请注意,上述代码使用了Array.from()
方法将类数组对象转换为真正的数组,以便使用数组的filter()
和forEach()
方法。如果你的浏览器支持ES6或以上的版本,可以直接使用上述代码。如果你的浏览器不支持ES6,你可以使用其他方法将类数组对象转换为数组,例如使用Array.prototype.slice.call()
方法。
上一篇:北方邻居不在链接邻居中