t_hazawaの日記

株式投資とWebエンジニアリングのブログです。株式投資の目次は→です。 https://t-hazawa.hatenablog.com/entry/2021/02/12/220933

JavaScript中級者になろう 2章を読んだ

前: JavaScript中級者になろうの基礎編と第一章を読んだ - t_hazawaの日記

目的・経緯

  • JavaScript を避け続けてきたので、ちゃんと知りたい

反省

  • 速さを意識して読むようにしたい
    • 変換ミスもキにしないようにしたい

内容

2-1 HTMLの木構造

二章第一回 HTMLの木構造 — JavaScript初級者から中級者になろう — uhyohyo.net

  • console も オブジェクト
  • ブラウザはそれぞれコンソールというものを備えている

  • 親と子の概念を拡張して、「祖先」「子孫」「兄弟」といった言葉も使われます。

2-2 DOMとは

二章第二回 DOMとは — JavaScript初級者から中級者になろう — uhyohyo.net

  • 一番初歩的なのはdom level1という仕様書です。

  • domの仕様にもいくつかレベルがあるんだね
  • とても重要な元からある document オブジェクト
  • domのほとんどがここからはじまる

  • getElementById() で取れる要素とは、特殊なオブジェクト

  • 大体みんなオブジェクト
  • 文書(document)はほぼノードでできている
  • ノードは12種類(数種類しか使わない)
  • 要素を表すノードが HTMLElement 要素の種類により細分化される

二章第三回 基本的な操作とテキストノード

二章第三回 基本的な操作とテキストノード — JavaScript初級者から中級者になろう — uhyohyo.net

  • まとめて壊さずちゃんとひとつずつ外してひとつずつ付けたり、あるいは壊さずに書き換えたりすると、原始的ではない
  • そうそう、何のタグにも囲われてないところが謎だったんだけど、テキストノードというんだね #text "nakami" であらわす
  • 一般にhtml要素は小文字で書かれますが、tagNameが大文字なのは歴史的経緯によるものです。昔は要素名を大文字で書くのが普通でした。

  • p.childNodes は知らなかった
  • 配列ではない NodeList
  • NodeList.item(0) ノードをとれる
  • children.item(1).tagName という書き方もできて便利
  • children[1] という書き方もある NodeList
  • textnode.nodeValue というメソッドがあるテキストノード

二章第四回 木構造の操作:ノードの除去

二章第四回 木構造の操作:ノードの除去 — JavaScript初級者から中級者になろう — uhyohyo.net

  • removeChild これはしってる
  • ノードについてるメソッドとはしらんかった
  • p.removeChild(textnode); 引数が Node ですごい (何番目の要素かでも指定できそう)
  • 木構造から 除去したノードは、また別の場所で使ったりできる

  • しらんかった
  • 参照わたし (変更可能)だから、一度 var children = p.childNodes; すれば children[0] は次々に変わっていくんだね
    • 参照渡しのことは後でしらべた(JSには参照渡しはないらしい)
  • 子ノードぜんぶ除去メソッドないのか…

    var p = document.getElementById('aaaaa');
    var children = p.childNodes;
    
    while( p.hasChildNodes() ){
      p.removeChild( children.item(0) );
    }
    
  • 変更可能だから(?)、意外とカンタン

  • firstChild プロパティ 使うともっとカンタン

二章第五回 木構造の操作:ノードの追加 createElement

二章第五回 木構造の操作:ノードの追加 — JavaScript初級者から中級者になろう — uhyohyo.net

  • document.createElement('p')
  • scriptタグの中身もテキストノード (#text) なんだね
  • 改行があるだけでテキストノードが発生します(ただし、終了タグの前の改行はテキストノードにならないことになっています)。

  • document.body
  • テキストノードを持たせるには、当然作る必要があります。テキストノードは、先に紹介したcreateElementでは作れません。別のメソッドを使います。それは、createTextNodeです。これまた、documentが持つメソッドです。

  • append するまでは、htmlを頂点とする木構造とは別の木構造として存在している

二章第六回 木構造の操作:さまざまな機能

二章第六回 木構造の操作:さまざまな機能 — JavaScript初級者から中級者になろう — uhyohyo.net

  • NodeListの重要な特徴は、木構造の変化が反映されるという点です。つまり、getElementsByTagNameを呼び出してから木構造に追加された要素もNodeListに入るし、逆に木構造から除かれた要素はNodeListからも除かれます。

  • HTMLElementがみな持ってるプロパティ紹介のコーナー
  • getElementsByTagNameの特別な使い方として、タグ名の代わりに"*"を引数とすると、全ての要素を取得できます。

  • まぁ裏技っぽくてあんまよくなさそう
  • classNameプロパティは、その要素のclass属性を表示します。大抵のプロパティは属性名とそれを取得できるプロパティ名が同じですが、これは珍しく違うため注意が必要です。

二章第七回 木構造の操作:さまざまな機能2

二章第七回 木構造の操作:さまざまな機能2 — JavaScript初級者から中級者になろう — uhyohyo.net

  • previous/nextSibling プロパティで兄弟がとれる
  • 改行があると #text ができてしまうから、微妙に使いにくい
  • htmlを最小化(余計な空白や改行を全部取り除く)してから配信することも行われています。この場合、最小化の前後でテキストノードの有無が変わってしまいます

  • このような問題に対処できる便利なプロパティが、previousElementSiblingとnextElementSibling

  • 「ins要素」の画像検索結果。ins要素は文書に後から挿入・追記されたテキストを表します。 del要素は文書から削除されたテキストを表します。

  • var b=a; では参照わたしだから cloneNode()
  • あるノードは木構造中の1箇所にしか入れることができない。同じノードを複数箇所に配置するということはできない

参照渡しとの違い

JavaScriptに参照渡し/値渡しなど存在しない - Qiita

  • 過激にすることで生き残る必要がある、本当に次から次に消滅した技術がたくさんあるフロントエンド界隈
  • 結局あるのかないのか
  • オブジェクトは1つしかなくて、そのオブジェクトを変更したから、bで見ているオブジェクト(同じオブジェクト)のプロパティも変わる、ってことかな。
  • aやbの参照をかえなければ同じものをみたまま、ってこと
  • 最後の問題、解けたけど、やっぱり直感的ではない感じ

二章第八回 テーブルの操作

二章第八回 テーブルの操作 — JavaScript初級者から中級者になろう — uhyohyo.net

  • 謎のtbody がついにわかるぞ
  • tbodyという要素は省略可能であり、まったく書かなくても暗黙のうちに存在すると見なされるのです

  • table の中に tbody を書いてもよかったのね
  • thead と tfoot がある場合もあるらしい
  • tbody が補完されるせいで 木構造の操作によってテーブルの行を一元的に扱うのは難しいです。

  • そのため、テーブル操作用の HTMLTableElement がある
  • HTMLTableElement.rows は HTMLCollection (NodeListのそっくりさん)
  • HTMLTableRowElement もあるよ
  • HTMLTableRowElement.cells
  • table.insertRow(), newtr.insertCell
  • table.insertRow(-1) で最後に追加(便利)
    • table.insertRow() (最後に追加) は2017年時点では新しすぎて危険だったらしい
  • table.deleteRow(0);
  • tr.rowIndex 何番目かをtr自身は知っている
  • td.cellIndex

二章第九回 theadとtfoot

二章第九回 theadとtfoot — JavaScript初級者から中級者になろう — uhyohyo.net

  • 謎の存在 thead, tfoot
  • 確かにtable ってヘッダとフッタがあるね(?)
  • ヘッダはテーブルの最初にある行、フッタは最後にある行です。それぞれ何行でも(tr要素が何個あっても)構いません

  • table要素の子要素として記述できるのは、thead,tbody,tfootの他にもcaptionやcol,colgroupなどがあります

  • まず、thead,tfoot,tbodyのHTMLElementは、HTMLTableSectionElementと呼ばれます。insertRowとdeleteRowを持っています。

  • table.createTHeadとcreateTFoot
  • なんと、ない場合は作るけど、ない場合は取得になるメソッド
    • (イケてない時、過去のJS感ある)
    • PHPにもここまでのものはない
  • table.deleteTHead, TFoot
  • 既に無かった場合も特にエラーになることはなく、何も起きません

  • table.tBodies ← HTMLCollection が入ってる (tbody 要素の一覧)

二章第十回 img要素とその他

二章第十回 img要素とその他 — JavaScript初級者から中級者になろう — uhyohyo.net

  • HTMLImageElement
  • img要素のHTMLElementは、HTMLImageElementといいます。imgタグは、空要素であるため、開始タグしかなく、終了タグがありませんが、扱い方は変わりません。

  • img要素はhtmlで「画像」を表す要素であることはご存知のとおりですが、domにおいては、img要素は単に木構造に挿入して画像を表示するという用途の他に、「画像」を扱うためのオブジェクトとしての役割も持ちます。 例えば、javascriptからcanvas要素に対して画像を描画する場合、描画したい画像を持つimg要素を引数として渡します。

  • そのうち分かるだろう
  • titleや script 要素にある text プロパティ
  • その要素の子ノードのテキストノードの値と同じです。また、書き換えも可能です。

  • getAttribute, setAttribute だとどんな属性でも操作できて便利
  • ちゃんとそれぞれ専用のプロパティを使うようにしたほうが見通しもよくなりおすすめです。

  • そうなのね

二章第十一回 スタイルシートの操作

二章第十一回 スタイルシートの操作 — JavaScript初級者から中級者になろう — uhyohyo.net

  • javascriptでは、cssの変更がサポートされています

  • 個々の要素のスタイルを変えたかったら HTMLElement.style をいじりましょう
  • p.style.border = "10px solid black";
  • styleプロパティには borderプロパティがあるのね
  • ちなみに、"background-color"のような場合、"backgroundColor"のように、ハイフンを無くして、ハイフンの直後の文字を大文字にして書きます。

二章第十二回 フォームの操作

二章第十二回 フォームの操作 — JavaScript初級者から中級者になろう — uhyohyo.net

  • HTMLFormElement
  • document.forms (HTMLCollection)
  • HTMLCollectionには番号で要素を取得するほかに、名前で要素を取得する機能を持ちます

  • document.forms.namedItem("form1");
  • 名前というのは、id属性またはname属性のことです

  • めちゃくちゃな気がしてきた
  • これは確かに型が必要と思われると思った
  • document.forms["form1"]; document.forms.form1; でもOK

  • 実は、HTMLFormElementはelementsというプロパティを持っています

  • 気になるような書き方ができてすごい
  • これは、そのフォームが持つコントロールのHTMLCollectionです。コントロールとは、フォームの中にある操作出来るもののことで、select要素とか、input要素とか、textarea要素とか、button要素など

  • document.forms["フォーム名"].elements["エレメント名"].value みたいに使う

  • HTMLFormElementは、submitとresetという2つのメソッドを持っています

  • input type="submit", "reset"と同じ
  • reset はフォームをリセットする (知らなかった)
  • HTMLInputElement
  • input.form 所属するForm の HTMLFormElement
  • input.defaultValue でデフォルト値が取れる
  • disabledプロパティは、文字列ではなく、真偽値が入っています

  • HTMLInputElement.blur .focus .click メソッド
  • blur フォーカス外し
  • .readOnly プロパティ (属性名は readonly)
  • 入力ボックス.select() 入力された文字を全て選択状態にする
  • チェックボックスラジオボタンの両方に .checked プロパティがある
  • .defaultChecked もあるよ
  • HTMLTextAreaElement
  • HTMLButtonElement

二章第十三回 フォームの操作2

二章第十三回 フォームの操作2 — JavaScript初級者から中級者になろう — uhyohyo.net

  • 絶望のまさかのフォーム2
  • HTMLSelectElement
  • HTMLOptionsCollection
  • 実は、select要素の下にはoptionの他にoptgroupという要素がある可能性があります。

  • ☆☆☆知らなかった めちゃ便利だ optgroup 使おう
  • select.options にまとめてoptionが入ってる
  • 何も洗濯されてないと-1な selectedIndex
  • select.add(),remove()

二章第十四回 nullとundefined

二章第十四回 nullとundefined — JavaScript初級者から中級者になろう — uhyohyo.net

  • JSおなじみの null と undefined だ
  • nodelist.item(100)
  • とかで 100※の p要素を取ろうとしたら null
  • 戻りねが無い関数の戻りねは undefined ナンだね
  • undefined が無い言語だと null になりそう
  • return; でも undefinedになるとのこと
  • var x; もundefined
  • 実は、ifに渡すと偽になる値は限られています。0とNaN(これについて詳しくは第十一章第六回で説明します)、空文字列(つまり"")、false、null、undefined。

  • 実は、nullはリテラルであるのに対しundefinedは「undefinedが入った変数」です。

  • undefined = 5; は一応デキる (strictではできない)が
  • null = 5; は文法エラー
  • var undefined = 5; はスコープ内ならできるとのこと
  • void 0 でつねにundefined を取れる
  • void は常に undefined を返す演算子

時間まとめ

  • 2021/10/3 に始めた
  • 30 + 30+60+21+60+15 = 3時間35分かかっている
    • 14節と1Qiita なので、 1節あたり 14.3分 (ちょっと長いかな?)
  • 2021/10/09 01:00 頃に終わった
  • 累計: 356分

感想

  • テキストノードの存在を知れてよかった
  • ☆☆☆selectの中に使える optgroup 知れてよかった

次: JavaScript中級者になろう 3章・4章を読んだ - t_hazawaの日記