ある HTML 要素の親要素、子要素、兄弟要素を取得するには、下記のようなプロパティを使用します。

従来からある API と、新しい API があり、新しい API の方を使用すると、テキストノードを除いた要素のみを検索対象にしてくれます。 例えば、次のような構成の HTML があったとします。

<div id="main">
  <h2>タイトル1</h2>
  <h2>タイトル2</h2>
  <h2>タイトル3</h2>
</div>

div 要素の子要素は、3 つの h2 要素だけに見えますが、実際には改行文字やインデントのスペースがあるため、3 つのテキストノードが含まれています。 よって div 要素の子要素は次のようになります。

div
  +-- テキスト要素（改行＋インデント）
  +-- h2 要素
  +-- テキスト要素（改行＋インデント）
  +-- h2 要素
  +-- テキスト要素（改行＋インデント）
  +-- h2 要素
  +-- テキスト要素（改行）

div 要素に対して、従来からある childNodes プロパティを使用すると、上記のようなテキストノードを含む子要素の配列を取得することができます。

window.onload = function() {
  var main = document.querySelector('#main')
  var elems = main.childNodes;
  console.log(elems);  // [text, h2, text, h2, text, h2, text]
};

新しい API である children プロパティを使用すると、テキストノードを除いた子要素の配列を取得することができます。

window.onload = function() {
  var main = document.querySelector('#main')
  var elems = main.children;
  console.log(elems);  // [h2, h2, h2]
};