JavaScriptのdocument.allの代替手段を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのdocument.allの代替手段について現役エンジニアが解説しています。document.allはIE専用のメソッドのため、FireFoxやChromeブラウザでも使えるgetElementsByTagNameメソッドを代わりに使います。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのdocument.allの代替手段について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのdocument.allの代替手段について詳しく説明していくね!

大石ゆかり

お願いします!

 

document.allとは

document.all()プロパティは、HTML内のすべての要素を取得したり検索することができるメソッドになります。しかし、document.all()プロパティはIE独自のプロパティかつIE6以下でしか使用できません。

IE7以上、もしくはChromeやFirefoxのような別ブラウザでHTML内のすべての要素の取得・検索を行うには別の方法が必要です。

document.allの代替手段

document.allプロパティの代替案として、document.getElementsByTagName(Name)メソッドを使用して各要素にアクセスすることができます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

getElementsByTagNameメソッドの使い方

document.getElementsByTagName(Name)は(Name)部分に要素の名前を指定し、指定した要素の数や内容などを取得することができます。

https://www.google.com/ のページでdiv要素を検索すると113要素見つけることができます。

document.getElementsByTagName('div')
// HTMLCollection(113) ・・・

そしてdocument.all()の代替として使用するためには、引数にアスタリスク(*)を指定します。document.getElementsByTagName(“*”)とすることですべての要素名の要素を取得することとなり、HTML内すべての要素を取得することと同義になります。

document.getElementsByTagName("*")
HTMLCollection(252) [html, head, meta, meta, meta, meta, meta, meta, title, script, script, style, script, body#gsr.hp.vasq.big, style, style#gstyle ・・・

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。