如何为相同class的div建立索引并在指定起始节点后执行搜索

节点筛选逻辑 #

可以直接用querySelectorAll，配合原生DOM位置判断API过滤掉起始节点之前的元素，步骤如下：

• 第一步获取时间线起始标识节点：将timeline-start-class替换为你实际的起始div的class名

  const timelineStartNode = document.querySelector('.timeline-start-class')
  

• 第二步获取所有目标搜索class的div：将timeline-item-class替换为你实际的需要参与搜索的div的class名

  const allTimelineItems = document.querySelectorAll('.timeline-item-class')
  

• 第三步过滤出起始节点之后的有效节点，使用原生compareDocumentPositionAPI判断相对位置，不会受DOM嵌套结构影响

  const validSearchItems = Array.from(allTimelineItems).filter(item => {
    // DOCUMENT_POSITION_FOLLOWING位掩码为4，代表当前节点在起始节点之后
    return timelineStartNode.compareDocumentPosition(item) & Node.DOCUMENT_POSITION_FOLLOWING
  })
  

搜索索引生成逻辑 #

基于过滤后的有效节点生成搜索索引，方便后续快速匹配，索引结构可根据实际搜索需求调整：

const searchIndex = validSearchItems.map((node, index) => {
  return {
    index: index,
    // 提取节点内所有文本并转小写，实现大小写不敏感的模糊搜索
    searchContent: node.textContent.trim().toLowerCase(),
    // 保留原DOM节点引用，命中后可直接做高亮、滚动定位等操作
    domRef: node
  }
})

回车触发搜索完整示例 #

const searchInput = document.querySelector('#search-input') // 替换为实际搜索框的选择器

searchInput.addEventListener('keydown', e => {
  // 同时兼容key和keyCode写法，覆盖不同浏览器兼容性
  if (e.key === 'Enter' || e.keyCode === 13) {
    e.preventDefault()
    const keyword = searchInput.value.trim().toLowerCase()
    
    // 关键词为空时重置所有节点样式
    if (!keyword) {
      validSearchItems.forEach(node => node.classList.remove('search-highlight'))
      return
    }

    // 遍历索引匹配关键词
    searchIndex.forEach(item => {
      if (item.searchContent.includes(keyword)) {
        item.domRef.classList.add('search-highlight')
        // 可选配置：自动滚动到第一个命中的节点
        // if (item.index === 0) item.domRef.scrollIntoView({ behavior: 'smooth', block: 'center' })
      } else {
        item.domRef.classList.remove('search-highlight')
      }
    })
  }
})

补充说明：如果时间线是动态加载内容的，每次新增节点后重新执行节点筛选和索引生成的逻辑即可，不需要修改核心匹配逻辑。

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