So greifen Sie auf ein untergeordnetes Element eines untergeordneten Elements eines Elements zu Tagname

Question

Ich muss auf einige Elemente zugreifen, die untergeordnete Elemente eines Elements ohne ID sind, die ein untergeordnetes Element mit einer ID sind. Ich dachte, ich könnte mit der Funktion getElementByTagName auf sie zugreifen, aber es funktioniert nicht, weil es eine Ebene zu tief ist. Wie kann ich auf die dritte Ebene der Elemente nach Tagname zugreifen?

Ich habe versucht, die folgenden:

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

Bitte: keine jQuery Lösung!

Answer 1

getElementsByTagName Rückkehr ein HTMLCollection, nicht und ELement.

Sie müssen den ersten Index als

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

Verwendung querySelectorAll, Gibt eine Liste der Elemente im Dokument zurück, die der * angegebenen Gruppe von Selektoren * entsprechen. Das zurückgegebene Objekt ist eine NodeList.

Sie können NodeList, iterieren jedes Element zu verarbeiten!

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 gibt eine Sammlung zu erhalten. Sie müssen ein Element davon verwenden. Versuchen Sie folgendes: getElementsByTagName("form")[0]

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

Answer 4

getElementsByTagName („Form“) geben eine Sammlung von Elementen, könnten Sie „inneren Elemente“ nur auf einem einzigen Element finden.

Versuchen Sie, den Index 0 für den Zugriff auf seine Unterelemente hinzuzufügen:

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