<input> 通过 JavaScript 读取表单以外的标签

Question

我有以下 HTML：

<form name="quiz" onsubmit="return Result()">
<h3>1. What are the right order of the seasons?</h3>
<input type="radio" name="radio1" value="a">a.  Spring, Summer, Autumn, Winter<br />
<input type="radio" name="radio1" value="b">b. Spring, Winter, Summer, Autumn<br />
<input type="radio" name="radio1" value="c">c.  Spring, Summer, Winter, Autumn<br />
<input type="radio" name="radio1" value="d">d.  Summer, Autumn, Spring, Winter<br />
<h3>2. Normally, how many days are there in a year?</h3>
<input type="radio" name="radio2" value="a">a.  364<br />
<input type="radio" name="radio2" value="b">b.  365<br />
<input type="radio" name="radio2" value="c">c.  366<br />
<input type="radio" name="radio2" value="d">d.  367<br />
<input type="submit" value="Submit Answers">
</form>

我想计算表单中有多少个标签，但是当我使用 document.quiz.length 方法时，它只计算<input>个标签(上面代码段计算 9 个元素(，所以我无法到达<h3>。你能告诉我如何计算<h3>吗？谢谢！

Answer 1

你想要的是计算表单中有多少个标签？使用document.querySelectorAll和直接子 CSS 选择器非常简单：

let tagAmoungInDatForm = document.querySelectorAll('form[name="quiz"] > *').length;

(
如果您特别想计算h3那么：

let tagAmoungInDatForm = document.querySelectorAll('form[name="quiz"] > h3').length;

(

您还可以使用children.length：

let form = /*select form*/;
let tagAmountInDatForm = form.children.length;

或childElementCount：

let form = /*select form*/;
let tagAmountInDatForm = form.childElementCount;

Answer 2

您可以使用该方法document.getElementById("yourForm").childElementCount.此方法将计算 html 节点的所有子节点。说明：此方法计算表单或div中的所有标签...您可以查阅w3schools的文档。

此函数完成以下工作：

function count() {
var c = document.getElementById("yourForm").childElementCount;
console.log (c);
}