【js】DOM ノードを追加、置換、削除する

js

ノードの追加、置換、削除についてまとめます。 HTMLの編集には、innerHTMLプロパティを利用することもできますが、今回紹介する方法だと以下のようなメリットがあります。オブジェクトツリーとして操作できるので、対象となるコンテンツが複雑になった場合…

2020-03-09

【js】DOM イベント操作

js

属性値やテキストを取得、設定する方法にについてまとめます。コードを使用したページ Qiita 特定の属性を取得、設定不特定の属性を取得テキストを取得、設定特定の属性を取得、設定多くの属性は要素ノードの同名のプロパティとしてアクセスできます。 …

2020-03-08

【js 】DOM 文書ツリー間を行き来するノードウォーキング

js

getElementByIdやquerySelectorAllメソッドはいずれもピンポイントで特定の要素ノード（群）を取得するためのメソッドです。しかし、いちいち文書全体から目的の要素を検索するのは無駄が多くそれはそのままパフォーマンス低下の原因にもなります。そこでD…

2020-03-08

【js】DOM 要素の検索まとめ

js

DOM（Document Object Model）はHTMLをJavascriptから操作できるようにしたインターフェイスのことです。 JavascriptからはDOM APIを通じてHTMLの情報を取得、変更、イベントの登録などができます。今回は情報を取得するために要素の検索についてまとめます…

2020-03-06

【js】ES6 モジュール

js

ES6から言語としてモジュールがサポートされました。モジュールとは、関連性を持たせて切り離された一塊のコード群のことです。モジュールのメリットモジュールを使うことで、以下のようなメリットがあります。他のコードとの依存性が少なくなるので、変…

2020-03-05

【js】ES6 オブジェクトリテラル

js

オブジェクトリテラル ES6ではオブジェクトリテラルの構文もシンプルに表現できるようになりました。 const title = 'この素晴らしい世界に祝福を'; const mainCharacter = 'カズマ'; const Anime = { title: title, mainCharacter: mainCharacter, subTitle…

2020-03-04

【js】クラスを定義する

js

ES6からjsでもclassを定義することができるようになりました。オブジェクト指向に関わる箇所なので、是非マスターしたいところです。オブジェクト指向については以前記事にまとめてあります。 https://takuma521.hatenablog.com/entry/2019/07/15/214850 …

2020-03-03

【js】配列を操作するメソッドまとめ

js

今回は配列を操作するときに便利なメソッドをまとめます！ forEach let titles = ['このすば', 'リゼロ', '幼女戦記', 'オバロ'] titles.forEach((title) => { console.log(title); }); // このすば // リゼロ // 幼女戦記 // オバロ function showTitle(tit…

2020-03-02

【js】クロージャ

js

クロージャとは、ローカル変数を参照している関数内関数のことです。なんのこっちゃわからないので、次のコードを見てください。 function countPoint(init) { let point = init; return () => { return ++point; } } let myCounter = countPoint(1); conso…