半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録61日目

更新日:

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

-プログラミング, 学習, 記録
-, ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.