HTML DOM 快速導覽 - 元素物件 element

元素物件 element 有以下的屬性 (attribute) 與方法 (method)

元素物件 element 的屬性
名稱型態描述
Node.baseURIString回傳文件的網址
Node.childNodesNodeList回傳子代元素的集合物件
Node.firstChildNode回傳第一個子代元素
Node.lastChildNode回傳最後一個子代元素
Node.nextSiblingNode回傳下一個元素物件
Node.nodeNameString回傳元素名稱
Node.nodeTypeNumber回傳元素型態
Node.parentNodeNode回傳親代元素
Node.previousSiblingNode回傳前一個元素物件
Node.textContentString回傳元素的文字內容
element.childElementCountNumber回傳子代元素的數量
element.childrenNodeList回傳子代元素的集合物件
element.classListDOMTokenList回傳 class 屬性中標記的集合物件
element.classNameString回傳 class 屬性名稱
element.clientHeightNumber回傳元素所佔瀏覽器視窗範圍中的高
element.clientLeftNumber回傳元素所佔瀏覽器視窗範圍中左邊框的大小
element.clientTopNumber回傳元素所佔瀏覽器視窗範圍中上邊框的大小
element.clientWidthNumber回傳元素所佔瀏覽器視窗範圍中的寬
element.firstElementChildElement回傳第一個子代元素
element.idString回傳元素的 id 屬性
element.innerHTMLString設定或存取元素內容
element.lastElementChildElement回傳最後一個子代元素
element.nameString回傳元素的 name 屬性
element.nextElementSiblingElement回傳下一個元素物件
element.offsetHeightNumber回傳元素的高
element.offsetLeftNumber回傳元素與親代元素相對的左邊位移
element.offsetParentElement回傳元素親代的位移參考物件
element.offsetTopNumber回傳元素與親代元素相對的上邊位移
element.offsetWidthNumber回傳元素的寬
element.previousElementSiblingElement回傳上一個元素物件
element.scrollHeightNumber回傳元素捲軸中顯示的高
element.scrollLeftNumber回傳元素捲軸中顯示的向左位移
element.scrollTopNumber回傳元素捲軸中顯示的向上位移
element.scrollWidthNumber回傳元素捲軸中顯示的寬
element.styleCSSStyleDeclaration回傳元素的 style 屬性物件
element.titleString回傳元素的 title 屬性


元素物件 element 的方法
名稱描述
element.addEventLisener(t_str, f, b)替元素物件增加事件的傾聽者
Node.appendChild(c)替元素物件附加子代元素
Node.cloneNode(b)複製新的一個元素物件
Node.hasAttributes()回傳元素指定的屬性值
Node.hasChildNodes()判斷元素物件是否有子代
Node.insertBefore(n, r)替元素物件插入新的子代元素
Node.isEqualNode(a)判斷參數是否跟 Node 為相同的物件
Node.isSameNode()判斷參數是否跟 Node 為相同的物件
Node.removeChild(c)移除 Node 的子代元素
Node.replaceChild(c)調換 Node 的子代元素
getAttribute(n)回傳元素指定的屬性值
getAttributeNode(n)回傳元素指定的屬性物件
getElementsByTagName(n)回傳元素指定標籤的後代集合物件
hasAttribute(n)判斷元素是否有指定的屬性
removeAttribute(n)移除元素的指定屬性
setAttribute(n, v)設定元素的指定屬性


舉例如下
function run() {
    var d = document.getElementById("demo");
    d.removeAttribute("align");
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:element021.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2011 年 8 月 */


此例取得 id 屬性為 demo 的元素,然後然後移除掉 align 屬性
var d = document.getElementById("demo");
d.removeAttribute("align");


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="element021.js" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<input type="button" value="RUN" onclick="run();">
<div id="demo" align="center">Choice. The problem is choice.</div> 
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:element021.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2011 年 8 月 -->


瀏覽器 (broswer) 開啟,文字置中對齊



按下 RUN 後的結果如下



中英文術語對照
屬性attribute
方法method
瀏覽器broswer


您可以繼續參考
元素物件 element


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/element
http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614

沒有留言: