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)

 

參考資料:

Document Object Model (DOM) Technical Reports

JavaScript HTML DOM

The HTML DOM Document Object

File API