태그 이름으로 요소의 하위 노드에 액세스하는 방법

Question

ID가없는 요소의 하위 요소 인 ID가있는 요소의 하위 요소에 액세스해야합니다. getElementByTagName 함수를 사용하여 액세스 할 수 있다고 생각했지만 깊이가 한 단계이기 때문에 작동하지 않습니다. tagname을 사용하여 세 번째 수준의 요소에 액세스하려면 어떻게해야합니까?

// getElementByTagName for first child elements works 
 

 
var getForm = document.getElementById("parentElement").getElementsByTagName("form").length; 
 
var output = document.getElementById("outputForm").innerHTML = getForm; 
 

 

 
// getElementByTagName for second child elements doesn't work 
 

 
var getInput = document.getElementById("parentElement").getElementsByTagName("form").getElementsByTagName("input").length; 
 
var output = document.getElementById("outputInput").innerHTML = getInput;

<div id="parentElement"> 
 
    <form> 
 
    First name: <input type="text"><br> 
 
    Last name: <input type="text"><br> 
 
    </form> 
 
</div> 
 
<p id="outputForm"></p> 
 
<p id="outputInput"></p>

하십시오 : 어떤 jQuery를 솔루션

나는 다음과 같은 시도!

Answer 1

getElementsByTagName 돌려 주어 HTMLCollection,하지 및 ELement.

당신은

var getInput = document.getElementById("parentElement").getElementsByTagName("form")[0].getElementsByTagName("input").length; 

DEMO

// getElementByTagName for first child elements works 
 

 
var getForm = document.getElementById("parentElement").getElementsByTagName("form").length; 
 
var output = document.getElementById("outputForm").innerHTML = getForm; 
 

 

 
// getElementByTagName for second child elements doesn't work 
 

 
var getInput = document.getElementById("parentElement").getElementsByTagName("form")[0].getElementsByTagName("input").length; 
 
var output = document.getElementById("outputInput").innerHTML = getInput;

<div id="parentElement"> 
 
    <form> 
 
    First name: <input type="text"><br> 
 
    Last name: <input type="text"><br> 
 
    </form> 
 
</div> 
 
<p id="outputForm"></p> 
 
<p id="outputInput"></p>

Answer 2

사용 querySelectorAll, 지정된 셀렉터 그룹 *과 일치하는 문서 내의 요소 목록을 반환합니다. 반환 된 객체는 노드 목록입니다.

당신은 NodeList를, 각 요소를 처리하기를 반복 할 수 있습니다!

var inputs=document.querySelectorAll('#parentElement input'); 
 
console.log(inputs);

<div id="parentElement"> 
 
    <form> 
 
    First name: <input type="text"><br> 
 
    Last name: <input type="text"><br> 
 
    </form> 
 
</div> 
 
<p id="outputForm"></p> 
 
<p id="outputInput"></p>

Answer 3

getElementsByTagName이 컬렉션을 반환 바와 같이, 제 1 인덱스를 얻을 필요가있다. 당신은 그것의 한 요소를 사용해야합니다. 이 시도 : getElementsByTagName("form")[0]

var getInput = document.getElementById("parentElement").getElementsByTagName("form")[0].getElementsByTagName("input").length; 
var output = document.getElementById("outputInput").innerHTML = getInput; 

Answer 4

getElementsByTagName ("양식") 요소의 컬렉션을 반환, 당신은 단지 하나의 요소에 "내부 요소"를 찾을 수 있습니다.

var getInput = document.getElementById("parentElement").getElementsByTagName("form")[0].getElementsByTagName("input").length;