JavaScript-DHTML物件模型-Document物件(三)

取得文件元素

此小節裡的三個方法可以說是JavaScript最重要的三個方法，原因是，當我們想要對頁面上任何元素進行操作前，必須先取得此元素的控制權，有了控制權我們才有辦法對元素本身進行操控。

JavaScript 取得文件元素

名稱	說明
getElementById()	依HTML tag的id屬性取得指定的元素
getElementByName()	依HTML tag的name屬性取得指定的元素
getElementByTagName()	傳回一個包含某個相同標籤名稱的元素NodeList(Array)

<h2 id="header">取得文件元素</h2>

// 取得元素id屬性為header的元素
ele = document.getElementById("header");

// 取得元素name屬性為input的視素
ele = document.getElementsByName("input");

// 取得元素標籤名稱為li的元素，回傳Array()
ele = document.getElementByTagName("li");
alert( ele.length +', '+ ele[0].tagName +', '+ele[3].childNodes[0].nodeValue);

ele代表元素。

tagName：tag名稱。length：同名tag有多少個。

存取HTML標籤(tags)的內容和屬性 - innerHTML

由getElementById / getElementByName 取得文件元素後，就可以使用innerHTML來存取標籤物件內的子標籤和內容。一般都是用來插入HTML標籤。例如在空的<div>、<span>、<p>插入所需標籤，來顯示動態效果。innerText / outerHTML / outerText 除IE外，其他Browser相容性不佳，不建議使用。

ele.innerHTML = '<span>動態由JavaScript所插入的span元素</span>';

標籤屬性

// 取得<p>屬性align的屬性值
eleAttr = document.getElementById("P").align;
/* IE可用以下方法，但不建議使用。
 * eleAttr = document.all.tags("P").item(0).align;
 */

JavaScript HTML標籤屬性存取

名稱	說明	範例
getAttribute(attr)	取得傳入attr屬性值	ele.getAttribute("align");
setAttribute(attr,value)	將value值設定給attr屬性	ele.setAttribute("align","center");
removeAttribute(attr)	刪除傳入的attr屬性	ele.removeAttribute("align");

標籤尺寸與位置

JavaScript HTML標籤尺寸與位置

名稱	說明
offsetLeft	標籤物件距離左方邊界的距離
offsetTop	標籤物件距離上方邊界的距離
offsetHeight	標籤物件的高
offsetWidth	標籤物件的寬
offsetParent	取得標籤物件的上一層物件

scrollIntoView方法

scrollIntoView("true|false")：如果Broswer看不到標籤物件，自動捲動視窗顯示標籤物件，例如，

ele.scrollIntoView(true);