CODEWITHSUNDEEP
javascripthtml
typeof programmer
typeof programmer

Reputation: 1609

How to check if Element's child also contains child

So, how to check if the child elements in a container also has child,

if what the container has is like:

var container = document.createElement("span");

<span name="70" onmousedown="top.onMouseDownEssence('70','');" onmouseup="top.onMouseUpEssence('70','');"></span>
<span name="70" onmousedown="top.onMouseDownEssence('70','');" onmouseup="top.onMouseUpEssence('70','');">s</span>
<span name="70" onmousedown="top.onMouseDownEssence('70','');" onmouseup="top.onMouseUpEssence('70','');">o</span>
<span name="70" onmousedown="top.onMouseDownEssence('70','');" onmouseup="top.onMouseUpEssence('70','');">u</span>

it should return false since all child elements are in same level.If what the container has it like:

<span class="entityHighlight">
<span name="70" onmousedown="top.onMouseDownEssence('70','');" onmouseup="top.onMouseUpEssence('70','');">s</span>
<span name="70" onmousedown="top.onMouseDownEssence('70','');" onmouseup="top.onMouseUpEssence('70','');">o</span>
<span name="70" onmousedown="top.onMouseDownEssence('70','');" onmouseup="top.onMouseUpEssence('70','');">u</span>
</span>

I need to return true since it has parent-child relationship.

Upvotes: 1

Views: 1082

Answers (2)

acarlstein
acarlstein

Reputation: 1838

In the first section of code you are showing, there is no a parent-child relationship but a siblings relationship: https://www.w3schools.com/jsref/prop_node_nextsibling.asp

The second section of code, you have a span (with class entityHighlight) which holds three elements span (children). You could use: https://www.w3schools.com/jsref/met_node_haschildnodes.asp

var container = document.getElementById("container");

var spans = container.getElementsByTagName("span");

console.log("First Span: " + spans[0].innerHTML);
console.log("Next Sibling Span: " + spans[0].nextElementSibling.innerHTML);

console.log("Does first span as element children: " + (spans[0].children.length > 0));

console.log("Does first span as node children: " + spans[0].hasChildNodes());

var isAnyOfTheseNodesAnElement = false;
for (var node in spans[0].childNodes){
    if (node instanceof Element){
    	isAnyOfTheseNodesAnElement = true;
    }
}
console.log("Is any of those node children an element? " + isAnyOfTheseNodesAnElement);



console.log("--------------------------------------------------------------------");

var spanEntity = document.getElementsByClassName("entityHighlight")[0];
console.log("Does the spanEntity span has element children: " + (spanEntity.children.length > 0));

for (var i = 0; i < spanEntity.children.length; ++i){
	console.log("Child " + i + ": " + spanEntity.children[i].innerHTML);
}
<div id="container">

  <span name="70">A</span>
  <span name="70">B</span>
  <span name="70">C</span>
  <span name="70">D</span>

  <span class="entityHighlight">
    <span name="70">E</span>
    <span name="70">F</span>
    <span name="70">G</span>
  </span>

</div>

Upvotes: 1

Jorge Fuentes Gonz&#225;lez
Jorge Fuentes Gonz&#225;lez

Reputation: 11815

You should look for the contains() method: https://www.w3schools.com/jsref/met_node_contains.asp

The contains() method returns a Boolean value indicating whether a node is a descendant of a specified node.

A descendant can be a child, grandchild, great-grandchild, and so on.

Example:

<div id="myDIV">
    <span id="mySPAN">
    </span>
</div>

var span = document.getElementById("mySPAN");
var div = document.getElementById("myDIV").contains(span);

Upvotes: 0

Related Questions