今回もDOMという概念を学んでいきます。
1 idセレクタを使ってみる
下は前回のものです。
HTML(一部)
<body>
<ul>
<li>1年生</li>
<li>2年生</li>
<li>3年生</li>
</ul>
<script>
let grade = document.querySelector("ul");
let add = document.createElement("li");
add.textContent = "4年生";
grade.appendChild(add);
</script>
</body>
ブラウザ
・1年生
・2年生
・3年生
・4年生
追加するのはいいのですが、特定の項目を操作するにはどうしたらいいのでしょうか。
HTML(一部)
<body>
<ul id = "schoolyear">
<li id = "schoolyear1">1年生</li>
<li id = "schoolyear2">2年生</li>
<li id = "schoolyear3">3年生</li>
</ul>
<script>
let grade = document.getElementById("schoolyear");
let add = document.createElement("li");
add.textContent = "4年生";
add.id = "schollyear4";
grade.appendChild(add);
</script>
</body>
ブラウザ
・1年生
・2年生
・3年生
・4年生
idセレクタを使います。これは要素を区別するためのもので、ページ内には一つしか記述することができないものです。
これを使用して要素を特定するのですね。
つまり getElementById メソッドは schoolyear という引数を指定することにより、オブジェクトを指定しているのです。
しかし、項目の追加なので、最初の例とあまり変わりはありませんね。
そこで、テキストの変更の例を見てみましょう。
HTML(一部)
<body>
<ul id = "schoolyear">
<li id = "schoolyear1">1年生</li>
<li id = "schoolyear2">2年生</li>
<li id = "schoolyear3">3年生</li>
</ul>
<script>
let schoolyear3 = document.getElementById("schoolyear3");
schoolyear3.textContent = "さんねんせい";
</script>
</body>
ブラウザ
・1年生
・2年生
・さんねんせい
これは Script 以下の2行目で Id “schoolyear3” を指定し、オブジェクトを変数に代入しています。
そして、そのテキストを「さんねんせい」に変更しているのですね。
次は削除です。
HTML(一部)
<body>
<ul id = "schoolyear">
<li id = "schoolyear1">1年生</li>
<li id = "schoolyear2">2年生</li>
<li id = "schoolyear3">3年生</li>
</ul>
<script>
let schoolyear3 = document.getElementById("schoolyear3");
schoolyear3.remove();
</script>
</body>
ブラウザ
・1年生
・2年生
この例でも同様にidセレクタでオブジェクトを指定して、remove メソッドにより削除しています。
3 次回
さて、ここまで JavaScript の基本的な事項を確認してきました。
次回からは、もう少しステップアップして実践的な例をみていきます。
カテゴリー
更新記事
- 『日本経済新聞』を読む 4(ダビンチ・サージカル・システム、ゼロエミッション船、クッキー、LBO、洋上風力発電)
- 『日本経済新聞』を読む 3(変動金利、HSP、スリープテック、双腕ロボット、物流パレット)
- 『日本経済新聞』を読む 2(DAC、株主優待、オピオイド、ベトナム車市場、離れ小島)
- 『日本経済新聞』を読む 1(リバースメンタリング、CBT、EBPM、地方創生DAO、IBD)
- テーマ株投資(7か月)
- 『会社四季報 2024年 3集 夏号』を読む 20(RPF、DtoC、ToF、駅ナカ、CX)
- 『会社四季報 2024年 3集 夏号』を読む 19(ATC、プローブカード、ニューデリー、商品CFD、SUV、FPC、IFRS)
- 『会社四季報 2024年 3集 夏号』を読む 18(シャリ玉ロボット、YAGレーザー、シナジー、SaaS、クルーズ、DFBレーザー)
- 『会社四季報 2024年 3集 夏号』を読む 17(DSP、サーメタル、自動小銃、ダイカストマシン、FPSO、サーボモーター、水晶振動子)
- 『会社四季報 2024年 3集 夏号』を読む 16(クロスセル、eVTOL、CFCC、RFID、配当性向、事業承継)
- 『会社四季報 2024年 3集 夏号』を読む 15(SiC半導体、NAS電池、フェロニッケル、フェライト粉、スポンジチタン)
- 『会社四季報 2024年 3集 夏号』を読む 14(AI警備システム、プロダクトアウト、ホットメルト接着剤、放熱ゲル、パイル、カソード)
- 『会社四季報 2024年 3集 夏号』を読む 13(PLM、ファクタリング、BCP、グリシン、メタクリル樹脂、アクティブシニア)
- テーマ株投資(6か月)
- 『会社四季報 2024年 3集 夏号』を読む 12(カプロラクタム、ゼロトラスト、RAG、ERP、シリカ)
- 『会社四季報 2024年 3集 夏号』を読む 11(オリゴマー、エッジAI、MLCC、ジルコニウム、アセチレンガス、ファインケミカル)
- 『会社四季報 2024年 3集 夏号』を読む 10(フラッシュハンドル、自動配膳ロボット、R-SUD、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証)
- 『会社四季報 2024年 3集 夏号』を読む 9(ペロブスカイト太陽電池、プロテイン、銀だこ、尿素SCR、エクソソーム)
- 『会社四季報 2024年 3集 夏号』を読む 8(ドミナント、EBITDA、SAF、消防車、キャンプ用品、GIGAスクール、ボウリング場)
- 『会社四季報 2024年 3集 夏号』を読む 7(MD、パーム椰子、GMS、EC、デジタルサイネージ、ハラール認証、ヴィーガンコスメ)
- 『会社四季報 2024年 3集 夏号』を読む 6(BIM、CMS、つけまつげ、CDMO、BNPL、EDI、CRM)
- 『会社四季報 2024年 3集 夏号』を読む 5(アグリゲーション、EMS、BPO、のれん、カカオ豆、オーツミルク)
- 『会社四季報 2024年 3集 夏号』を読む 4(SEP、社内起業、ZEP、VPP、DOE、バイオセンサー、PBX)
- 『会社四季報 2024年 3集 夏号』を読む 3(海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電)
- テーマ株投資(5か月)
- 『会社四季報 2024年 3集 夏号』を読む 2
- 『会社四季報 2024年 3集 夏号』を読む 1
- JavaScript でDOM 2
- JavaScript でDOM 1
- JavaScript でオブジェクト 5
タグ
break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) ことば (4) アンガーマネジメント (1) インソース (1) ココナラ (11) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (3) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (2) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (29) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (11) IGS (11) Kラーニング (1)