Die DOM-Eigenschaft lastChild wird verwendet, um das letzte untergeordnete Element des angegebenen Nodes zurückzugeben. Es gibt die letzten untergeordneten Node als Text-, Kommentar- oder Elementknoten zurück (je nachdem, was zuletzt auftritt). Es ist eine schreibgeschützte Eigenschaft.

Syntax:

node.lastChild

Rückgabewert: Es gibt ein Nodeobjekt zurück, das das letzte untergeordnete Element des Nodes darstellt, und null, wenn es keine untergeordneten Elemente gibt.

Beispiel 1:

<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM lastChild Property
        </title>
          
        <script>
            function geek() {
                var doc = 
                document.getElementById("div").lastChild.innerHTML;
                  
                document.getElementById("p").innerHTML = doc;
                document.getElementById("p").style.color = "white";
                document.getElementById("p").style.background = "green";
            }
        </script>
    </head>
      
    <body style = "text-align: center;">
          
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            DOM lastChild Property
        </h2>
          
        <div id = "div">
        <span>GeeksforGeeks! </span>
        <span>
            A computer science portal for geeks.
        </span></div>
        <br>
        <button onclick="geek()">Click me!</button>
          
        <p id="p"></p>
    </body>
</html>                    

Ausgabe:
Vor Klick auf die Schaltfläche:
lastChild
Nach Klick auf die Schaltfläche:
lasChild

Beispiel 2:

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML DOM lastChild Property
        </title>
          
        <script>
            function Geeks() {
                var x = 
                document.getElementById("sel").lastChild.text;
                  
                document.getElementById("p").innerHTML 
                        = "Last child: " + x;
            }
        </script>
    </head>
      
    <body style = "text-align: center;">
          
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            DOM lastChild Property
        </h2>
          
        <select id = "sel" size = "3">
            <option>Merge sort</option>
            <option>Quick sort</option>
            <option>Insertion sort</option></select>
        <br><br>
          
        <button onclick = "Geeks()">
            Click Here!
        </button>
          
        <p id="p"></p>
    </body>
</html>                    

Ausgabe:
Vor dem Klicken auf die Schaltfläche:
lastChild
Nach dem Klicken auf die Schaltfläche:
lasChild
Unterstützte Browser: Die von der lastChild-Eigenschaft unterstützten Browser sind unten aufgeführt:

  • Google Chrome
  • Internet Explorer
  • Feuerfuchs
  • Oper
  • Safari