こんにちは、こずえです。
プログラミング学習記録61日目です。
JavaScriptについて学習しました。
所感：今日は誕生日だったので退社後おいしいご飯とデザートを食べに行きました(*´▽｀*)
合計学習時間
前回までの時間：121.25[h]
今回の時間：2.00[h]
合計時間：123.25[h]
学習内容
前回と同様に以下のサイトを読み進めていきました。
今回は「二章第七回 木構造の操作：さまざまな機能2」から「二章第九回 theadとtfoot」までを読みました。
以下自分まとめです。
DOM
兄弟ノード
- previousSibling：指定したノードの直前にあるノードを返すメソッド(※1)
- nextSibling：指定したノードの直後にあるノードを返すメソッド(※1)
- previousElementSibling：直前にある要素を返すメソッド(※1)
- nextElementSibling：直後にある要素を返すメソッド(※1)
空白文字や改行文字などもノードとして扱われるため、要素を取得する際はpreviousElementSibling( or nextElementSibling)を使用するのが確実です。
※1：親のchildNodesを参照しています。
replaceChild
指定したノードの子ノードを別のノードに置き換えるメソッドです。
cloneNode
指定したノードを別のオブジェクトとしてコピーするメソッドです。
引数にtrue(デフォルト値)を渡すと子ノードも含み、逆にfalseを渡した場合は指定したノードのみをコピーします。
テーブル
テーブルの行列(tr、td)はthead、tbody、tfootなどのHTMLCollectionという要素群の子要素として配置されています。
- HTMLTableElement
- rows：テーブルが持つ全てのtr要素を表すプロパティ
- insertRow：テーブルの指定した位置にtr要素を追加するメソッド
- deleteRow：テーブルの指定した位置のtr要素を削除するメソッド
- HTMLTableRowElement
- cells：tr要素が持つ全てのtd要素を表すプロパティ
- insertCell：tr要素の指定した位置にtd要素を追加するメソッド
- deleteCell：tr要素の指定した位置のtd要素を削除するメソッド
- HTMLTableSectionElement：thead要素、tbody要素、tfoot要素を扱うためのインターフェイス
- insertRow：HTMLTableElementと同様
- deleteRow：HTMLTableElementと同様
- createTHead：テーブルにthead要素を追加するメソッド(※2)
- createTFoot：テーブルにtfoot要素を追加するメソッド(※2)
- deleteTHead：thead要素を削除するメソッド
- deleteTFoot：tfoot要素を削除するメソッド
- tBodies：tbody要素のコレクションを表すプロパティ
※2：既に要素が存在する場合、その要素を返します。
参考資料
以下は「JavaScript初級者から中級者になろう — uhyohyo.net」以外の参考資料になります。