javascript获取元素唯一选择器

Question

我正在使用 javascript 移动元素，我需要为拖放过程中发生的组合创建逻辑

我正在尝试从元素中获取详细信息，类似 CSS 的选择器可能也不错，但不知道是否可能......(如 chrome 开发工具中的复制选择器)

document.onmouseup = function(e){
    targetDest = e.target;
    //console.log('targetDest: ', targetDest);

    let 
    indexA = Array.from(targetCurr.parentNode.children).indexOf(targetCurr),
    indexB = Array.from(targetDest.parentNode.children).indexOf(targetDest);

    console.log(indexA, indexB);


    if(targetDest != targetCurr){
        if(targetDest == document.documentElement){
            console.log('document');
        }
        else if(targetDest == undefined){
            console.log('undefined');
        }
        else if(!targetDest){
            console.log('!dest');
        }
        else if(targetDest == null){
            console.log('null');
        }
        else if(targetDest == false){
            console.log('false');
        }
        else{
            console.log('else');
            //targetCurr.parentNode.insertBefore(targetDest, targetCurr);

            //console.log('...');
        }
    }else{
        console.log('itself');
    }


}

Answer 1

请记住，这不一定唯一标识元素。但是，您可以通过从节点向上遍历并添加您所在的元素来构造该类型的选择器。你可能会做这样的事情

var generateQuerySelector = function(el) {
      if (el.tagName.toLowerCase() == "html")
          return "HTML";
      var str = el.tagName;
      str += (el.id != "") ? "#" + el.id : "";
      if (el.className) {
          var classes = el.className.split(/\s/);
          for (var i = 0; i < classes.length; i++) {
              str += "." + classes[i]
          }
      }
      return generateQuerySelector(el.parentNode) + " > " + str;
}

var qStr = generateQuerySelector(document.querySelector("div.moo"));
alert(qStr);

body
<div class="outer">
  div.outer
  <div class="inner" id="foo">
    div#foo.inner
    <div class="moo man">
      div.moo.man
    </div>
  </div>
</div>

除了将信息呈现给用户之外，我不建议过多地使用它。将其拆分并重复使用部分必然会导致问题。