Question

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

我尝试了以下内容：

＆＃13;

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

＆＃13;

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

＆＃13;

请：没有jQuery解决方案！

Answer 1

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

Answer 2

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

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

Answer 3

getElementsByTagName（“form”）返回一个元素集合，你只能在一个元素上找到“内部元素”。

尝试添加索引0以访问其子元素：

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

Answer 4

/app/assets/javascripts/applications.js返回rake assets:precompile，而不是getElementsByTagName。

您需要将第一个索引作为

HTMLCollection

<强>样本

ELement

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

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

4 个答案: