ParentNode.children - 子要素
childrenは、ParentNodeのプロパティです。全ての子要素を返します。
概要
- 名前
- children
- 所属
- ParentNode
- IDL
[SameObject] readonly attribute HTMLCollection children;
- 仕様書
- https://dom.spec.whatwg.org/#dom-parentnode-children
説明
全ての子要素を表すHTMLCollectionを返す。
デモ
ParentNode.childrenのデモです。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<ul id="hoge">
<li>SYNCER1</li>
<li>SYNCER2</li>
<li>SYNCER3</li>
</ul>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
var elements = element.children ;
console.log( elements ) ;
document.getElementById( "result" ).appendChild( new Text( elements ) ) ;
</script>
</body>
</html>
サポート状況
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
children | ● | ● | ● | ● | ● | ● | ● | ● |
on Document | ● 29+ | ● 25+ | ● 9.1+ | × | × | ● 16+ | ● 9.1+ | ● 4.4+ |
on DocumentFragment | ● 29+ | ● 25+ | ● 9.1+ | × | × | ● 16+ | ● 9.1+ | ● 4.4+ |
関連記事
- HTMLCollection
- HTMLCollectionは、HTML要素の集合を表すオブジェクトです。Elementだけが含まれた配列であるかのように、手軽にインデックス番号でアクセスできます。
- クリックした位置を取得する
- マウスでクリックした位置を取得するには、eventオブジェクトのpageX、pageYを参照します。
- ParentNode.lastElementChild
- lastElementChildは、ParentNodeのプロパティです。最後の子要素を返します。
- ParentNode.childElementCount
- childElementCountは、ParentNodeのプロパティです。子要素の数を返します。