Jacob Jacob - 4 months ago 13
PHP Question

Explaining the html DOM tree > child nodes concept simply

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 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>


  • 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:


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


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 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

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