数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中使用 document.forms？
在本教程中，我们将讨论如何在 JavaScript 中使用 document.forms。
document.form 属性返回文档中的所有表单标签。forms 属性是只读的。form 属性是 DOM 1 级特性。
使用表单属性和元素
这里我们将学习如何使用表单的属性、特性和元素。
用户可以按照以下语法使用表单的属性和元素。
语法
var forms = document.forms;
let formLen = forms.length;
let formId = forms[0].id || forms.item(0).id;
let formItemId = forms[0].elements[0].id;
let formItemVal = forms[0].elements[0].value;
let formData = forms.namedItem("testForm").innerHTML;
以上语法按顺序返回表单集合、表单总数、表单 ID、表单元素 ID、表单元素值和表单内容。
属性
length - length 是 HTML 集合中元素的数量。
方法
[index] - index 方法返回指定位置的元素。索引从零开始。如果索引超出范围，则该方法返回“null”。
item(index) - 返回指定位置的元素。索引从零开始。如果索引超出范围，则该方法返回“null”。
namedItem(id) - 返回具有指定 ID 的元素。如果 ID 错误，则该方法返回“null”。
返回值
form 属性返回 HTML 表单对象集合。该对象遵循源代码顺序。
示例
在此程序中，我们显示了文档中表单的总数、表单 ID、表单元素 ID、表单元素值和表单内容。
<html> <body> <h2>Working with the document object.forms properties and elements</h2> <div id = "formPropBtnWrap"> <form name = "testForm" id="testFormId"> <p>Name: <input type = "text" name = "name" value = "Egan" id = "testFormItemId"></p> <p>Job: <input type = "text" name = "job" value = "Handicapper"></p> </form> <p>Click the button to see the properties</p> <button onclick = "getFormProp()">Click Me</button> </div> <p id = "formPropOut"></p> <script> function getFormProp() { var forms = document.forms; let formLen = forms.length; let formId = forms[0].id || forms.item(0).id; let formItemId = forms[0].elements[0].id; let formItemVal = forms[0].elements[0].value; let formData = forms.namedItem("testForm").innerHTML; var formPropBtnWrap = document.getElementById("formPropBtnWrap"); var formPropOut = document.getElementById("formPropOut"); var formPropStr = ""; // formPropBtnWrap.style.display = "none"; formPropStr += "Total forms = " + formLen + "<br><br>"; formPropStr += "First form id = " + formId + "<br><br>"; formPropStr += "First form first item id = " + formItemId + "<br><br>"; formPropStr += "First form first item value = " + formItemVal + "<br><br>"; formPropStr += "<b>First form data = </b>" + formData + "<br><br>"; formPropOut.innerHTML = formPropStr; } </script> </body> </html>
使用表单方法
这里我们将学习如何使用表单的方法。
用户可以按照以下语法使用表单的方法。
语法
var forms = document.forms; let formObj = forms.colors; formObj.submit(); formObj.reset();
以上语法返回表单集合，一个名为“colors”的表单。最后两行代码分别表示表单提交和表单重置。
示例
在此程序中，我们通过名称访问表单，并且该函数在用户请求时执行表单提交和表单重置。
<html> <head> <title>JavaScript String match() Method</title> </head> <body> <script> // all the variables declared at top var str, re, found; str = "For more information, see Chapter 3.4.5.1"; re = /(chapter \d+(\.\d)*)/i; found = str.match( re ); document.write(found ); </script> </body> </html>
示例 2
我们在下面的示例中获取了用户值，并在页面上分别显示它们。我们在顶部声明了两个变量，中间一个，最后还有一个。您可以在程序中看到，在顶部声明的变量使代码简洁易读。同时，在中间声明变量会使代码更复杂。在下面的代码中，错误地初始化了另一个名为 k 的变量而不是 j，使 j 成为未初始化的变量。由于没有在顶部添加变量，我们忘记了代码中留下了名为“l”的不必要变量。
<html> <head> <style> p { color: red; } </style> </head> <body> <h2>Is it a good practice to place all declarations at the top in JavaScript?</h2> <label for = "top_var"> Variable declared at top:</label> <input type = "text" id = "top_var" name = "Top" value = " " /><br> <label for = "middle_var"> Variable declared at Middle:</label> <input type = "text" id = "middle_var" name = "Middle" value = " " /><br> <label for = "end_var"> Variable declared at End:</label> <input type = "text" id = "end_var" name = "End" value = " " /><br> <button id = "btn">submit</button> <div id = "div"></div> <script> var element, i; document.getElementById("btn").addEventListener("click", practice); function practice() { element = document.getElementById("div"); i = document.getElementById("top_var").value; var text = document.createTextNode(" Variable declared at top: " + i); var para1 = document.createElement('p'); para1.appendChild(text); var j; k = document.getElementById("middle_var").value; var text1 = document.createTextNode(" Variable declared at middle: " + j); var para2 = document.createElement('p'); para2.appendChild(text1); var k; k = document.getElementById("end_var").value; var text2 = document.createTextNode(" Variable declared at last: " + k); var para3 = document.createElement('p'); para3.appendChild(text2); element.appendChild(para1); element.appendChild(para2); element.appendChild(para3); var l; } </script> </body> </html>
在上面的示例中，用户可以看到，在 JavaScript 中将所有声明放在顶部是一个好的实践。
示例 3
在下面的示例中，我们获取了用户的输入并将其转换为数组，并将数组的所有元素保存在不同的变量中。您可以在下面的程序中看到，程序中使用的所有变量都在 script 标签后的第一行声明。这有助于减少代码长度，并减少我们为每个变量添加“var”的工作量。我们在顶部添加了一堆变量，并在循环内部使用 eval() 方法作为动态变量访问它们。
<html> <head> <style> p { color: red; } </style> </head> <body> <h2>Is it a good practice to place all declarations at the top in JavaScript?</h2> <label for = "arr_Elements"> Add array elements seperated by space: </label> <input type = "text" id = "arr_Elements" name = "element" value = " " placeholder = "5 elements max" /> <br> <button id = "btn">submit</button> <div id = "div"></div> <script> var element, value, arr, i, j, a, a1, a2, a3, a4, a5, para; document.getElementById("btn").addEventListener("click", add_Elements); element = document.getElementById("div"); function add_Elements() { value = document.getElementById("arr_Elements").value; arr = value.split(" "); for (i=1; i<=arr.length; i++) { if (arr[i - 1] != "") { eval('a' + i + "=" + arr[i - 1] + ";"); para = document.createElement('p'); console.log(a1); para.innerHTML = " Value of " + 'a' + (i - 1) + ": " + eval('a' + i); element.appendChild(para); } else { } } } </script> </body> </html>
在上面的示例中，用户可以看到，在程序顶部添加声明使代码更易读，并节省了程序员的工作量。这就是为什么在 JavaScript 中将所有声明放在顶部是一个好的实践。
在本教程中，我们学习了在 JavaScript 中放置所有声明的良好实践。将声明放在顶部一直是 JavaScript 中的良好实践。
3K+ 阅读量
