今回も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 の基本的な事項を確認してきました。
次回からは、もう少しステップアップして実践的な例をみていきます。
カテゴリー
更新記事
- 『日本経済新聞』を読む 14(サービス収支、つながらない権利、租税回避地、電池寿命、置き社食)
- 『日本経済新聞』を読む 13(鉄鉱石、内需株、画像診断、ハブ空港、LCC)
- 『日本経済新聞』を読む 12(アンチモニー、おもちゃショー、スタートアップ、燃料電池、送電網)
- 『日本経済新聞』を読む 11(にがり、おせち、ダチョウ、災害ドローン、ビジネスホテル)
- 『日本経済新聞』を読む 10(航空エンジン、金型、国際会議、PCE、ゲーム機)
- 『日本経済新聞』を読む 9(家計金融資産、車載半導体、ホタテ、コンテナ、GPU)
- 『日本経済新聞』を読む 8(北陸新幹線、車中泊、ジョブ型、GPIF、メタンハイドレート)
- 『日本経済新聞』を読む 7(紙、ラストワンマイル、リユース市場、カード審査、ボルダリング)
- 『日本経済新聞』を読む 6(iPS細胞、騰落レシオ、短期プラ、REIT、フードテック)
- 『日本経済新聞』を読む 5(ナフサ、ビール、輸入牛肉、悪玉コレステロール、核融合)
- 『日本経済新聞』を読む 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、デジタルサイネージ、ハラール認証、ヴィーガンコスメ)
タグ
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) ことば (14) アンガーマネジメント (1) インソース (1) ココナラ (11) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (3) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (2) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (29) 用語 (7) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (11) IGS (11) Kラーニング (1)