JavaScriptのクリックについて

HTML
1<body>
2  <a id="the_link" href="http://google.com">google</a>
3</body>

これに対して、コンソールから

JavaScript
1(function() {let a = document.getElementById("the_link"); a.click();}());

だとちゃんとクリックされるのですが、

HTML
1<a class="the_link" href="http://google.com">google</a>

<a>をidからclassに変えて

JavaScript
1(function() {let a = document.getElementsByClassName("the_link"); a.click();}());

だとエラーになるのですが、なぜでしょうか？

行動規範の内容に同意します

回答4件

正解は Udomomo さんが既に書いていますが、こういう失敗を起こさない為の tips を。
HTMLElement から生えるノード抽出用のメソッドは getElementByXXX (sない)か getElementsByXXX か(sある)で単数か複数か見分けられます。

投稿2018/01/26 01:45

mattn

総合スコア5030

ベストアンサー

getElementsByClassNameは、特定の要素ではなく、配列ライクのオブジェクト(HTMLCollection)を返すからです。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

これは、HTMLにおいてidが各要素固有の値を指定するのに対し、classは関連性のある複数の要素に同じ値を指定するものだと想定されているためです。そうすることで、CSSでclassの値を指定し、複数の要素に同じスタイルを一括で適用できます。

投稿2018/01/26 01:27

編集2018/01/26 01:54

Udomomo

総合スコア1524

HTMLCollectionを返すかについては他の回答者様が仰っておられる通りなので、おまけとして。

querySelectorでelementオブジェクト一つ、querySelectorAllでNodeList(配列ライク)をそれぞれ得られることも、知っておくとなにかと使えると思います。

js
1(function() {let a = document.querySelector(".the_link"); a.click();}());

参考 : querySelector CSSセレクタで要素を取得 | JavaScript中級編

ちなみにですが、検証はしていませんがこれらのメソッドはgetElement(s)ByXXX系のメソッドと比べると若干遅いそうです。まぁ大した影響はないと思います。

投稿2018/01/26 02:46

namnium1125

総合スコア2043

アンカーだとページが遷移してしまうのでボタンを使ったテスト
querySelectorAllで得られるNodeListと
getElementsByClassNameで得られるHTMLCollectionを
それぞれにtriggerという関数を拡張します

javascript
1[NodeList,HTMLCollection].forEach(function(x){
2  x.prototype.trigger=function(eventStr){
3    Array.prototype.map.call(this,function(ele){
4      if (document.createEvent) {
5        var e = document.createEvent("HTMLEvents");
6        e.initEvent(eventStr, true, true );
7      return ele.dispatchEvent(e);
8      } else {
9        var e = document.createEventObject();
10        return ele.fireEvent("on"+eventStr, e);
11      }
12    });
13  };
14});
15window.addEventListener('DOMContentLoaded', function(e){
16  document.querySelectorAll('.hoge').trigger('click');
17  document.getElementsByClassName('hoge').trigger('click');
18});

※ページロード時に、それぞれクリックを実行します。

HTML
1<input type="button" onclick="console.log(1)" class="hoge" value="1">
2<input type="button" onclick="console.log(2)" class="hoge" value="2">
3<input type="button" onclick="console.log(3)" class="hoge" value="3">

投稿2018/01/26 03:26

編集2018/01/26 03:29