Question

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

据我所知，querySelector有一个错误，你只能在字符串中使用nth-child。

我曾多次尝试，但到目前为止未能找到解决方案。我想在本机JavaScript中执行此操作，而不是jQuery.Any建议吗？

Answer 1

我看到这个问题是从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;


}

https://jsfiddle.net/wm6goeyw/

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

1 个答案: