要素を取得する方法をさまざまな方法をまとめていきます。
- getElementsByTagName
- getElementsByClassName
- 階層関係を使った要素の取得
getElementsByTagName
・getElementById() と querySelector() は特定の 1 つの要素を取得するためのもので,idやセレクターを指定します。
・複数の要素を指定する方法でよく使われるのがquerySelectorAll()でその他に使われるgetElementsByTagNameがあります。こちらは要素名で指定することができ、getElementsByTagName(‘h1’)という指定が複数可能です。
getElementsByClassName
・またクラス名で指定したい場合は、getElementsByClassName(‘h1’)やgetElementsByClassName(‘box’)としてあげると複数の要素を指定できます。
・ただこれらは querySelectorAll() で代用できるので、こういう命令も一応あることを意識しておけば良いでしょう。
階層関係を使った要素の取得
・DOMツリーの階層関係から取得する方法もあります。
・例えばulの中にliが３つある場合、ulに対してchildNodesとするとすべての子Nodeを取得できます。ここで要素 Node 以外にも空白や改行を表すテキスト Node もある点に注意してください。
・テキストNodeを無視して要素Nodeのみ取得したい場合はchildrenとすればulの中の子要素であるliのみが取得できます。
・ul.childrenとしてしてあげるようにしましょう。
・もしくは、最初や最後の子 Node といった指定もできて、その場合は firstChild 、 lastChild とすれば OK です。また、要素 Node だけ取得したい場合は、 firstElementChild 、 lastElementChild を使ってください。
・li 要素から見て親 Node を取得したいという場合もあります。その場合は li.parentNode としてあげれば OK で、同様に兄弟Nodeを取得したい場合は、 1 つ前の兄弟 Node が previousSibling 、 1 つあとの兄弟 Node が nextSibling になります。
・また、ここでも要素 Node だけ取得したい場合は、 previousElementSibling 、 nextElementSibling を使えば OK です。
・少し複雑でイメージがとても大切になるのですが慣れてくると簡単なので恐れずになれるために使い倒して行きましょう
