JavaScriptのdocumentオブジェクトのメソッド一覧と使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのdocumentオブジェクトのメソッド一覧と使い方について解説しています。HTMLドキュメントの操作に使用されるdocumentオブジェクトの各メソッドとそれぞれの役割、基本の使い方について学びましょう。

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

JavaScriptのdocumentオブジェクトのメソッド一覧と使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

documentオブジェクトのメソッド一覧と使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

documentオブジェクトとは

JavaScriptのdocumentオブジェクトは、HTMLドキュメントを表現するオブジェクトです。

 

documentオブジェクトのメソッド一覧

 メソッド  説明
 close  前にdocument.open()で開いた出力ストリームを閉じる。
 createElement  新たに要素を生成する。
 createEvent Event  オブジェクトを作成する。
 createTextNode  新たにテキストノードを作成する。
 getElementById  ID(id属性の値)から要素を取得する。
 getElementsByClassName クラス名(class属性)から要素群を取得
 getElementsByName  名前(name属性)から要素群を取得
 getElementsByTagName  タグ名から要素群を取得
 open  新しい文書を開く
 write  文字列を出力
 writeln  文字列と改行を出力

 

 

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

documentオブジェクトのメソッドの使い方

document.open()

document.close()

document.createElement()

document.createEvent()

document.createTextNode()

// 書きこむ文書を開きます。

document.open();

// 文書を閉じます。

document.close();

// 新しい div 要素を作成します
var newDiv = document.createElement("div");

// 新しいchangeイベントを作成します

var event = document.createEvent('change');

// 新しい文書を作成します

var newtext = document.createTextNode('新しいテキスト');

// ブラウザに文字列を出力します

document.write("改行なしの文字列");

// ブラウザに文字列を出力します

// 文字列の末尾に自動的に改行が付きます

document.writeln("改行付きの文字列");

// 指定したID値の要素を取得する

document.getElementById("test");

// 指定したClass属性の要素を取得する

document.getElementsByClassName("testclass")

// 指定したName属性の要素を取得する

document.getElementsByName("testname")

// 指定したタグの要素を取得する

document.getElementsByTagName("div")

 

まとめ

documentオブジェクトはメソッドもプロパティも非常に出番の多いオブジェクトです。各メソッドの特性を理解して効率よく利用していきましょう。

 

監修してくれたメンター

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

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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