原生js怎么找所有同级元素

原生JS找所有同级元素的方法包括使用兄弟节点遍历、使用父节点子节点遍历、使用相邻兄弟选择器等方法。本文将详细介绍每种方法，并为每种方法提供具体的代码示例和应用场景。

一、使用兄弟节点遍历

兄弟节点遍历是通过遍历DOM树中的兄弟节点来找到所有同级元素。这种方法的优点是简单直接，但需要手动编写遍历逻辑。

1. 获取下一个兄弟节点

function getNextSiblings(elem) {
    let siblings = [];
    while (elem = elem.nextElementSibling) {
        siblings.push(elem);
    }
    return siblings;
}

这个函数通过nextElementSibling属性遍历每个元素的下一个兄弟节点，并将其加入到一个数组中，最终返回这个数组。

2. 获取上一个兄弟节点

function getPreviousSiblings(elem) {
    let siblings = [];
    while (elem = elem.previousElementSibling) {
        siblings.push(elem);
    }
    return siblings;
}

类似地，这个函数通过previousElementSibling属性遍历每个元素的上一个兄弟节点，并将其加入到一个数组中，最终返回这个数组。

3. 获取所有兄弟节点

function getAllSiblings(elem) {
    return [...getPreviousSiblings(elem).reverse(), ...getNextSiblings(elem)];
}

这个函数结合了前面两个函数，先获取上一个兄弟节点，再获取下一个兄弟节点，并将它们组合成一个数组返回。

二、使用父节点子节点遍历

这种方法是通过获取元素的父节点，然后遍历父节点的所有子节点来找到所有同级元素。这种方法的优点是逻辑清晰，代码简洁。

1. 获取同级元素

function getSiblings(elem) {
    return [...elem.parentNode.children].filter(child => child !== elem);
}

这个函数首先通过parentNode属性获取元素的父节点，然后通过children属性获取父节点的所有子节点，并过滤掉当前元素本身，最终返回一个包含所有同级元素的数组。

三、使用相邻兄弟选择器

相邻兄弟选择器是一种更加简洁的方法，通过CSS选择器来获取同级元素。这种方法的优点是代码简洁，但不如前两种方法灵活。

1. 使用CSS选择器获取同级元素

function getSiblingsUsingSelector(elem) {
    return [...elem.parentNode.querySelectorAll(':scope > *')].filter(child => child !== elem);
}

这个函数通过:scope > *选择器获取父节点的所有直接子节点，并过滤掉当前元素本身，最终返回一个包含所有同级元素的数组。

四、应用场景与推荐系统

在实际项目中，寻找同级元素的操作可能会出现在各种场景中，如表单验证、DOM操作、动态内容加载等。在这些场景中，选择合适的工具和方法可以提高开发效率和代码质量。

1. 表单验证

在表单验证中，可能需要找到所有同级的输入字段，以便进行批量验证和错误提示。这时可以使用上面介绍的方法来获取所有同级元素，并进行相应的操作。

2. 动态内容加载

在动态内容加载中，可能需要找到同级元素以便进行插入、删除、替换等操作。通过找到同级元素，可以更方便地进行DOM操作，提升用户体验。

3. 项目管理系统推荐

在管理项目时，选择合适的项目管理系统也非常重要。推荐以下两个系统：

研发项目管理系统PingCode：专注于研发项目管理，提供丰富的功能和灵活的配置，适合研发团队使用。
通用项目协作软件Worktile：适用于各种类型的项目管理，提供强大的协作功能和易用的界面，适合广泛的团队使用。

五、代码示例与最佳实践

在实际开发中，合理使用上述方法可以提高代码的可读性和维护性。以下是一些最佳实践和代码示例，帮助你更好地应用这些方法。

1. 使用函数封装

将常用的操作封装成函数，可以提高代码的复用性和可维护性。

function getSiblings(elem) {
    return [...elem.parentNode.children].filter(child => child !== elem);
}
function highlightSiblings(elem) {
    getSiblings(elem).forEach(sibling => {
        sibling.style.backgroundColor = 'yellow';
    });
}

2. 优化性能

在大规模DOM操作中，可以通过减少DOM访问次数和批量操作来优化性能。

function getSiblings(elem) {
    const parent = elem.parentNode;
    const children = Array.from(parent.children);
    return children.filter(child => child !== elem);
}
function batchUpdateStyles(elems, styles) {
    elems.forEach(elem => {
        Object.assign(elem.style, styles);
    });
}
function highlightSiblings(elem) {
    const siblings = getSiblings(elem);
    batchUpdateStyles(siblings, { backgroundColor: 'yellow' });
}

六、总结

通过本文的介绍，我们详细探讨了原生JS找所有同级元素的方法，包括使用兄弟节点遍历、使用父节点子节点遍历、使用相邻兄弟选择器等方法。并结合实际场景，推荐了两个项目管理系统：研发项目管理系统PingCode和通用项目协作软件Worktile。希望本文能帮助你在项目开发中更好地处理同级元素的操作，提高开发效率和代码质量。