Question

在我的应用程序中，我使用Go模板生成HTML。我将列表传递给类似于此的模板：

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

我现在想根据ID访问JavaScript中的各个孩子。这些不是'元素'，所以我不能使用HTML DOM getAttribute（）方法，或访问element.id。

我想做这样的事情：

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

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

我该怎么做？有没有办法将列表中的对象转换为DOM Elements？我给出的例子比我的实际代码简单得多，但我想它会采用相同的方法。

Answer 1

使用document.getElementById('myList')检索列表元素并将其分配给list后，您可以使用list.getElementById(n)检索其子项，其中n是id。（或者，如果元素ID在文档中是唯一的，那么您可以继续使用document.getElementById。）

演示：

＆＃13;

function print(s) {
  document.write(s + '<br />');
}

var list = document.getElementById('myList');
for (var i = 1; i <= 3; ++i) {
  var child = list.getElementById(i);
  print(child.innerHTML);
}

＆＃13;

<div id="myList">
  <div id="1"> one </div>
  <div id="2"> two </div>
  <div id="3"> three </div>
</div>

＆＃13;

Answer 2

您可以使用getElementsByTagName：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

或只是children：

var listElements = listElement.children;

Answer 3

您可以使用document.querySelector进行试用，适用于all browsers和ie 9

See a demo on jsfiddle

var listItems = document.querySelectorAll("#myList .list-item");
  for(var i=0; i < listItems.length; i++){
    console.info(listItems[i].id);
}

<div id="myList">
  <div class="list-item" id="1" >item 1</div>
  <div class="list-item" id="2" >item 2</div>
  <div class="list-item" id="3" >item 3</div>
</div>

访问由模板生成的子元素

3 个答案: