如何通过标签名访问元素的子元素的子元素

How to access a child of a child of an element by tagname

本文关键字：元素 访问 何通过 标签名      更新时间：2023-09-26

我需要访问一些元素，这些元素是没有ID的元素的子元素，而该元素是具有ID的元素的子元素。我以为我可以用函数getElementByTagName访问它们，但它不起作用，因为它是一个层次的深度。如何通过标签名访问第三层元素?

我试了如下:

// 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解决方案!

Use querySelectorAll ， 返回文档中与*指定的选择器组*匹配的元素列表。返回的对象为NodeList。

可以迭代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>

getElementsByTagName返回一个集合。你必须使用它的一个元素。试试这个:getElementsByTagName("form")[0] 

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

getElementsByTagName("form")返回元素集合，您只能在单个元素中找到"内部元素"。

尝试添加索引0来访问他的子元素:

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

getElementsByTagName返回一个HTMLCollection，不返回和ELement。

你需要得到第一个索引为

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


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

相关文章：