Explaining the html DOM tree > child nodes concept simply

Question

I have been searching throughout the net for a simple explanation of the DOM tree and understanding the parent, child, sibling relationship and have not found a simple explanation I can follow. I am hoping someone here will be able to put it in simple language.

Let's say we have a tree as follow

<div class='DOM>
   <div class='DOM_A'>
      <p class='DOM_A_1'>some text</p>
   </div>
   <div class='DOM_B'
      <div class='DOM_B_1'>
         <h1 class='DOM_B_1_1>some heading</h1>
         <p class='DOM_B_1_2>some text</p>
      </div>
   </div>
</div>

Question

• What would DOM_B_1_2 be (child) in relation to DOM?
• What would DOM_B_1_2 be in relation to DOM_B?
• Putting it in the context of traversing the DOM tree using smile html DOM, how would you therefore write the following using children or childNodes:

Problem

$DOM_B_1_2 = @$html->find('div.DOM', 0)->children(?)->plaintext;
$DOM_B_1_2 = @$html->find('div.DOM_B', 0)->children(?)->plaintext;

Answer 1

I'd suggest just point it directly to the element that you desire:

div.DOM div.DOM_B p.DOM_B_1_2

So you just put it in the selector:

$DOM_B_1_2 = $html->find('div.DOM div.DOM_B p.DOM_B_1_2', 0);
echo $DOM_B_1_2;

Should you choose the ->children() route, you can chain it to get to that element:

$e = $html->find('div.DOM', 0)->children(1)->children(0)->children(1);
echo $e->innertext;

Take note indexing starts at zero, so that first child fall into index zero.

Here's an illustration:

<div class='DOM'> // parent div.DOM ---> A
   <div class='DOM_A'>
      <p class='DOM_A_1'>some text</p>
   </div>
   <div class='DOM_B'> // children(1) ---> B
      <div class='DOM_B_1'> // children(0) ---> C
         <h1 class='DOM_B_1_1'>some heading</h1>
         <p class='DOM_B_1_2'>some text</p> // children(1) ---> D
      </div>
   </div>
</div>

   // A            // B        // C          // D
('div.DOM', 0)->children(1)->children(0)->children(1)