JavaScript遍歷HTML表單元素及表單定義

肖永威發表於2015-05-18
JavaScriptHTML

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

參考：
W3School 提供內容：http://www.w3school.com.cn/jsref/dom_obj_document.asp

相關文章