ใน Html DOM ทั้ง id และ class เป็นตัวเลือกองค์ประกอบและใช้เพื่อระบุองค์ประกอบตามชื่อที่กำหนดให้กับพารามิเตอร์เหล่านี้
ต่อไปนี้เป็นข้อแตกต่างที่สำคัญระหว่าง Id และ Class
| ซีเนียร์ เลขที่ | คีย์ | รหัส | คลาส |
|---|---|---|---|
| 1 | ไวยากรณ์ | ใน Html สำหรับชื่อ ID องค์ประกอบเริ่มต้นด้วยสัญลักษณ์ “#” ตามด้วยชื่อที่ไม่ซ้ำที่กำหนดให้กับมัน | ในทางกลับกัน class ที่กำหนดให้กับองค์ประกอบนั้นมีชื่อขึ้นต้นด้วย “.” ตามด้วยชื่อคลาส |
| 2 | ตัวเลือก | แนบตัวเลือก ID กับองค์ประกอบได้เพียงตัวเดียวเท่านั้น | สามารถแนบตัวเลือกคลาสหลายตัวเข้ากับองค์ประกอบได้ |
| 3 | เอกลักษณ์ | รหัสไม่ซ้ำกันในหน้าและใช้ได้กับองค์ประกอบได้ไม่เกินหนึ่งองค์ประกอบเท่านั้น | คลาสนี้สามารถนำไปใช้กับหลายองค์ประกอบได้ ดังนั้นมันจึงสามารถทำได้หลายครั้งในหน้าเดียว |
ตัวอย่างรหัสเทียบกับคลาส
Id.html
<!DOCTYPE html>
<html>
<head>
<title>
Id demo
</title>
<style>
#idDemo{
color:green;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by Id</h1>
<p id="idDemo">Demo for Id selector</p>
</body>
</html> Class.html
<!DOCTYPE html>
<html>
<head>
<title>
Class demo
</title>
<style>
.classDemo{
color:orange;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by class</h1>
<p class="classDemo">Demo for class selector</p>
</body>
</html> 