Javascriptで指定した要素内の子要素を、タグ指定で取得したい！children()を使うとTypeError: children is not a functionになる場合

hoge

 

Javascriptで指定した要素内の子要素を、タグ指定で取得したい

 

■ HTML

<div id="hoge">
  <p>aaaaaaaa</p> ← ★この行を取得したい
  <a>cccccccc</a>
</div>

 

children() でイケるだろうと思ってたら、エラー。なんでやねん。

 

■ Javascript

var parent = document.getElementById('hoge');

 ↓ NG!! (error) なぜかエラー
var child = parent.children("p");

 

■ エラーメッセージ

TypeError: children is not a function

 

解決策

 

しょうがないのでgetElementsByTagName()を使用して指定。

 

■ Javascript

var parent = document.getElementById('hoge');

 ↓ OK!!
var child = parent.getElementsByTagName("p")[0];

 

pタグが複数あって、そのｎ番目を取得したければ、[0] を、[n]に変えればいけるはず。
getElementsByTagName()以外にも、getElementById()やgetElementByClasses()でいけるはず。