Home > Developer > JavaScript
The following JavaScript code, through the Document object, iterates through all the HTML elements (HTML DOM element).
<meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "><head><script> //Display all HTML elements that have an "ID" attribute function displayallelem(){var Elems = document.getElementsByTagName ("*"); for (var i=0; i<elems.length;i++) { If (Elems[i].hasattribute ("id")) {tmp = elems[i].id + ", FieldType =" + elem S[i].getattribute ("FieldType") + "element type =" + elems[i].nodename; Alert (TMP); } } } </script></head><body><H1>Form element Traversal Test JavaScript</H1><p id="Demo" fieldtype="Test">This is a paragraph.</P><div> <input id="name" fieldtype="char">Name</input><br>Define the data type by customizing the property "FieldType".<br><input id="old" fieldtype="number" value ="> "Age</input><br><button id="Test" type="button" onclick=" Displayallelem () ">Display Element</button></div> </body></html>Note: Code explanation
(1). Hasattribute ("id"), determine if there is an "id" attribute, if the specified attribute exists, then the Hasattribute () method returns True, otherwise returns false;
(2). ID, return the ID of the element;
(3). getattribute ("FieldType"), returns the value of the specified attribute for the element node.
From the above code, think:
The following information is provided for reference W3school.
HTML DOM Document ObjectDocument Object
Each HTML document that is loaded into the browser becomes the document object.
The Document object allows us to access all elements of an HTML page from within a script.
Tip: The Document object is part of the Window object and can be accessed through the Window.document property.
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
document.getElementsByTagName(tagname)
The getElementsByTagName () method returns elements in the order that they are in the document.
If you pass the special string "*" to the getElementsByTagName () method, it returns a list of all the elements in the document, the order in which they are arranged in the document.
In the HTML DOM (Document Object model), each part is a node:
Element Object
For each node type, the return value of the NodeName and NodeValue properties:
| Serial Number | node Type | nodename return | NodeValue return |
|---|---|---|---|
| 1 | Element | Element name | Null |
| 2 | Attr | Property name | Property value |
| 3 | Text | Text | The contents of the node |
| 4 | Cdatasection | Cdata-section | The contents of the node |
| 5 | EntityReference | Entity reference name | Null |
| 6 | Entity | Entity Name | Null |
| 7 | ProcessingInstruction | Target | The contents of the node |
| 8 | Comment | Comment | Comment Text |
| 9 | Document | Document | Null |
| 10 | DocumentType | Document type name | Null |
| 11 | DocumentFragment | Document fragment | Null |
| 12 | Notation | Symbol name | Null |
Reference:
W3school provides content: http://www.w3school.com.cn/jsref/dom_obj_document.asp
JavaScript iterates through HTML form elements and form definitions
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
