こんにちは、こずえです。
プログラミング学習記録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」以外の参考資料になります。