JavaScriptで先祖要素を取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで先祖要素を取得する方法について解説しています。ある要素の上位の要素である先祖要素を取得するにはclosest()メソッドを使用します。基本の書き方、実際の使用例を見ていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptで先祖要素を取得する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

先祖要素を取得する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

先祖要素とは

先祖要素とは、対象の要素の上位の要素のことを示します。一つ上の要素のことは特別に親要素ということもありますので、注意してください。

<html>

  <head></head>

  <body>

    <div></div>

  </body>

</html>

となった場合、<div>から見て<body><html>が先祖要素になり、<body>は親要素と特別に呼ぶこともあります。

 

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

先祖要素を取得する方法

先祖要素を求めるには、「closest()」を使います。使い方は簡単で

element.closest(selector);

とします。引数の「selector」にはid名やclass名やタグ名などで指定します。

 

実際に取得してみよう

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title>closest JavaScript</title>

</had>

<body>

  <div id="sosen">

    <div id="oya">

      <div id="ko"></div>

    </div>

  </div>

  <script type="text/javascript">

    var ko = document.getElementById("ko");

    console.log(ko.closest("#oya"));

    console.log(ko.closest("#sosen"));

    console.log(ko.closest("html"));

  </script>

  </body>

</html>

 

まとめ

先祖要素はこのように取得できます。今後の作業に役立ててください。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。