Question

我正在尝试为此html获取内部<li>的对象。 id=config_#

的那个

  <li class="browser_list">
    <ul>
      <li id="config_3"> Chrome 29</li>
      <li id="config_4"> Chrome 31</li>
      <li id="config_5"> Chrome 33</li>
      <li id="config_6"> Chrome 35</li>
    </ul>
  </li>
  <li class="browser_list">
    <ul>
      <li id="config_1">Firefox 11</li>
      <li id="config_2">Firefox 15</li>
    </ul>
  </li>
  <li class="browser_list">
    <ul>
      <li id="config_0">Internet Explorer 8</li>
    </ul>
  </li>

我的代码：

var list = document.getElementsByClassName("browser_list");
console.log(list);

for (var i = 0; i < list.length; i++) {
    var items = list.getElementsByTagName("li");
    console.log(items);
}

console.log(list)工作正常，但当我尝试getElementsByTagName("li")时，我收到错误：

Uncaught TypeError: undefined is not a function

我觉得我好像错过了一些东西但是我不熟悉JS我不知道它是什么

Answer 1

list是一个数组。数组的每个元素都是HTMLElement

您需要使用list[i].getElementsByTagName

JavaScript Array没有方法.getElementsByTagName

Answer 2

getElementByClassName创建一个数组，因为找到了多个browser_list。因此，访问它正确的索引。

＆＃13;

var list = document.getElementsByClassName("browser_list");
console.log(list);

for (var i = 0; i < list.length; i++) {
    var items = list[i].getElementsByTagName("li");
    console.log(items);
}

＆＃13;

  <li class="browser_list">
    <ul>
      <li id="config_3"> Chrome 29</li>
      <li id="config_4"> Chrome 31</li>
      <li id="config_5"> Chrome 33</li>
      <li id="config_6"> Chrome 35</li>
    </ul>
  </li>
  <li class="browser_list">
    <ul>
      <li id="config_1">Firefox 11</li>
      <li id="config_2">Firefox 15</li>
    </ul>
  </li>
  <li class="browser_list">
    <ul>
      <li id="config_0">Internet Explorer 8</li>
    </ul>
  </li>

＆＃13;

用Javascript抓取内部html标签

2 个答案: