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. example of the html
Solution 1:
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/
Version with siblings:
functiongetTagName(element) {
return element.tagName;
}
functionclickHandler(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/
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/
Post a Comment for "Traversing Up The Dom Getting The Node From A Clicked Element"