识别没有类或ID的HTML元素的路径

Question

所以在我的代码中，当你点击一个元素时，它会提醒标签的名称。

我真正想要做的是找到路径，以便稍后再次引用该元素。

例如，如果我点击文字＆＃34; World＆＃34;我得到像

这样的东西

DIV（2）＆gt; UL>李（2）

我不想在jQuery中做这件事，只是简单的老香草。

＆＃13;

＆＃13;

document.addEventListener("click", eOnClick, true);

function eOnClick(e) {
  alert(e.target.tagName);
}

＆＃13;

div {
  border: 1px solid red;
}
ul {
  border: 1px solid green;
}
li {
  border :1px solid blue;
}

＆＃13;

<div>
  <div>
    <ul>
      <li>Hello
      <li>World
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我理解正确，这就是你需要做的事情：

更新

document.addEventListener("click", eOnClick, true);

function eOnClick(e) {
var target =e.target;
var index = calculateIndex(target)
var path=target.tagName+"["+index+"]";
while(target.parentNode)
{
  target= target.parentNode;
if(target.parentNode != undefined){
  index = calculateIndex(target)
    path = target.tagName+"["+index+"]"+" > "+path;
    }
}
  alert(path);
}

function calculateIndex(element){
var ix=0;
 var siblings= element.parentNode.childNodes;
    for (var i= 0; i<siblings.length; i++) {
        var sibling= siblings[i];
        if (sibling.nodeType===1 && sibling.tagName === element.tagName) 
            ix++;

        if (sibling===element)
          return ix;
    }
}

div {
  border: 1px solid red;
}
ul {
  border: 1px solid green;
}
li {
  border :1px solid blue;
}

<div>
  <div>
    <ul>
      <li>Hello
      <li>World
    </ul>
  </div>
</div>

它的作用是 - 它通过父节点循环，直到它达到未定义。

Answer 2

＆＃13;

＆＃13;

var html = "<div><ul><li>1</li><li>2</li><li>3</li></ul><ol><li>1</li><li>2</li><li>3</li></ol></div><div><ul><li>1</li><li>2</li><li>3</li></ul><ol><li>1</li><li>2</li><li>3</li></ol></div>";
document.body.innerHTML += html;

function nodelistToArray(nodelist) {
  return Array.prototype.slice.call(nodelist);
}

function traverse(target, chain) {
  if (chain === void 0) {
    chain = [];
  }
  var index = nodelistToArray(target.parentNode.children).filter(function(a) {
    return a.nodeName == target.nodeName;
  }).indexOf(target);
  chain.push({
    element: target,
    index: index
  });
  if (target.nodeName.toLowerCase() == "html") {
    return chain.reverse();
  } else {
    return traverse(target.parentNode, chain);
  }
}
document.body.onclick = function(evt) {
  var chain = traverse(evt.target);
  console.log(chain);
  alert(chain.map(function(elm) {
    return elm.element.nodeName + ' [' + (elm.index).toString() + ']';
  }).join(' > '));
};

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用以下复杂解决方案：

＆＃13;

＆＃13;

document.addEventListener("click", eOnClick, true);

function eOnClick(e) {
    var el = e.target, 
    path = [], 
    tagName = "", 
    closest = e.target.parentNode;
  
    while (el.parentNode && el.parentNode !== document) {        	
        tagName = el.parentNode.tagName, last = path[path.length - 1];
        
        // if it's the closest parent - analyzing sibling nodes 
        if (closest === el.parentNode) {
           for (var i = 0, childs = closest.childNodes, len = childs.length, c = 1; i < len; i++) {
              if (childs[i] !== el && childs[i].tagName === el.tagName) c++;
           }
           if (c > 1) path.push(el.tagName + c);
        }

        if (!last || (last !== tagName && last.indexOf(tagName) !== 0)) {
	    path.push(tagName);        
        } else {
     	    var num = last.match(/\d+$/);
            last = tagName + ((num)? Number(num) + 1 : 2);
     	    path[path.length - 1] = last;
        }
        el = el.parentNode;
    }
    path = path.reverse().map(function(v){ return v.replace(/(\d+)$/, "($1)"); }).join(' > ');
    alert(path);
}

＆＃13;

div {
  border: 1px solid red;
}
ul {
  border: 1px solid green;
}
li {
  border :1px solid blue;
}

＆＃13;

<div>
  <div>
    <ul>
      <li>Hello
      <li>World
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;