やっぱり。JavaScript！- HTMLをあやつる
ホームページを表示させるために使うのがHTML。そのHTMLを操作することができるのがJavaScript。
HTMLはタグと呼ばれる文字でできています。
<html></html>、<body></body>、<div></div>などと書いて"表示させたいもの"、"場所"などを指定していき作り上げていきます。
JavaScriptはそのタグを直接、またはそのラベル(id,class)を目印に操作対象という判断をして命令、操作することが出きます。
例えば
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestPage</title>
</head>
<body>
<p id="greet">Hello</p>
</body>
</html>というHTMLがあって、<p>タグのデータを取得するには<p>タグについている"id"を使うのが便利です。
上記のHTMLをブラウザで表示させて、検証画面(WebInspector)を表示し、コンソールに直接打ち込んで試すことができます。
JavaScriptでHTMLのデータをとってくるには、"document"という命令を使います。
document.getElementById("greet")とすれば、
<p id="greet">Hello</p>
というHTMLが取得できます。ちなみに"document"命令するとHTML全体を取得することができます。 id="greet"を目印にこのタグ全体を取得できます。そして、表示部分のみを取りたい場合は
document.getElementById("greet").innerTextとすれば"Hello"が取得できます。
次に書いてあることを変更するには
document.getElementById("greet").innerText = "goodby"とすれば"Hello"という文字から"goodby"という文字に変更されます。
.innerTextを "=" で繋げて"goodby"を代入しているため最初にあった文字を上書きすることななります。
HTMLの<p>タグを"id"の名前で取得してデータの取得ができました。こんな感じでこのタグを操作するこことができます。
タグを操作するんだったら直接タグの名前で操作しいとも思いますが同じタグが使われてしまうとわかりくいです。でもその辺りは考えられています。
タグを使う場合は
document.getElementsByTagName();
とすればタグのデータはとれてきますが"id"と違うのは同じタグ名何個か使われている前提でデータは配列で取得となっています。なので取り出したいデータを指定する時は
let a = document.getElementsByTagName("p")
a[0]とすると最初の<p>タグのデータが取れます。
"document.getElementById()"とデータの扱いが違うので注意しないといけません。
この取得したタグのデータを変数に入れてあとJavaScript、CSSを操作できます。
この記事が気に入ったらサポートをしてみませんか？