With the HTML DOM, the document object is your web page.
The HTML DOM Document
In the HTML DOM object model, the document object represents(代表/意味著是) your web page. The document object is the owner of all other objects in your web page. If you want to access objects in an HTML page, you always start with accessing the document object.
Finding HTML Elements(取得HTML的元素)
| Method | Description |
| document.getElementById() | Find an element by element id 用ID代表：唯一 |
| document.getElementsByTagName() | Find elements by tag name 用標籤名稱代表，有多個同時選取。 |
| document.getElementsByClassName() | Find elements by class name 用群組/類名代表：好幾個元素。 |
Changing HTML Elements元素的屬性
| Method | Description |
| element.innerHTML= | Change the inner HTML of an element <tagName> inner指的就這個區塊要放入的內容 </tagName> |
| element.attribute= | Change the attribute of an HTML element <tagName id=”ID名稱” > </tagName> |
| element.setAttribute(attribute,value) | Change the attribute of an HTML element <tagName id=”ID名稱” > </tagName> 設定A屬性，值Value |
| element.style.property= | Change the style of an HTML element 樣式屬性值： |
Adding and Deleting Elements 增/刪元素
| document.createElement() | Create an HTML element |
| document.removeChild() | Remove an HTML element |
| document.appendChild() | Add an HTML element |
| document.replaceChild() | Replace an HTML element |
| document.write(text) | Write into the HTML output stream text幾乎等同整個<html></html>的內容。 因此不寫資料進去，就等於清空網頁的資料。 |
Adding Events Handlers
一個點擊事件語法，可說是標準/常用到不行的一個「寫法」
| Method | Description |
| document.getElementById(id).onclick=function() { code } | Adding event handler code to an onclick event 特色1：使用無名函數寫法 特色2：指定元素後直接使用其方法 而方法則對應一個無名函數。 |
Finding HTML Objects
The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5. Later, in HTML DOM Level 3, more objects, collections, and properties were added.
| Property | Description | DOM |
| document.anchors | Returns all <a> elements that have a name attribute | 1 |
| document.applets | Returns all <applet> elements (Deprecated棄用 in HTML5) | 1 |
| document.baseURI | Returns the absolute base URI of the document | 3 |
| document.body | Returns the <body> element | 1 |
| document.cookie | Returns the document's cookie | 1 |
| document.doctype | Returns the document's doctype | 3 |
| document.documentElement | Returns the <html> element | 3 |
| document.documentMode | Returns the mode used by the browser | 3 |
| document.documentURI | Returns the URI of the document | 3 |
| document.domain | Returns the domain name of the document server | 1 |
| document.domConfig | Obsolete過時. Returns the DOM configuration | 3 |
| document.embeds | Returns all <embed> elements | 3 |
| document.forms | Returns all <form> elements | 1 |
| document.head | Returns the <head> element | 3 |
| document.images | Returns all <img> elements | 1 |
| document.implementation | Returns the DOM implementation | 3 |
| document.inputEncoding | Returns the document's encoding (character set) | 3 |
| document.lastModified | Returns the date and time the document was updated | 3 |
| document.links | Returns all <area> and <a> elements that have a href attribute | 1 |
| document.readyState | Returns the (loading) status of the document | 3 |
| document.referrer | Returns the URI of the referrer (the linking document) | 1 |
| document.scripts | Returns all <script> elements | 3 |
| document.strictErrorChecking | Returns if error checking is enforced | 3 |
| document.title | Returns the <title> element | 1 |
| document.URL | Returns the complete URL of the document | 1 |
沒有留言:
張貼留言