JavaScript

parentElementで親要素を取得する【JavaScript】

この記事ではJavaScriptのparentElementで親要素を取得してみます。

簡単なデモ・サンプルコードも紹介します。

parentElementとは?使い方

parentElementはDOMノード上の親のElementを返します。

サンプルで紹介します。

サンプルコード

以下のようなHTMLの場合の<li id="about_a"><ul id="list">の親要素をparentElementで取得してみます。

<div id="block">
  <p>ミーティングの議題</p>
  <ul id="list">
    <li id="about_a">Aについて</li>
    <li>Bについて</li>
    <li>Cについて</li>
  </ul>
</div>
var about_a = document.getElementById('about_a');
console.log(about_a.parentElement);
// => <ul id="list">

var list = document.getElementById('list');
console.log(list.parentElement);

// =>  <div id="block">

以上のような結果となります。

parentElementを実際に使ってみる

それではparentElementを使って簡単なプログラムを作ってみましょう。

「銘柄コードを入力したら、該当の会社名と前日終値が表示される」という株価チェックのプログラムです。

デモ

サンプルコード

入力された数字が銘柄コードと一致すれば、parentElementを取得します。

更に、parentElementの始めの子要素と最後の子要素を取得し、表示するという仕組みです。

親要素をたどって子要素にアクセスしています。

function codeCheck() {
  var input_value = document.getElementById('code').value;
  var stock_id = document.getElementById(input_value);
  if (stock_id) {
    var parent = stock_id.parentElement;
    var company = parent.firstElementChild;
	var price = parent.lastElementChild;
	var company_text = company.textContent;
	var price_text = price.textContent;
    document.getElementById('output').innerHTML = company_text + "<br>" + price_text;
  } else {
    document.getElementById('output').innerHTML = '銘柄コードがありませんでした';  
  }
}
<div id="block">
  <p>株価チェック</p>
  <div>
    <p id="7203"><strong>トヨタ自動車</strong></p>
    <div>銘柄コード:7203</div>
    <div>前日終値:6,740</div> 
  </div>
  <div>
    <p id="9984"><strong>ソフトバンクグループ</strong></p>
    <div>銘柄コード:9984</div>
    <div>前日終値:10,600</div>
  </div>
  <div>
    <p id="9432"><strong>NTT</strong></p>
    <div>銘柄コード:9432</div>
    <div>前日終値:5,003</div>
  </div>
</div>

<input type="text" id="code" onchange="codeCheck()">

<div><span id="output"></span></div>


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5