Check if HTML element has specific grandchild element

Question

How can I check if an element is a grandchild of a specific element? I thought we could use contains method on the on the grandparent element after getting all of its descendants?

let grandparent = document.getElementById("grandparent");
let childs = document.getElementsByClassName("child")

for(let i = 0; i < childs.length; i++) {
  let test = grandparent.getElementsByTagName("*")
  if (test.contains(childs[i])) { 
    console.log(true) 
  } else {
    console.log(false)
  }
}

user_10628869 · Answer

Could you use .closest('#grandparent'); or to get it from the parent a selector like let child = document.querySelector('#grandparent #parent .child'); or querySelectorAll if you wanted all the .child elements

Or you could use the parentElement or parentNode properties?

user_3037257 · Answer

You can compare the parent node with a loop

let grandparent = document.getElementById("grandparent");
let childs = document.getElementsByClassName("child")

for (let i = 0; i < childs.length; i++) {
  let p = childs[i];

  let found = false;

  // iterate until a prent element same as grandparent 
  // or until it reaching the root element
  while (p = p.parentNode) {
    // if found set found as true and break the loop
    if (p === grandparent) {
      found = true;
      break
    }
  }
  
  if (found) {
    console.log(true)
  } else {
    console.log(false)
  }
}

user_2994954 · Answer

You can do something like by making use of parentElement:

let grandparent = document.getElementById("grandparent");
let childs = document.getElementsByClassName("child")

for(let i = 0; i < childs.length; i++) {
  if (childs[i].parentElement.parentElement === grandparent) { 
    console.log(true) 
  } else {
    console.log(false)
  }
}

Check if HTML element has specific grandchild element

3 Answers