Jacob
Jacob

Reputation: 207

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

Problem

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

Upvotes: 2

Views: 108

Answers (1)

Kevin
Kevin

Reputation: 41885

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)

Upvotes: 2

Related Questions