目錄 : 網頁設計學習課程參考
在網頁中，使用JavaScript的主要目的是提供動態的內容，也就是說針對使用者的操作而進行回應。回應的時候，我們可能想要改變目前版面的外觀，或者是想要植入新的內容。要達到此種效果，必需要可以用程式取用、更改版面上的元素才行。 因此，就我們就必須使用文件物件模型(Document Object Model, 簡稱DOM)了。
此網頁中<body>標籖內的內容如下所示。
<header>
<h1>Lesson 17 文件物件模型(DOM) 一 Part 1</h1>
</header>
<nav>
<p>
<a href="./index.html">大綱</a>
</p>
</nav>
<div>
文件物件模型(DOM) 就是代表HTML文件本身的物件模型.
</div>
<footer>
<p>
© Copyright by Tien-Yu Sun
</p>
</footer>
</div>
</body>
在理解DOM的結構時，物件是有階層的概念。例如，在<body>標籖元素內是一個<div>標籖元素，因此我們就稱此<div>標籖元素為<body>標籖元素的子物件，並稱<body>標籖元素為父物件。子物件在畫樹狀圖時要畫在父物件下方。
PS: 版權所有,侵犯著作權必告.
在網頁中，使用JavaScript的主要目的是提供動態的內容，也就是說針對使用者的操作而進行回應。回應的時候，我們可能想要改變目前版面的外觀，或者是想要植入新的內容。要達到此種效果，必需要可以用程式取用、更改版面上的元素才行。 因此，就我們就必須使用文件物件模型(Document Object Model, 簡稱DOM)了。
在DOM中，我們首先要視HTML文件本身為—物件。由於HTML文件中含有許多內容，如HTML標籖元素、標籖元素中的屬性、CSS樣式、文字、圖片等。因此DOM把HTML文件內的各項內容都視為HTML文件的子物件。HTML文件本身以及其中所含的子物件，我們可以用—做樹狀圖把所有物件組織起來。如此，在HTML中尋找內容只是沿著樹狀圖找即可。JavaScript在此方面有相應物件模型可用，後續會和各位介紹。
現在我們用下方畫面中的網頁作為示範。
此網頁中<body>標籖內的內容如下所示。
<body>
<div><header>
<h1>Lesson 17 文件物件模型(DOM) 一 Part 1</h1>
</header>
<nav>
<p>
<a href="./index.html">大綱</a>
</p>
</nav>
<div>
文件物件模型(DOM) 就是代表HTML文件本身的物件模型.
</div>
<footer>
<p>
© Copyright by Tien-Yu Sun
</p>
</footer>
</div>
</body>
在理解DOM的結構時，物件是有階層的概念。例如，在<body>標籖元素內是一個<div>標籖元素，因此我們就稱此<div>標籖元素為<body>標籖元素的子物件，並稱<body>標籖元素為父物件。子物件在畫樹狀圖時要畫在父物件下方。
另外，許多HTML標籖元素內都有屬性。標籖元素的開始標籖及結束標籖之間還可以有文字或圖內內容。在DOM結構中，屬性也視為HTML標韱元素的子物件。在畫樹狀圖時屬性物件可加註為Attribute(或註記為屬性)並畫在HTML標籖元素下方。文字內容則在DOM及樹狀圖中表示為Text物件。例子請見上方HTML碼中之<a>標籖部份。
根據上述觀念，我們就可以把上述例子畫作下圖。
有了DOM的觀念，下—課將介绍相對的JavaScript物件及程式的用法。
PS: 版權所有,侵犯著作權必告.
留言
張貼留言