JavaScript获取前一个兄弟锚点元素ID的问题及解决方法

我之前在实现锚点面包屑导航时，也碰到过一模一样的问题：点击某个面包屑项，想获取它前一个兄弟元素（也就是父分类）的ID，但用alert(this.previousSibling)返回的却是[object Text]，尝试this.previousSibling.id也完全拿不到想要的值。

问题原因 #

这是因为previousSibling会把DOM里的所有节点都算作兄弟，包括文本节点（比如面包屑之间的箭头符号、换行符、空格这些看不见的内容）。你的面包屑结构Fruits> Apples> Green apples里，>和前后的空格其实就是一个文本节点，所以this.previousSibling先捕获到的是它，而不是你想要的父分类元素，自然就取不到id属性了。

解决方法 #

要精准获取前一个元素类型的兄弟节点，得用previousElementSibling这个属性——它只会筛选出元素节点，忽略文本节点。把代码里的写法改成：

this.previousElementSibling.id

这样就能正常拿到父分类的ID了。

我已经用这个方法成功解决了问题，特别感谢Xufox和Skyline3000的快速解答！

内容的提问来源于stack exchange，提问作者OuzoPower