Databases
StackOverflow2013
Postsdbo
POJavascript recursion does not cover all elements
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript recursion does not cover all elements
    primarykey
    data
    text
    <p>I have build a reqursion with javascript which is supposed to run of all elements of an HTML code and outputs a tree of the HTML ELEMENTS by their hierarchy.</p> <p><strong>The html code:</strong> </p> <pre><code>&lt;body&gt; &lt;p id = "asdgadsfgasdf"&gt;&lt;h1&gt;as&lt;strong&gt;asdfasdf&lt;/strong&gt;dfasdf&lt;/h1&gt;&lt;/p&gt; &lt;table id = "table1"&gt; &lt;tr id = "tr1"&gt; &lt;td id = "try1" style="background-color:green;"&gt;&lt;p id="ChosenColor3"&gt; html file1&lt;/p&gt;&lt;/td&gt; &lt;tr id = "trNotFounded"&gt; &lt;td id = "t1"&gt;&lt;p id="Choor3"&gt; html file2&lt;/p&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tr&gt; &lt;tr &gt;&lt;/tr&gt; &lt;tr&gt; &lt;td id = "try2"&gt;&lt;p id="ch4"&gt; css file&lt;/p&gt;&lt;/td&gt; &lt;td&gt;&lt;button id="bestRated3" onclick = arrayTest()&gt; ב.מ &lt;/button&gt;&lt;/td&gt; &lt;td&gt;&lt;button id="submitForm" onclick = submit()&gt; end&lt;/button&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id = "try6"&gt;&lt;h1 id = "Cr5"&gt; text &lt;/h1&gt;&lt;/td&gt; &lt;td&gt;&lt;h1 id="Chose111"&gt;aasdfasdf&lt;/h1&gt;&lt;/td&gt; &lt;td&gt;&lt;p id = "1234"&gt; hello111 &lt;span&gt;Here is the problem1&lt;/span&gt; &lt;b&gt; Here is the problem2&lt;/b&gt;hiii&lt;/p&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;p id = "tr5"&gt; hello &lt;/p&gt; &lt;/body&gt; </code></pre> <p><strong>the JAVASCRIPT CODE:</strong></p> <pre><code>var z1 = document.body.childNodes; var level = ""; getChildsArea(z1); function getChildsArea(z) { if (z.length &gt; 1) { for (i=0; i&lt;z.length; i++){ if (z[i].nodeType == 1) { console.log(level + z[i].nodeName + " CLIENT Area: " + z[i].clientWidth*z[i].clientHeight + " ID: " + z[i].getAttribute('id')); if ((z[i].childNodes.length == 0) || ((z[i].childNodes.length == 1 &amp;&amp; z[i].childNodes[0].nodeType != 1))) { continue; } else{ for (k=0; k&lt;z[i].childNodes.length; k++) { if(z[i].childNodes[k].nodeType == 1) console.log(level + "childs: " + z[i].childNodes[k].nodeName + " ID: " + z[i].childNodes[k].getAttribute('id')); } level = level + " "; getChildsArea(z[i].childNodes); level = level.substring(0, level.length - 2) } } } } else if (z.length == 1 &amp;&amp; z[0].nodeType == 1) { console.log(level + z[0].nodeName + " CLIENT Area: " + z[0].clientWidth*z[0].clientHeight + " ID: " + z[0].getAttribute('id')); } } </code></pre> <p><strong>The output (by console log):</strong></p> <pre><code>P CLIENT Area: 0 ID: asdgadsfgasdf H1 CLIENT Area: 49136 ID: null childs: STRONG ID: null STRONG CLIENT Area: 0 ID: null TABLE CLIENT Area: 83448 ID: table1 childs: TBODY ID: null TBODY CLIENT Area: 83448 ID: null childs: TR ID: tr1 childs: TR ID: trNotFounded childs: TR ID: null childs: TR ID: null childs: TR ID: null TR CLIENT Area: 13176 ID: tr1 // THIS ONE IS OK childs: TD ID: try1 TD CLIENT Area: 1232 ID: try1 childs: P ID: ChosenColor3 P CLIENT Area: 1080 ID: ChosenColor3 TR CLIENT Area: 16470 ID: null // THIS ONE IS OK // where are 3 more ?? childs: TD ID: try2 childs: TD ID: null childs: TD ID: null TD CLIENT Area: 1568 ID: try2 childs: P ID: ch4 P CLIENT Area: 1080 ID: ch4 TD CLIENT Area: 3752 ID: null childs: BUTTON ID: bestRated3 BUTTON CLIENT Area: 558 ID: bestRated3 TD CLIENT Area: 9660 ID: null childs: BUTTON ID: submitForm BUTTON CLIENT Area: 594 ID: submitForm </code></pre> <p><strong>THE PROBLEM:</strong> not all elements are shown at the console log, for instance, you can see "TBODY" element, which have 5 (TR element) children, but only 2 children are represented in the tree. I'm sure I have missed up something in my code, can someone please help? Thanks, Doron</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USDoron Cohen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COplease make a jsfiddle with your code so that we can test it.
      singulars
      1. POJavascript recursion does not cover all elements
      1. USgeorg
    2. COYour HTML is invalid... you cannot have nested `<tr></tr>` tags. Plus I would doubt that `onclick = submit()` would work without quotes (i.e `onclick="submit()"`)
      singulars
      1. POJavascript recursion does not cover all elements
      1. USfreefaller
    3. CO`<tbody></tbody>` isn't in your code in the first place, so you can't be sure that every browser will generate the same code. You should sanatize your HTML code first.
      singulars
      1. POJavascript recursion does not cover all elements
      1. USluc.chante
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload