Javascript 构建DOM中任何给定节点的querySelector字符串值

我试图找到一种方法来构建任何给定节点的querySelector字符串。换句话说，选择页面上的任何节点，是否可以遍历DOM并构建一个字符串，使我能够将生成的字符串传递给document.querySelector并返回我选择的节点

---

据我所知，querySelector有一个bug，您只能在字符串中使用第n个子元素一次

---

我试了好几次，但至今没有找到解决办法。我想用本机JavaScript而不是jQuery来实现这一点。有什么建议吗？

我知道这个问题是从2015年开始的，但我刚刚解决了这个问题，为此我必须构建一个自定义函数

我制作了一个片段来测试它，只需单击任何元素，querySelector就会在底部div中显示为字符串

function getQuerySelector(elem) {

  var element = elem;
  var str = "";

  function loop(element) {

    // stop here = element has ID
    if(element.getAttribute("id")) {
      str = str.replace(/^/, " #" + element.getAttribute("id"));
      str = str.replace(/\s/, "");
      str = str.replace(/\s/g, " > ");
      return str;
    }

    // stop here = element is body
    if(document.body === element) {
      str = str.replace(/^/, " body");
      str = str.replace(/\s/, "");
      str = str.replace(/\s/g, " > ");
      return str;
    }

    // concat all classes in "queryselector" style
    if(element.getAttribute("class")) {
      var elemClasses = ".";
      elemClasses += element.getAttribute("class");
      elemClasses = elemClasses.replace(/\s/g, ".");
      elemClasses = elemClasses.replace(/^/g, " ");
      var classNth = "";

      // check if element class is the unique child
      var childrens = element.parentNode.children;

      if(childrens.length < 2) {
        return;
      }

      var similarClasses = [];

      for(var i = 0; i < childrens.length; i++) {
        if(element.getAttribute("class") == 
childrens[i].getAttribute("class")) {
          similarClasses.push(childrens[i]);
        }
      }

      if(similarClasses.length > 1) {
        for(var j = 0; j < similarClasses.length; j++) {
          if(element === similarClasses[j]) {
            j++;
            classNth = ":nth-of-type(" + j + ")";
            break;
          }
        }
      }

      str = str.replace(/^/, elemClasses + classNth);

    }
    else{

      // get nodeType
      var name = element.nodeName;
      name = name.toLowerCase();
      var nodeNth = "";

      var childrens = element.parentNode.children;

      if(childrens.length > 2) {
        var similarNodes = [];

        for(var i = 0; i < childrens.length; i++) {
          if(element.nodeName == childrens[i].nodeName) {
            similarNodes.push(childrens[i]);
          }
        }

        if(similarNodes.length > 1) {
          for(var j = 0; j < similarNodes.length; j++) {
            if(element === similarNodes[j]) {
              j++;
              nodeNth = ":nth-of-type(" + j + ")";
              break;
            }
          }
        }

      }

      str = str.replace(/^/, " " + name + nodeNth);

    }

    if(element.parentNode) {
      loop(element.parentNode);
    }
    else {
      str = str.replace(/\s/g, " > ");
      str = str.replace(/\s/, "");
      return str;
    }

  }

  loop(element);

  return str;


}

---

我知道这个问题是2015年的问题，但我刚刚处理了这个问题，并为此构建了一个自定义函数

我制作了一个片段来测试它，只需单击任何元素，querySelector就会在底部div中显示为字符串

function getQuerySelector(elem) {

  var element = elem;
  var str = "";

  function loop(element) {

    // stop here = element has ID
    if(element.getAttribute("id")) {
      str = str.replace(/^/, " #" + element.getAttribute("id"));
      str = str.replace(/\s/, "");
      str = str.replace(/\s/g, " > ");
      return str;
    }

    // stop here = element is body
    if(document.body === element) {
      str = str.replace(/^/, " body");
      str = str.replace(/\s/, "");
      str = str.replace(/\s/g, " > ");
      return str;
    }

    // concat all classes in "queryselector" style
    if(element.getAttribute("class")) {
      var elemClasses = ".";
      elemClasses += element.getAttribute("class");
      elemClasses = elemClasses.replace(/\s/g, ".");
      elemClasses = elemClasses.replace(/^/g, " ");
      var classNth = "";

      // check if element class is the unique child
      var childrens = element.parentNode.children;

      if(childrens.length < 2) {
        return;
      }

      var similarClasses = [];

      for(var i = 0; i < childrens.length; i++) {
        if(element.getAttribute("class") == 
childrens[i].getAttribute("class")) {
          similarClasses.push(childrens[i]);
        }
      }

      if(similarClasses.length > 1) {
        for(var j = 0; j < similarClasses.length; j++) {
          if(element === similarClasses[j]) {
            j++;
            classNth = ":nth-of-type(" + j + ")";
            break;
          }
        }
      }

      str = str.replace(/^/, elemClasses + classNth);

    }
    else{

      // get nodeType
      var name = element.nodeName;
      name = name.toLowerCase();
      var nodeNth = "";

      var childrens = element.parentNode.children;

      if(childrens.length > 2) {
        var similarNodes = [];

        for(var i = 0; i < childrens.length; i++) {
          if(element.nodeName == childrens[i].nodeName) {
            similarNodes.push(childrens[i]);
          }
        }

        if(similarNodes.length > 1) {
          for(var j = 0; j < similarNodes.length; j++) {
            if(element === similarNodes[j]) {
              j++;
              nodeNth = ":nth-of-type(" + j + ")";
              break;
            }
          }
        }

      }

      str = str.replace(/^/, " " + name + nodeNth);

    }

    if(element.parentNode) {
      loop(element.parentNode);
    }
    else {
      str = str.replace(/\s/g, " > ");
      str = str.replace(/\s/, "");
      return str;
    }

  }

  loop(element);

  return str;


}

---

据我所知，querySelector有一个bug，您只能在字符串中使用第n个子元素一次。我很好奇，你在哪里读到的？您能告诉我们您已经尝试了什么吗？如果元素还没有id，那么为它生成一个唯一的id，将id放在对象上，然后将其与document.querySelector一起使用。你到底想解决什么问题？如果您只想返回DOM元素本身，您可以始终保存对它的实际引用。您可以使用基于xpath的节点选择。在Chrome&FF中进行document.evaluate，并在中选择document.selectNodesIE@BoltClock：@Steve Lloyd:我认为您可以直接将document作为第二个参数传递给getXPathForElement。根据我所知，querySelector有一个bug，您只能在字符串中使用第n个子元素一次。我很好奇，你在哪里读到的？您能告诉我们您已经尝试了什么吗？如果元素还没有id，那么为它生成一个唯一的id，将id放在对象上，然后将其与document.querySelector一起使用。你到底想解决什么问题？如果您只想返回DOM元素本身，您可以始终保存对它的实际引用。您可以使用基于xpath的节点选择。在Chrome&FF中进行document.evaluate，并在中选择document.selectNodesIE@BoltClock：@Steve Lloyd：我认为您可以直接将文档作为第二个参数传递给getXPathForElement。