DOM(Document Object Model) 集合的取用
DOM全名是Document Object Model,他是一種介面規範,
並使用模型來表示,如下
而任何想實作的語言需參考該介面規範來實作。
DOM的出現將讓開發者能夠擁有對頁面的元素、屬性、內文、事件做新增、修改、刪除、尋訪...等等能力。
DOM規範目前已從DOM Level 1 ~ DOM Level 3甚至到DOM4,
每一版可視為對DOM規範的補充,DOM Level 1又可分成兩部份,Core DOM與HTML DOM。
已知JavaScript有實作DOM,那麼就來看JavaScript如何操作DOM,
Document Object是用來操作DOM的基本物件,直接看範例:
<!DOCTYPE html> <html> <body> <form action="/" method="post" id="form1"> <input type="file" id="myFile" multiple size="50"> </form> <form action="/" method="post" id="form2"> First name: <input type="text" name="fname" value="Bob"><br> Last name: <input type="text" name="lname" value="John"><br> </form> <p id="demo1">demo1</p> <p id="demo2">demo2</p> </body> </html>
取得p Tag object collections並操作他
var pTags = document.getElementsByTagName("p");
另一個例子,取得form Tag object collections並操作他
當input tag的type屬性是file時(已先選擇一個檔案名為9vm91.jpg)
參考資料: