代码如下: // 兼容火狐获取一个节点的相同类型的上一个相邻节点 function perviousSiblingSameType(node , cnode ) { // 为空直接返回null if(node.previousSibling == null ) { return null ; } else { // 节点类型不相等继续递归 if(node.previousSibling.nodeType != cnode.nodeType) { return perviousSiblingSameType(node.previousSibling , cnode); } // 节点类型相等则返
在网页开发中，有时我们需要获取某个元素与其相邻的同类型元素，这在处理DOM操作时非常常见。在不同的浏览器环境下，实现这样的功能可能需要特定的兼容性代码。本篇文章主要探讨的是在Firefox（FF）浏览器下如何通过JavaScript来实现这个功能。
我们需要了解在DOM（文档对象模型）中，每个元素都有`previousSibling`和`nextSibling`属性，它们分别指向当前元素之前和之后的兄弟节点。然而，这些属性并不保证返回的相邻节点是同类型的，因此我们需要编写额外的逻辑来找到相同类型的相邻元素。
代码中定义了两个函数，`perviousSiblingSameType`和`nextSiblingSameType`，它们分别用于获取给定节点的前一个和后一个同类型的兄弟节点。
1. `perviousSiblingSameType(node, cnode)`函数：
- 参数`node`：要查询的节点。
- 参数`cnode`：参考节点，用于比较节点类型。
- 首先检查`node.previousSibling`是否为`null`，如果为空，则没有前一个兄弟节点，返回`null`。
- 接着，如果`node.previousSibling.nodeType`与`cnode.nodeType`不相等，表示找到的节点不是我们要找的同类型节点，于是递归调用函数，将`node.previousSibling`作为新的`node`继续查找。
- 当`node.previousSibling.nodeType`与`cnode.nodeType`相等时，说明找到了匹配的前一个同类型节点，返回`node.previousSibling`。
2. `nextSiblingSameType(node, cnode)`函数：
- 这个函数的逻辑与`perviousSiblingSameType`相似，只是查找方向相反，它检查`node.nextSibling`而不是`node.previousSibling`。
- 如果`node.nextSibling`为空，返回`null`。
- 如果`node.nextSibling.nodeType`与`cnode.nodeType`不相等，递归调用函数，用`node.nextSibling`作为新的`node`继续查找。
- 当`node.nextSibling.nodeType`与`cnode.nodeType`相等，返回`node.nextSibling`。
这两个函数通过递归的方式遍历节点的相邻兄弟，直到找到同类型的元素或遍历完所有兄弟节点。它们在Firefox下可以很好地工作，但请注意，在其他浏览器如Chrome、Safari或IE中，可能需要额外的兼容性处理，因为不同浏览器对DOM API的实现可能存在差异。
总结来说，获取元素同类型的相邻元素在JavaScript中可以通过遍历`previousSibling`和`nextSibling`属性并检查节点类型来实现。在实际应用中，为了确保跨浏览器兼容性，开发者通常会使用像jQuery、React、Vue等库提供的API，它们已经处理了不同浏览器之间的差异，简化了开发过程。然而，理解这种基础的DOM操作对于深入学习前端开发和优化性能是至关重要的。
