getElementById ทำงานอย่างไรใน JavaScript

getElementById

getElementById() เป็น DOM Method คืนค่า Element ที่มี ID Attribute ตรงกับค่าที่ระบุ เป็นหนึ่งใน Method มากที่สุดใน HTML DOM ใช้เกือบทุกครั้งที่ต้องการจัดการ Element ใน Document เมธอดนี้คืนค่า Null หากไม่มี Element ด้วย ID ที่ระบุ ID ควร Unique ภายในหน้า แต่หากมีหลาย Element ด้วย ID เดียวกัน จะคืน Element ตัวสุดท้ายในโค้ด JavaScript

ตัวอย่างที่ 1

ในตัวอย่างนี้ มี Paragraph Tag ด้วย Inner Text "GetElementById" และ ID ชื่อ "element" ใช้ DOM Method "document.getElementById()" เข้าถึงข้อความใน Paragraph Tag และแสดงค่าใน Output โดยไม่มี ".innerHtml" document.getElementById จะอ่าน Inner Text ของ Tag ไม่ได้

<html> <body> <p id="element">GetElementById</p> <script> var s = document.getElementById("element").innerHTML; document.write(s); </script> </body> </html>

ผลลัพธ์

GetElementById GetElementById

ตัวอย่างที่ 2

ในตัวอย่างนี้ ใช้ DOM Method "getElementById" แทนที่ข้อความเดิม "GetElementById" ด้วย "Tutorix" และแสดงผลลัพธ์

<html> <body> <p id="element">GetElementById</p> <script>    document.getElementById("element").innerHTML = "Tutorix"; </script> </body> </html>

ผลลัพธ์

Tutorix