Help us understand the problem. What is going on with this article?

JavaScriptで要素を指定 (前編)

More than 3 years have passed since last update.

JavaScriptで◯◯シリーズ、4作めは要素の指定です。私は主にdocument.getElementById("ID");を使っていますが、他の便利な指定方法もあります。ちなみに、構造をかくと、

要素.動作();
や、
要素.値 = X;
みたいに使います。

属性を使おう

id,name,class...
オプションを使ってHTML要素には様々な名前がつけられます。ここで、各オプションの特徴や使いどきを解説しておきましょう。

一つだけのアイデンティティー

id。それは一つだけのアイデンティティー・・ってそんなことは置いておいて、idは1つだけの要素に指定できます。
主にJavaScriptで要素を指定するときに使います。

document.getElementById("element");
<p id="element">Pタグです</p>

jsの中では、pタグが指定されています。この前にvar p = なんてつけると、変数pのなかにp要素が入ります。

みんなで一緒のclassになろう

classはクラスと読みます。学校のクラスのように、そのクラスを持っている全部の要素が参照されます。使い方が少し特殊なので、お気をつけください。

document.getElementsByClassName("hoge")[0];

まず、間違えやすいポイントが2つあります。getElement s が必要なことと、
getElementsByClass Name が必要なことです。

classは少し特殊です

まず、クラスは複数選択できるということは、全てが選択されるということです。特定のものを指定したい場合は基本idですが、クラス名の後に[◯◯]で判別します。(配列と同じような感覚です)
もう一つの方法としては、

var hoges = document.getElementsByClassName("hoge");
hoges[0].textContent = "hogehoge";

のように、後から[◯◯]で指定する方法です。

まだ注意がある

全て選択して後から特定・・・という方法を紹介しましたが、じゃぁ全て選択する時は[◯◯]はいらないのか、そうではありません。実行できなくなります。
しかしjsにはおなじみfor文があるので、[]のなかをiにして全てを変更するという方法もあります。

やけに長くなってしまいましたが、まだまだ2つだけ。後編はあとで書こうと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした