この記事では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>