How to get outermost parent node of inner child in plain JavaScript?

Question

I got stuck in a problem, I wish to write a script that can show all the div ids of an inner div, for example:

<body id="bd">
<div id="canvas">
    <div id="nd1">
        <div>
            My text
        </div>
    </div>
    <div id="nd2">
        <div id="hd">Some Text</div>
    <div>
<div>

What I want is suppose when I click on div with no ID defined inside "nd1", I should get its parent div (ie nd1), and the outermost parent, kind of thing I want.

Answer 1

try

var allChildNodes = document.querySelectorAll("#nd1 div");
nodes = Array.prototype.slice.call(allChildNodes ,0); 
nodes.forEach(function(node){ 
   node.addEventListener("click", function(){
     console.log("Outer parent" + node.parentNode.outerHTML);
     console.log("Outermost parent" + node.parentNode.parentNode.outerHTML);
   });
});

To get the array of parent divs

var allChildNodes = document.querySelectorAll("#nd1 div");
nodes = Array.prototype.slice.call(allChildNodes ,0); 
nodes.forEach(function(node){ 
   node.addEventListener("click", function(){
     var parentDivs = [];
     while( !node.parentNode )
     {
        parentDivs.push(node.parentNode);
        node = node.parentNode;
     }
     console.log("parents" + parentDivs);
   });
});

For matching multiple divs starting from a specific string

var allChildNodes = document.querySelectorAll("[id^='nd'] div");

How to get outermost parent node of inner child in plain JavaScript?

Question

1 answers

solution1
2 ACCPTED 2016-03-17 11:37:43

How to get outermost parent node of inner child in plain JavaScript?

Question

1 answers

solution1 2 ACCPTED 2016-03-17 11:37:43

solution1
2 ACCPTED 2016-03-17 11:37:43