BFE.devAI解答 - JavaScript 代码题
170. 生成特定元素的CSS选择器

这道题需要用到深度优先遍历DOM树的方法，同时要记录每一个DOM元素的tagName、id、class等信息。具体实现如下：

function generateSelector(root, target) {  let selector = ''  let node = target  while (node !== root) {    let parentNode = node.parentNode    let siblings = Array.from(parentNode.children)    let tagName = node.tagName.toLowerCase()    let id = node.id ? `#${node.id}` : ''    let className = node.className ? `.${node.className.replace(/\s+/g, '.')}` : ''    let index = siblings.findIndex(el => el === node) + 1    let selectorSegment = `${tagName}${id}${className}:nth-child(${index})`    selector = selector ? `${selector} > ${selectorSegment}` : selectorSegment    node = parentNode  }  return selector}

具体来说，我们从目标元素开始，逐级向上查找其父元素，直到根元素。对于每一个元素，我们获取其tagName、id、className等信息，并且计算其相对于兄弟元素的位置，从而得到一个selectorSegment，表示该元素在父元素中的选择器段落。将所有的selectorSegment进行拼接，我们最终得到了一个完整的CSS选择器。

需要注意的是，对于className的处理，我们需要将所有的空格替换为"."，以免在选择器中出现多个className之间不必要的空格。

测试效果如下：

let root = document.querySelector('div')let target = root.querySelector('button')let selector = generateSelector(root, target) // 'button'expect(root.querySelector(selector)).toBe(target)selector = generateSelector(root, target) // 'div > div > p > span > button'expect(root.querySelector(selector)).toBe(target)