JavaScriptで要素を操作する方法
HTMLドキュメントから特定の要素を取り出す方法
JavaScriptを使ってHTMLドキュメントから特定の要素を取り出す方法について説明します。
まず、特定のIDを持つ要素のボディを取り出す場合、getElementByIdを使います。
例えば、以下のようなコードがあるとします。
<div id="first">この中の文字</div>
JavaScriptでは次のようにしてIDが「first」である要素を取り出して、その中身を取得することができます。
document.getElementById("first").innerHTML
これをアラートで表示すると、次のようになります。
alert(document.getElementById("first").innerHTML)
このコードを実行すると、アラートボックスに「この中の文字」が表示されます。
要素の内容を変更する
次に、取り出した要素の内容を変更したい場合を考えてみます。
<div id="first">この中の文字</div>
JavaScriptを使って、上記の要素の内容を「書き換えました」という文字に変更する場合、次のようにします。
document.getElementById("first").innerHTML = "書き換えました"
これを実行すると、HTMLドキュメント内のIDが「first」の要素の内容が「書き換えました」に置き換わります。
実際の例: 複数の要素を操作する
次に、複数の要素を操作する具体的な例を見てみます。以下のようなHTMLを用意します。
<html>
<body>
<div id="first">1個目のディブタグ</div>
<div id="second">2個目のディブタグ</div>
<div id="third">3個目のディブタグ</div>
</body>
</html>
これらの要素を取り出して、その内容をJavaScriptで操作してみましょう。
1個目のディブタグの内容をアラートで表示
alert(document.getElementById("first").innerHTML)
3個目のディブタグの内容を書き換え
document.getElementById("third").innerHTML = "書き換えました"
これらのコードにより、1個目のディブタグの内容がアラートボックスに表示され、3個目のディブタグの内容が「書き換えました」に変更されます。
まとめ
JavaScriptを使うことで、HTMLドキュメント内の特定の要素を簡単に取り出し、その内容を変更することができます。この基本的な操作を覚えることで、もっと複雑な操作もできるようになります。
+------------------------------+
| |
| 1個目のディブタグ |
| |
+------------------------------+
↓
+------------------------------+
| |
| 書き換えました |
| |
+------------------------------+
JavaScriptの基本的な操作を理解し、自由にHTMLを扱えるようになると、非常に便利で可能性が広がります。興味を持った方は、ぜひさらに深く学んでみてください。
タイムスタンプ
1 00:00:01,310 --> 00:00:09,969 [音楽]
2 00:00:10,029 --> 00:00:16,519 ht ベルで javascript で
3 00:00:13,250 --> 00:00:20,289 トレンティアてるのか例えば
4 00:00:16,519 --> 00:00:24,428 by 種類の中にあるボディを取り出したいと
5 00:00:20,289 --> 00:00:30,590 2番ありますね自分の id パースととか
6 00:00:24,428 --> 00:00:34,719 id セカンド文字2区がこうあって中の文字を
7 00:00:30,589 --> 00:00:34,719 取り出すお腹の文字ありますよね
8 00:00:36,049 --> 00:00:44,879 米の give タグの中身を取り出したい
9 00:00:40,649 --> 00:00:46,839 場合はゲットエレメント by it
10 00:00:44,880 --> 00:00:53,380 というのを使います
11 00:00:46,840 --> 00:00:54,550 8アラートで回ったというとドキュメントのドキュメント.ねゲットエレメント by
12 00:00:53,380 --> 00:01:02,859 アイディファースト
13 00:00:54,549 --> 00:01:06,489 て行ってあげるとこの id ファーストどんな神.インナー.園しれねえねこの要素
14 00:01:02,859 --> 00:01:08,700 の中3基ほどね
15 00:01:06,489 --> 00:01:08,699 ここ
16 00:01:09,180 --> 00:01:12,410 ファーストって言う
17 00:01:12,939 --> 00:01:20,979 ついているね9まあ
18 00:01:16,000 --> 00:01:25,230 要素エレベートって言いますけれどもがありましてインナー.いいしてみるというのは
19 00:01:20,980 --> 00:01:25,230 この今のパ階部分のことをいいます
20 00:01:25,319 --> 00:01:30,868 こすると取り出せる
21 00:01:27,209 --> 00:01:32,269 文字を書きたい書き換えたいときはさっきと同じ部分ね
22 00:01:30,868 --> 00:01:35,530 わっ
23 00:01:32,269 --> 00:01:39,078 8 document .ライトの
24 00:01:35,530 --> 00:01:41,980 document .ゲットエレメント倍にまたファーストね
25 00:01:39,078 --> 00:01:45,969 同じ部分を
26 00:01:41,980 --> 00:01:49,780 指定してそのインナー. html を
27 00:01:45,969 --> 00:01:53,010 まあさらに指定したとということはまあこの部分が今
28 00:01:49,780 --> 00:01:55,480 定義ここから取り出されているわけね
29 00:01:53,010 --> 00:02:03,480 そこに第2
30 00:01:55,480 --> 00:02:03,480 書き換えましたって言葉を代入してあげるとその中にここが変わってくれるって
31 00:02:06,150 --> 00:02:16,990 では続きましてえっと h 目の中の文字を取り出したい
32 00:02:11,979 --> 00:02:18,689 っていうのがありますのでちょっと html ネ喪子様
33 00:02:16,990 --> 00:02:24,390 取り出しましょうか
34 00:02:18,689 --> 00:02:26,459 まず html を作ります html はディヴの id かー
35 00:02:24,389 --> 00:02:27,439 ハイディファースト dv
36 00:02:26,459 --> 00:02:31,610 の
37 00:02:27,439 --> 00:02:37,539 ちょっと帰っちゃった末ティ部の id の paas と
38 00:02:31,610 --> 00:02:37,540 でえっとここに1個目の
39 00:02:38,349 --> 00:02:41,909 こ
40 00:02:39,818 --> 00:02:43,869 命の
41 00:02:41,909 --> 00:02:45,909 dv ターグ
42 00:02:43,870 --> 00:02:47,950 って作ってあげて
43 00:02:45,909 --> 00:02:52,379 でこれを
44 00:02:47,949 --> 00:03:00,379 まあ2つ3つと作るわけですね生還と
45 00:02:52,379 --> 00:03:00,379 2個目の木2グってサード手間 id 名をつけてあげます
46 00:03:00,460 --> 00:03:09,640 でこれで3つできましたじゃあこんな紙にた志團関数を実行したくないので
47 00:03:06,699 --> 00:03:13,869 コメンターとしておいてください
48 00:03:09,639 --> 00:03:15,039 コメントアウトしてその下に作っていくんですけれども
49 00:03:13,870 --> 00:03:19,060 まずは
50 00:03:15,039 --> 00:03:20,609 更新ボタン押してを123ねじ部タグ
51 00:03:19,060 --> 00:03:25,069 できてますね
52 00:03:20,610 --> 00:03:28,219 じゃあ8これをですね取り出す
53 00:03:25,068 --> 00:03:35,530 スクリプト java 助けると書いてみましょうか
54 00:03:28,218 --> 00:03:37,740 でアラートで出していますね要はこの1個目のディ2グってこの文字をアラートで
55 00:03:35,530 --> 00:03:42,669 取り出してみたいよと
56 00:03:37,740 --> 00:03:47,060 という時にどう書くかというとアラート
57 00:03:42,669 --> 00:03:48,280 で document .ラインと
58 00:03:47,060 --> 00:03:50,610 で
59 00:03:48,280 --> 00:03:56,009 8ですねドキュメだぞ
60 00:03:50,610 --> 00:04:01,020 と document .ライトじゃないですよ目指すここはドキュメントの get
61 00:03:56,009 --> 00:04:05,310 a 面と場合 id
62 00:04:01,020 --> 00:04:06,560 ね id 名でドキュメントの id 名で取り出しなさい
63 00:04:05,310 --> 00:04:09,180 それは
64 00:04:06,560 --> 00:04:11,509 ファーストって言う
65 00:04:09,180 --> 00:04:17,100 id 名だよ
66 00:04:11,509 --> 00:04:21,899 ねっていうことまずはまあここが paas と
67 00:04:17,100 --> 00:04:24,420 id 名がファーストを取り出しなさい今の時点でこれどうなってるかっていうのを
68 00:04:21,899 --> 00:04:30,179 ちょっと見てみましょうか
69 00:04:24,420 --> 00:04:31,330 で個人ボタンあらと出てオブジェクト html dv エレメント
70 00:04:30,180 --> 00:04:37,259 なるほど
71 00:04:31,329 --> 00:04:39,810 二部要素今ファーストっていうこの要素全体が
72 00:04:37,259 --> 00:04:46,389 こうアラートで出力されています
73 00:04:39,810 --> 00:04:50,439 でオブジェクトとしてちょっと難しいここは今知らなくていいですけれどもこの部分が
74 00:04:46,389 --> 00:04:53,439 アラートで出てますよということですねっ
75 00:04:50,439 --> 00:04:57,000 こずげっ定例イベント場合にファースを取り出すと
76 00:04:53,439 --> 00:05:00,180 ここ全体が取り出されるよということでここ
77 00:04:57,000 --> 00:05:04,139 ゲイじゃあその中の
78 00:05:00,180 --> 00:05:06,579 さらにインナー.いっしょはその中の文字だけっていうのは
79 00:05:04,139 --> 00:05:10,970 インナ
80 00:05:06,579 --> 00:05:15,899 html 高回転とじゃあもう一回
81 00:05:10,970 --> 00:05:17,780 リロードをそうすると1個目のリブだけてね取り出せました
82 00:05:15,899 --> 00:05:20,529 いいですね
83 00:05:17,779 --> 00:05:20,529 じゃあ次は
84 00:05:20,639 --> 00:05:25,550 逆にこの中身を
85 00:05:23,350 --> 00:05:30,830 これ書き換えてみると
86 00:05:25,550 --> 00:05:32,460 今1個目のディ2グって書いてありますけれどもこれを書き換えます
87 00:05:30,829 --> 00:05:36,959 これは
88 00:05:32,459 --> 00:05:38,199 そのまんま8きっとエレメント場合 id
89 00:05:36,959 --> 00:05:45,009 アラートで
90 00:05:38,199 --> 00:05:45,909 今回はアラートではなくですねアラートだとさっきのが出てしまいますのでアラートは
91 00:05:45,009 --> 00:05:50,560 取ります
92 00:05:45,910 --> 00:06:00,070 アラートのこの格好の部分とかこの部分を消す
93 00:05:50,560 --> 00:06:01,490 そして89 h チインナーシェルここでドキュメントのゲットエレメントば id の
94 00:06:00,069 --> 00:06:04,990 first
95 00:06:01,490 --> 00:06:08,680 の便な愛車にここまで指定できてるじゃないですか
96 00:06:04,990 --> 00:06:11,199 まあ要はここが指定できていっ
97 00:06:08,680 --> 00:06:15,090 この部分が指定でき
98 00:06:11,199 --> 00:06:18,060 ということになっていますでその中に
99 00:06:15,089 --> 00:06:21,000 文字列を代入すると
100 00:06:18,060 --> 00:06:24,120 書き換えました
101 00:06:21,000 --> 00:06:26,930 そうするとどうなるかというとエッ
102 00:06:24,120 --> 00:06:28,009 を書き換えました
103 00:06:26,930 --> 00:06:32,139 ですねー
104 00:06:28,009 --> 00:06:39,038 この html の中の8ファースト
105 00:06:32,139 --> 00:06:41,728 この部分をまず特定してその中のインナー度と html この部分に対してそこまで
106 00:06:39,038 --> 00:06:45,870 ここで特定できました
107 00:06:41,728 --> 00:06:47,889 でそれを書き換えましたという言葉
108 00:06:45,870 --> 00:06:51,329 代入して
109 00:06:47,889 --> 00:06:56,579 このように書き換えましたと
110 00:06:51,329 --> 00:06:57,779 いいですね自由にこれ javascript 扱えるようになるのでとても便利で
111 00:06:56,579 --> 00:07:01,379 可能性をね
112 00:06:57,779 --> 00:07:04,429 感じていただけたんじゃないかなと思います
113 00:07:01,379 --> 00:07:04,430 それで終わりにしましょう