網頁

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);

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。