[英]Traversing up the DOM getting the node from a clicked element
OK, what I'm trying to do is the following, when I click on any element on the page and I want to build up a tree of the DOM of where the element lives. 好的,当我单击页面上的任何元素时,我想做的事情如下:我想为元素所在的DOM构建一棵树。
example of the html html的例子
<html>
<head>
</head>
<body>
<ul>
<li><span>Elem 1</span></li>
<li><span>Elem 2</span></li>
<li><span>Elem 3</span></li>
</ul>
</body>
</html>
This is the JS (comes from an click event and passes through the clicked element) 这是JS(来自click事件,并通过clicked元素传递)
function getElementIdentifier(elem, domSelector, firstId) {
if(elem.tagName === 'HTML') {
return 'HTML ' + domSelector;
} else {
return getElementIdentifier(elem.parentNode, ' > ' +elem.tagName + ' ' + domSelector, firstId);
}
}
which works to an extent but when it comes to the fact that I've clicked on the third item in the list it only retrieves the following: 这在一定程度上有效,但是当我单击列表中的第三项时,它只会检索以下内容:
HTML > BODY > UL > LI > SPAN
But I want to retrieve the 3rd as this is the one I clicked. 但是我想检索第三个,因为这是我单击的那个。 I've got a codepen I did to show.
我有一个Codepen可以显示。
http://codepen.io/tom-maton/pen/FljpL/ http://codepen.io/tom-maton/pen/FljpL/
I'm not wanting to use jQuery - just looking to use raw js. 我不想使用jQuery-只是想使用原始js。
This is the fastest way to do it (at least for me) 这是最快的方法(至少对我而言)
function clickHandler(event) {
var target = event.target,
breadcrumb = [];
while (target) {
breadcrumb.unshift(target.tagName);
target = target.parentElement;
}
console.log(breadcrumb.join(" > "));
}
document.addEventListener('click', clickHandler, false);
Fiddle here: http://jsfiddle.net/NTEv2/ 在这里提琴: http : //jsfiddle.net/NTEv2/
Version with siblings: 有兄弟姐妹的版本:
function getTagName(element) {
return element.tagName;
}
function clickHandler(event) {
var target = event.target,
breadcrumb = [],
temp;
while (target) {
target = target.parentElement;
if (target) {
breadcrumb.unshift(([].slice.call(target.children).map(getTagName).join(" + ")));
}
}
// HTML is always there
breadcrumb.unshift(document.documentElement.tagName);
console.log(breadcrumb.join(" > "));
}
document.addEventListener('click', clickHandler, false);
Fiddle here: http://jsfiddle.net/NTEv2/1/ 在这里提琴: http : //jsfiddle.net/NTEv2/1/
Version with only previous siblings (as requested): 仅具有先前同级的版本(根据要求):
function clickHandler(event) {
var target = event.target,
breadcrumb = [],
part = [],
prev = target,
temp;
while (target) {
if (prev) {
part.unshift(prev.tagName);
prev = prev.previousElementSibling;
} else {
target = target.parentElement;
prev = target;
breadcrumb.unshift(part.join(" + "));
part = [];
}
}
console.log(breadcrumb.join(" > "));
}
document.addEventListener('click', clickHandler, false);
Fiddle here: http://jsfiddle.net/NTEv2/11/ 在这里提琴: http : //jsfiddle.net/NTEv2/11/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.