HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのlastElementChildプロパティとは？使い方とサンプルコードを解説

HTML DOMのlastElementChildプロパティは、指定したノードにおける最後の子要素ノードを、ノードオブジェクトとして取得するためのプロパティです。

注意：このプロパティはテキストノードやコメントノードを無視し、要素ノードのみを対象とします。そのため、lastChildプロパティとは異なり、空白文字によるテキストノードが存在しても正しく最後の要素を取得できるのが特徴です。

構文

lastElementChildプロパティの構文は以下の通りです。

nodeList.lastElementChild

戻り値として、指定した親ノードの直下にある最後の子要素ノードが返されます。子要素が1つも存在しない場合はnullが返ります。

使用例

ここでは、HTML DOMのlastElementChildプロパティを使った具体的な例を見ていきましょう。以下のサンプルでは、曜日のリストから最後の子要素（日曜日）を取得して画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM lastElementChild</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    ul{
        width: 30%;
        margin: 0 auto;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-lastElementChild</legend>
<h3>Grocery Store</h3>
<ul id="dayList">
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
<input type="button" onclick="getTimmings()" value="Get Sale Day">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var dayList = document.getElementById("dayList");
    function getTimmings() {
        divDisplay.textContent = 'Sale on last day of week: '+dayList.lastElementChild.textContent;
    }
</script>
</body>
</html>

コードのポイント

このサンプルでは、<ul id="dayList">内に月曜日から日曜日までの7つの<li>要素が並んでいます。getTimmings()関数が呼び出されると、dayList.lastElementChildによってリストの最後の要素である「Sunday」の<li>ノードが取得され、さらにtextContentでそのテキスト内容を取り出しています。

出力結果

このコードを実行すると、以下のような表示になります。

「Get Sale Day」ボタンをクリックする前：

HTML DOMのlastElementChildプロパティとは？使い方とサンプルコードを解説

「Get Sale Day」ボタンをクリックした後：

HTML DOMのlastElementChildプロパティとは？使い方とサンプルコードを解説

ボタンをクリックすると、「Sale on last day of week: Sunday」という文字列が表示され、リストの最後の子要素が正しく取得できたことが確認できます。

  1. HTML DOMのnextElementSiblingプロパティとは？使い方とサンプルコードを解説

    nextElementSiblingプロパティとは HTML DOMのnextElementSiblingプロパティは、指定した要素ノードの直後に隣接している要素ノード（次の兄弟要素）を返します。 注意：このプロパティは、テキストノードやコメントノードを無視し、要素ノードのみを対象とします。HTMLソース内の空白や改行によるテキストノードの影響を受けずに、確実に次の要素を取得できるのが特徴です。なお、次の兄弟要素が存在しない場合は null が返されます。 構文 nextElementSiblingノードを取得するための構文は以下の通りです。 nodeList.nextElementSibl

  2. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ