どきゅめんと　おぶじぇくと　もでる　(ﾄﾞﾔｧ)

【htmlの構造をツリー状にしたもの】が、一番簡単な解釈です。
その要素にアクセスして、要素の中を書き換えたり、削除したり、追加したり
まぁ色んな事ができるよ！って事です。
で、いちいち画面の再描画(リロード)がいらないのでぬるぬる動わけであります。

要素

htmlのタグの事です。
タグ名やclassやIDで直接参照を行います。

兄弟要素

参照した要素と同階層にいる要素の事を兄弟要素といいます。

<div class="elem1">
 <div>divタグやで！！！！</div>
 <p>Pタグやで！！！！</p>
 <span>spanタグやで！！！！</span>
</div>
// pタグを参照した場合は、div spanが兄弟要素になります。

親要素

参照した要素の直前にいる要素を親要素と呼びます。
また、親のさらに上は先祖要素と呼びます。

<div class="elem1">
 <div>divタグやで！！！！</div>
 <p>Pタグやで！！！！</p>
 <span>spanタグやで！！！！</span>
</div>
// pタグを参照した場合は、div.elem1が親要素になります。

子要素

参照した要素が内包している要素が子要素になります。
子要素のさらに子要素は孫要素になります。

<div class="elem1">
 <div>divタグやで！！！！</div>
 <p>Pタグやで！！！！</p>
 <span>spanタグやで！！！！</span>
</div>
// div.elem1を参照した場合、div p span は子要素となります。