자바 스크립트로 내부 html 태그 가져 오기

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

가 나는 것처럼 느낌을 I 뭔가 빠졌지 만 JS에 익숙하지 않아서 무엇인지 모르겠다.

Answer 1

list은 배열입니다. 배열의 각 요소는 당신이 getElementByClassName 이상 1 BROWSER_LIST와 같은 배열을 만듭니다 .getElementsByTagName

Answer 2

이 발견 방법을하지 않아도 list[i].getElementsByTagName

자바 스크립트 Array의를 사용해야 할 것 HTMLElement

입니다. 따라서 적절한 색인에 액세스하십시오. `;

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

<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>