2019/11/09JavaScriptのDOM操作で要素を取得して移動するサンプルです。子要素を取得して移動するサンプルwhle文で移動するサンプル子の要素の取得と次の要素への移動firstElementChildプロパティは、指定した要素の最初の子要素を取得します。nextElementSiblingプロパティは、次の要素(弟の要素)を返します。lastElementChildプロパティは、指定した要素の最後の子要素を取得します。previousElementSiblingプロパティは、前の要素(兄の要素)を返します。似ている他のメソッドjQueryにも要素を移動するメソッドがあります。prev,next,parentなどを使用します。DOM操作で要素を移動する(prev/next他)子要素を取得して移動するサンプル子要素を取得して移動するサンプルです。//<td>テスト1</td>}</script>8行目のボタンを押すと10行目の関数を実行します。11行目は、firstElementChildで指定の要素の最初の子要素を取得します。14行目は、nextElementSiblingで次の要素(弟)を取得しています。17行目は、nextElementSiblingを続けています。次の次の要素を取得します。20行目は、lastElementChildで最後の要素を取得しています。whle文で移動するサンプル子要素を取得してwhle文で移動するサンプルです。//<td>テスト3</td>から順に表示}}</script>8行目のボタンを押すと10行目の関数を実行します。11行目は、firstElementChildで指定の要素の最初の子要素を取得します。12行目は、whileで子要素があるだけ繰り返します。14行目は、nextElementSiblingで次の要素に移動します。17行目は、lastElementChildで指定の要素の最後の子要素を取得します。20行目は、previousElementSiblingで前の要素に移動します。firstElementChild最初の子の要素を取得します。取得する要素がない場合は、nullを返します。firstElementChildプロパティに似た名前にfirstChildプロパティがあります。firstChildプロパティは要素以外のノードも取得します。以下はMDNのfirstElementChildのリンクです。https://developer.mozilla.org/ja/docs/Web/API/ParentNode/firstElementChildnextElementSibling次の要素(弟)を返します。指定の要素が最後の場合は、nullを返します。nextElementSiblingプロパティに似た名前にnextSiblingプロパティがあります。nextSiblingプロパティは要素以外のノードも返します。以下はMDNのnextElementSiblingのリンクです。https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSiblinglastElementChild最後の子の要素を取得します。取得する要素がない場合は、nullを返します。lastElementChildプロパティに似た名前にlastChildプロパティがあります。lastChildプロパティは要素以外のノードも取得します。以下はMDNのlastElementChildのリンクです。https://developer.mozilla.org/ja/docs/Web/API/Node/lastChildpreviousElementSibling直前の要素(兄)を返します。指定の要素が先頭の場合は、nullを返します。プロパティに似た名前にpreviousSiblingプロパティがあります。previousSiblingプロパティは要素以外のノードも返します。