程式語言教學誌 FB, YouTube: PYDOING: HTML DOM 快速導覽 - 元素物件 element 的屬性 childElementCount

element.childElementCount 回傳 element 子代 (child) 元素的數量。

舉例如下

function run() {
    var p = document.getElementById("parent");
    var s = document.getElementById("show");
    s.innerHTML = p.childElementCount;
}

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

此例由 id 屬性 (attribute) 為 show 的元素 (element) 顯示 id 屬性為 parent 的子代元素數量

var p = document.getElementById("parent");
var s = document.getElementById("show");
s.innerHTML = p.childElementCount;

我們以下面的 HTML 文件載入

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="element001.js" type="text/javascript"></script> 
</head>
<body>
<input type="button" value="RUN" onclick="run();">
<div id="parent">
<div id="child1">Choice. The problem is choice.</div>
<div id="child2">There is no spoon.</div>
<div id="child3">Because I choose to.</div>
</div>
<div>Result: <span id="show"></span></div>
</body>
</html>

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

瀏覽器 (broswer) 開啟，按下 RUN 的結果如下

中英文術語對照
子代	child
屬性	attribute
元素	element
瀏覽器	broswer

您可以繼續參考

元素物件 element

屬性

Node.baseURI

Node.childNodes

Node.firstChild

Node.lastChild

Node.nextSibling

Node.nodeName

Node.nodeType

Node.parentNode

Node.previousSibling

Node.textContent

element.childElementCount

element.children

element.classList

element.className

element.clientHeight

element.clientLeft

element.clientTop

element.clientWidth

element.firstElementChild

element.id

element.innerHTML

element.lastElementChild

element.name

element.nextElementSibling

element.offsetHeight

element.offsetLeft

element.offsetParent

element.offsetTop

element.offsetWidth

element.previousElementSibling

element.scrollHeight

element.scrollLeft

element.scrollTop

element.scrollWidth

element.style

element.title

方法

element.addEventLisener(t_str, f, b)

Node.appendChild(c)

Node.cloneNode(b)

Node.hasAttributes()

Node.hasChildNodes()

Node.insertBefore(n, r)

Node.isEqualNode(a)

Node.isSameNode()

Node.removeChild(c)

Node.replaceChild(c)

element.getAttribute(n)

element.getAttributeNode(n)

element.getElementsByTagName(n)

element.hasAttribute(n)

element.removeAttribute(n)

element.setAttribute(n, v)

相關目錄

HTML DOM 快速導覽
 JavaScript 教材
 首頁

參考資料

https://developer.mozilla.org/en/DOM/Element.childElementCount

程式語言教學誌 FB, YouTube: PYDOING

網頁

HTML DOM 快速導覽 - 元素物件 element 的屬性 childElementCount

沒有留言:

張貼留言