วิธี HTML DOM Document getElementById()

คำอธิบายและวิธีใช้

getElementById() วิธีคืนค่าองค์ประกอบที่มี id ที่กำหนด

ถ้าองค์ประกอบไม่มีอยู่getElementById() วิธีจะคืนค่า null

getElementById() วิธีเป็นหนึ่งในวิธีที่ใช้งานมากที่สุดใน HTML DOM พวกเรา。เ儿เราใช้มันเกือบทุกครั้งที่เราต้องการอ่านหรือแก้ไของตัวองค์ประกอบ HTML。

คำเตือน

ทุก id ควรเป็นเดียวกัน แต่:

ถ้ามีสองหรือมากกว่าองค์ประกอบที่มี id ที่เหมือนกัน getElementById() คืนค่าองค์ประกอบแรก

ดูเพิ่มเติม:

getElementsByTagName() วิธี

getElementsByClassName() วิธี

querySelector() วิธี

querySelectorAll() วิธี

ตัวอย่าง

ตัวอย่าง 1

เรียกข้อมูลองค์ประกอบที่มี id ที่กำหนด:

document.getElementById("demo");

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

เรียกข้อมูลองค์ประกอบและเปลี่ยนสีของมัน:

const myElement = document.getElementById("demo");
myElement.style.color = "red";

ลองทดลองด้วยตัวเอง

ตัวอย่าง 3

หรือเพียงแค่เปลี่ยนสีของมัน:

document.getElementById("demo").style.color = "red";

ลองทดลองด้วยตัวเอง

ภาษาบอร์เดอร์

document.getElementById(elementId)

ค่าเป้าหมาย

ค่าเป้าหมาย การอธิบาย
elementId จำเป็น

ค่าที่กลับมา

รูปแบบ การอธิบาย
เป้าหมาย

สมาชิกที่มีคุณสมบัติ id ที่ระบุ

ถ้าไม่หากเจอกลับมาเป็น null。

รายละเอียดเทคนิค

getElementById() วิธีนี้เป็นวิธีที่มีความน่านึกขึ้นและต่อตัวเอง เพราะมันมีวิธีที่ง่ายสำหรับใช้โครงสร้าง Element ที่แสดงโครงสร้างของเอกสารที่ระบุ

วิธีนี้จะหาคุณสมบัติ id มูลค่า elementId ถ้าไม่หากเจอสมาชิก Element ที่ระบุนั้น มันจะกลับ nullมูลค่าของ id ในเอกสารเป็นสิ่งเดียวๆ ถ้าวิธีนี้หากตามได้สมาชิก Element ที่มีคุณสมบัติที่ระบุนั้น มันจะกลับมัน elementId ของ Element ของโครงสร้าง มันจะเรียกกลับโครงสร้าง Element อย่างสุ่มๆ หรือมันจะกลับ null

เตือน:ชื่อของวิธีนี้เริ่มด้วย Id ที่สิ้นสุด ไม่ใช้ IDใช้คำว่า

ในเอกสาร HTML วิธีนี้จะดูเฉพาะสมาชิกที่มีคุณสมบัติ id ที่ระบุ HTMLDocument.getElementByName() วิธีนี้จะค้นหาสมาชิกที่มีคุณสมบัติ name ในมูลค่าของมัน

ในเอกสาร XML วิธีนี้จะถูกใช้ด้วยคุณสมบัติ id ของแนวที่หนึ่งบางประการที่ไม่ได้ระบุชื่อของมัน ถ้าคุณสมบัติ XML ที่มีชื่อที่ไม่รู้ (เช่น XML ปัญหาได้รับหรือไม่สามารถหา DTD ของเอกสารได้) วิธีนี้จะเรียกกลับมาเสมอ nullใน JavaScript ลูกค้างานนี้ วิธีนี้ไม่ได้ถูกใช้บ่อยกับเอกสาร XML โดยเทียบกับนั้น ๆ จริงๆgetElementById() วิธีนี้เดิมถูกได้รับการเรียกชื่อว่าสมาชิกหนึ่งของสมาชิก HTMLDocument แต่ต่อมาถูกย้ายเข้าสู่สมาชิก Document ใน DOM รุ่นที่ 2。

การสนับสนุนบราวเซอร์

document.getElementById() เป็นคุณสมบัติ DOM Level 2 (2001)。

ทุกบราวเซอร์ทุกๆแบบที่สนับสนุนมัน:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
การสนับสนุน 9-11 การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน

หน้าที่เกี่ยวข้อง

ความรู้ CSS:สyntax ของ CSS

คู่มือ CSS ระบุ:เลือกตัวแปร #id ของ CSS

คู่มือ HTML DOM ระบุ:ระบุ id ของ HTML DOM

คู่มือ HTML DOM ระบุ:ตัวแปร HTML DOM Style