节点获取绝对路径 - Javascript

有时候我们需要获取DOM节点的绝对路径，以便于实现一些高级操作。 本篇文章将介绍如何使用Javascript来获取DOM节点的绝对路径。

方法一：使用递归函数获取节点绝对路径

这个方法使用了递归函数，每次都会向上一级获取节点的tagName及其兄弟节点的index，最终返回完整的路径。

function getNodeAbsolutePath(node) {
  if (!node.parentElement) {
    return node.tagName;
  }

  var siblings = node.parentElement.children;
  var siblingIndex = 0;

  for (var i = 0; i < siblings.length; i++) {
    var sibling = siblings[i];

    if (sibling === node) {
      break;
    }

    sibling.nodeName === node.nodeName && siblingIndex++;
  }

  return getNodeAbsolutePath(node.parentElement) + '/' + node.tagName.toLowerCase() + '[' + (siblingIndex+1) + ']';
}

方法二：使用Element.prototype路径获取节点绝对路径

在Javascript中除了我们熟知的innerHTML、outerHTML等方法之外，还有一个类似的方法Element.prototype.outerHTML可以得到当前节点的HTML字符串。通过正则表达式匹配来获取节点的tagName以及节点的嵌套结构，最终返回完整的路径。

function getAbsolutePath(node) {
  var path = [];

  while (node !== document) {
    var tag = node.nodeName.toLowerCase();
    var parent = node.parentNode;

    if (parent && parent.nodeName) {
      var siblings = parent.children;
      var index = 1;
      for (var i = 0; i < siblings.length; i++) {
        var sibling = siblings[i];
        if (sibling === node) {
          break;
        }
        if (sibling.nodeName.toLowerCase() === tag) {
          index++;
        }
      }

      if (index > 1) {
        tag += '[' + index + ']';
      }
    }

    path.unshift(tag);
    node = node.parentNode;
  }

  return '/' + path.join('/');
}

以上两种方法均可以获取节点的绝对路径，根据自己的需求选择使用即可。

总结

本篇文章介绍了两种方法来获取DOM节点的绝对路径。其中一种使用了递归函数，另一种使用了Element.prototype路径。 通过本文的介绍，相信读者能够掌握获取DOM节点路径的方法，并且运用到实际开发中。