利用原生Js查找某元素在dom结构中的路径百度碰到的面试题例如如下dom结构找出.name下的第二个span的路径，应为

百度碰到的面试题

例如如下dom结构

<body>
    <div class="container">
        <div class="pic"></div>
        <div class="name">
          <span></span>
          <span id="test"></span>
        </div>
        <div class="tag">设计师</div>
    </div>
</body>

找出 .name下的第二个span的路径，应为: "body-div-div2-span2"（若元素为第一个元素，则省略序号）

代码如下

var span = document.getElementById("test") // 获取一下元素
function getXPath(target) {
  let res = [] 
  while (target.tagName.toLowerCase() !== "html") { // 默认根元素为body，所以html不做考虑，也为边界条件
    let index
    let children = Array.prototype.slice.call(target.parentNode.children,0) // 获取兄弟元素转化为数组，其实有更简便的方法siblings，面试时没写出来，这样也行。
    let elements = [] // 同类型元素的集合
    children.forEach((ele, i) => {
      if (ele.tagName === target.tagName) {
        elements.push(ele)
      }
    });
    elements.forEach((item, i) => {
      if (item === target) { // 元素可直接相等判断
        index = i
      }
    })
    let cur
    if (index === 0) { // 添加序号，0则不加，其余的再加1作为序号
      cur = target.tagName.toLowerCase()
    } else {
      cur = target.tagName.toLowerCase() + (index+1).toString()
    }
    res.unshift(cur)
    target = target.parentNode
  }
  return res.join("-") // 合并为字符串
}