访问模板生成的子元素

Question

In my application I'm generating HTML with a Go template. I pass a list to a template that resembles this:

<div id="myList">
 {{ Loop }}
   <div id="{{.loopIndex}}">
 {{ End loop }}
</div>

I now want to access the individual children in JavaScript according to ID. These are not 'elements', so I can't use the HTML DOM getAttribute() method, or access element.id.

I want to do something like this:

  var listElement = document.getElementById("myList");
  var listElements = listElement.childNodes;

  for (i=0; i < listElements.length; i++) {
     alert(listElements[i].id);
  }

How would I do this? Is there any way to convert the objects in my list to DOM Elements? The example I gave is a lot simpler than my actual code, but it would follow the same approach, I imagine.

Answer 1

You could use getElementsByTagName:

var listElement = document.getElementById("myList");
var listElements = listElement.getElementsByTagName('div'); // could also use listElement.children;

for (i = 0; i < listElements.length; i++) {
  alert(listElements[i].id);
}

<div id="myList">
  <div id="1"></div>
  <div id="2"></div>
  <div id="3"></div>
</div>

Or just children:

var listElements = listElement.children;

</div>