JavaScript遍历HTML表单元素及表单定义

最新推荐文章于 2022-04-13 11:41:11 发布

肖永威

最新推荐文章于 2022-04-13 11:41:11 发布

阅读量6.9k

点赞数 4

分类专栏：软件开发技术文章标签： getElement document 遍历 javascript

本文链接：https://blog.csdn.net/xiaoyw71/article/details/45827725

版权

软件开发技术专栏收录该内容

62 篇文章 3 订阅

订阅专栏

如下JavaScript代码，通过document对象，遍历HTML所有元素（HTML DOM Element ）。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<script>
//显示所有存在“ID”属性的HTML元素
function displayallelem(){
   var elems = document.getElementsByTagName("*");

   for(var i=0;i<elems.length;i++){
     if (elems[i].hasAttribute("id")){
       tmp = elems[i].id + ", fieldtype = " + elems[i].getAttribute("fieldtype") + "元素类型=" + elems[i].nodeName;
     alert(tmp);
     }
   }    
}
</script>
</head>
<body>
<h1>表单元素遍历测试 JavaScript</h1>
<p id="demo" fieldtype="test">This is a paragraph.</p>
<div> 
<input id="name" fieldtype="char">名称</input><br>
通过自定义属性“fieldtype”来定义数据类型。<br>
<input id="old" fieldtype="number" value="42">年龄</input><br>
<button id="test" type="button" onclick="displayallelem()">Display Element</button>
</div> 
</body>
</html>

注：代码解释
（1）.hasAttribute(“id”)，判断是否存在“id”属性，如果存在指定属性，则 hasAttribute() 方法返回 true，否则返回 false；
（2）.id，返回元素的 id；
（3）.getAttribute(“fieldtype”)，返回元素节点的指定属性值。

通过上述代码，引申思考：

在定义表单时，直接通过对元素的属性，定义表单数据项关键信息，例如数据类型；
通过遍历表单，获取表单设计定义，及其业务数据值，直接把二者转换为BSON类型存储高MongoDB中；
展现或编辑时，把表单设计定义为模版，回写设置数据内容即可。

以下内容为参考W3School 提供。

HTML DOM Document 对象

Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

HTML DOM getElementsByTagName() 方法

定义和用法

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

语法

document.getElementsByTagName(tagname)

说明

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

HTML DOM Element 对象

HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

Element 对象

在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
元素也可以拥有属性。属性是属性节点

HTML DOM nodeType 属性

对于每种节点类型，nodeName 和 nodeValue 属性的返回值：

序号	节点类型	nodeName返回	nodeValue返回
1	Element	元素名	null
2	Attr	属性名称	属性值
3	Text	text	节点的内容
4	CDATASection	cdata-section	节点的内容
5	EntityReference	实体引用名称	null
6	Entity	实体名称	null
7	ProcessingInstruction	target	节点的内容
8	Comment	comment	注释文本
9	Document	document	null
10	DocumentType	文档类型名称	null
11	DocumentFragment	document 片段	null
12	Notation	符号名称	null