title: How to get the id of all the child node UL tags in a UL
body: <p>I know this is a pretty basic question I just seem to be having some issues doing it. I have a HTML structure like below.  </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;ul class=t2 id=15&gt;
              &lt;li class='item'&gt;a&lt;span class='val'&gt;b&lt;/span&gt;&lt;/li&gt;
              &lt;li class='item'&gt;c&lt;span class='val'&gt;d&lt;/span&gt;&lt;/li&gt;
              &lt;li class='item'&gt;e&lt;span class='val'&gt;f&lt;/span&gt;&lt;/li&gt;
              &lt;li class='item'&gt;parameters : &lt;/li&gt;
              &lt;li&gt;
                  &lt;ul class=t3 id=16&gt;
                      &lt;li&gt;
                          &lt;ul class=t4 id=17&gt;&lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;ul class=t4 id=18&gt;&lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have the UL with the id of 16 selected and I want to select all its child ul nodes and grab there id. I am able to select the ul with an id of 17 but I cannot grab it's sister node. Here is the JavaScript I am using to get the child nodes. </p>
  
  <pre><code>if (document.getElementById(this.toDelete[i]).getElementsByTagName('ul').length &gt;= 1) {
      var tag = document.getElementById(this.toDelete[i]).getElementsByTagName('ul');
          for (var k = 0; k &lt;= tag.length; k++) {
              console.log("tag name: " + tag[k].id + " these will be pushed to Delete");
          }
  }
  </code></pre>
  
  <p>So the logic should be, the the selected UL has child ULs get the ID of those ULs and print them to the console. </p>
  
  <p>The above code does not work. I believe that is because it is grabbing the  which does not have a id. But it also if I change it to k &lt; tag.length it works, but still only gets 17 and I want to it get 18 as well. </p>
  
  <p>Please help. Thanks in advance. </p>
  
  <p>UPDATED, full function. the items array is an array of objects with html and id properties, toDelete is an array with just numbers (ids of items to be deleted. The html in items.html corresponds to one line of html. IE 'ab</li>'. The function is a bit of a mess since I am just trying to get it to work properly. I know I can make it cleaner, that is why I did not post the whole function. </p>
  
  <pre><code>deleteItems: function () {
      for (var i = 0; i &lt; this.toDelete.length; i++) {
          console.log("Item to be deleted: " + this.toDelete[i]);
          for (var j = 0; j &lt; this.items.length; j++) {
              if (this.items[j].id == this.toDelete[i]) {
                  this.items[j] = ""; //this should be a slice
                  if (document.getElementById(this.toDelete[i]).getElementsByTagName('ul').length &gt;= 1) {
                      var tag = document.getElementById(this.toDelete[i]).getElementsByTagName('ul');
                      for (var k = 0; k &lt;= tag.length; k++) {
                          console.log("tag name: " + tag[k].id + " these will be pushed to Delete");
                      }
                      this.toDelete.push(document.getElementById(this.toDelete[i]).getElementsByTagName('ul')[0].id);
                      //check to see if it has those there sister nodes. 
                  }
              }
          }
      }
  },
  </code></pre>