องค์ประกอบ HTML ที่แตกต่างกันหลายรายการสามารถมี ID เดียวกันได้หรือไม่หากพวกเขามีองค์ประกอบที่แตกต่างกัน

สถานการณ์เช่นนี้ใช้ได้หรือไม่:

div#foo
span#foo
a#foo

เลขที่

รหัสองค์ประกอบควรไม่ซ้ำกันในเอกสารทั้งหมด

ฉันคิดว่ามีความแตกต่างระหว่างสิ่งที่ควรเป็นเอกลักษณ์หรือต้องไม่ซ้ำกัน (เช่นบังคับใช้โดยเว็บเบราว์เซอร์)

รหัสควรจะไม่ซ้ำกัน? ใช่.

รหัสต้องไม่ซ้ำกันหรือไม่ ไม่อย่างน้อย IE และ FireFox อนุญาตให้องค์ประกอบหลายรายการมี ID เดียวกัน

องค์ประกอบหลายรายการสามารถมี ID เดียวกันได้หรือไม่

ใช่ - ไม่ว่าจะเป็นแท็กเดียวกันหรือไม่เบราว์เซอร์จะแสดงหน้าแม้ว่าองค์ประกอบหลายรายการจะมี ID เดียวกัน

มันถูกต้อง HTML?

ฉบับนี้ยังคงเป็นจริงเป็นของHTML 5.1 สเปค อย่างไรก็ตามสเป็คยังกล่าวว่าgetElementById จะต้องส่งคืนองค์ประกอบแรกที่มี ID ที่กำหนดทำให้พฤติกรรมไม่ได้กำหนดในกรณีของเอกสารที่ไม่ถูกต้อง

HTML ที่ไม่ถูกต้องชนิดนี้มีผลอย่างไร

มากที่สุด (ถ้าไม่ทั้งหมด) เบราว์เซอร์ได้เลือกและยังคงไม่getElementByIdเลือกองค์ประกอบแรกที่มีรหัสที่กำหนดเมื่อโทร ไลบรารีส่วนใหญ่ที่ค้นหาองค์ประกอบด้วย ID สืบทอดพฤติกรรมนี้ เบราว์เซอร์ส่วนใหญ่ (ถ้าไม่ใช่ทั้งหมด) จะใช้สไตล์ที่กำหนดโดยตัวเลือกรหัส (เช่น#myid) กับองค์ประกอบทั้งหมดที่มี ID ที่ระบุ หากนี่คือสิ่งที่คุณคาดหวังและตั้งใจทำก็จะไม่มีผลกระทบที่ไม่ตั้งใจ หากคุณคาดหวัง / ตั้งใจอย่างอื่น (เช่นสำหรับองค์ประกอบทั้งหมดที่มี ID นั้นจะถูกส่งคืนหรือสำหรับสไตล์ที่จะใช้กับองค์ประกอบเดียวเท่านั้น) ดังนั้นความคาดหวังของคุณจะไม่ได้รับการตอบสนองและคุณลักษณะใด ๆ ที่พึ่งพาความคาดหวังเหล่านั้นจะล้มเหลว

บางห้องสมุดจาวาสคริปต์จะมีความคาดหวังที่ไม่ได้พบกันเมื่อหลายองค์ประกอบที่มี ID เดียวกัน (ดูความคิดเห็น wootscootinboogie ของเกี่ยวกับ d3.js)

ข้อสรุป

เป็นการดีที่สุดที่จะยึดตามมาตรฐาน แต่ถ้าคุณรู้ว่ารหัสของคุณทำงานตามที่คาดไว้ในสภาพแวดล้อมปัจจุบันของคุณและรหัสเหล่านี้ถูกใช้ในวิธีที่คาดเดาได้ / บำรุงรักษาได้มีเพียง 2 เหตุผลที่ไม่ควรทำเช่นนี้:

1. เพื่อหลีกเลี่ยงโอกาสที่คุณจะผิดและหนึ่งในห้องสมุดที่คุณใช้จริง ๆจะทำงานผิดปกติเมื่อองค์ประกอบหลายรายการมี ID เดียวกัน
2. เพื่อรักษาความเข้ากันได้ของเว็บไซต์ / แอปพลิเคชันของคุณกับห้องสมุดหรือบริการ (หรือนักพัฒนา!) คุณอาจพบในอนาคตซึ่งจะทำงานผิดปกติเมื่อองค์ประกอบหลายรายการมี ID เดียวกัน - ซึ่งเป็นไปได้ที่สมเหตุสมผลเนื่องจากไม่ใช่เทคนิค HTML

พลังเป็นของคุณ!

แม้ว่าองค์ประกอบที่มีประเภทแตกต่างกันก็สามารถทำให้คุณมีปัญหาร้ายแรงบางอย่าง ...

สมมติว่าคุณมี 3 ปุ่มด้วยรหัสเดียวกัน:

<button id="myid" data-mydata="this is button 1">button 1</button>
<button id="myid" data-mydata="this is button 2">button 2</button>
<button id="myid" data-mydata="this is button 3">button 3</button>

ตอนนี้คุณตั้งค่าjQueryรหัสเพื่อทำบางสิ่งเมื่อmyidคลิกปุ่ม:

$(document).ready(function ()
{
    $("#myid").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interestingFunction();

        $('form').trigger('submit');
    });
});

คุณคาดหวังอะไร ทุกปุ่มที่คลิกจะดำเนินการตั้งค่าตัวจัดการเหตุการณ์การคลิกด้วย jQuery น่าเสียดายที่มันไม่เกิดขึ้น ปุ่มแรกเท่านั้นที่เรียกตัวจัดการการคลิก อีก 2 เมื่อคลิกทำอะไร มันเหมือนกับว่าพวกเขาไม่มีปุ่มเลย!

จึงมักแตกต่างกันกำหนดIDsเพื่อHTMLองค์ประกอบ สิ่งนี้จะทำให้คุณได้รับการปกป้องจากสิ่งแปลก ๆ :)

<button id="button1" class="mybtn" data-mydata="this is button 1">button 1</button>
<button id="button2" class="mybtn" data-mydata="this is button 2">button 2</button>
<button id="button3" class="mybtn" data-mydata="this is button 3">button 3</button>

ตอนนี้ถ้าคุณต้องการให้ตัวจัดการเหตุการณ์การคลิกทำงานเมื่อมีการคลิกปุ่มใด ๆ มันจะทำงานได้อย่างสมบูรณ์หากคุณเปลี่ยนตัวเลือกในรหัส jQuery เพื่อใช้CSSคลาสที่ใช้กับพวกเขาเช่นนี้:

$(document).ready(function ()
{
    $(".mybtn").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interstingFunction();

        $('form').trigger('submit');
    });
});

องค์ประกอบที่สองที่มีรหัสเดียวกันไม่ถูกต้อง ID นั้นไม่เหมือนใครถ้าคุณต้องการทำสิ่งนั้นให้ใช้คลาส อย่าลืมว่าองค์ประกอบต่างๆสามารถมีหลายคลาสได้โดยใช้ช่องว่างเป็นเดลิมิเตอร์:

<div class="myclass sexy"></div>

ข้อมูลจำเพาะอย่างเป็นทางการสำหรับ HTML ระบุว่าแท็ก id ต้องไม่ซ้ำกันและข้อกำหนดอย่างเป็นทางการยังระบุด้วยว่าหากการเรนเดอร์สามารถทำให้สมบูรณ์ได้นั้นจะต้อง (เช่นไม่มี "ข้อผิดพลาด" ใน HTML เฉพาะ "HTML" ที่ไม่ถูกต้อง) ดังนั้นต่อไปนี้เป็นวิธีการที่แท็ก ID ทำงานจริงในทางปฏิบัติ พวกเขาทั้งหมดไม่ถูกต้องแต่ยังคงทำงาน:

นี้:

<div id="unique">One</div>
<div id="unique">Two</div>

แสดงผลได้ดีในทุกเบราว์เซอร์ อย่างไรก็ตาม document.getElementById จะส่งคืนวัตถุเท่านั้นไม่ใช่อาร์เรย์ คุณจะสามารถเลือก div แรกผ่านแท็ก id เท่านั้น หากคุณต้องเปลี่ยนรหัสของ div แรกโดยใช้ JavaScript รหัสที่สองจะสามารถเข้าถึงได้ด้วย document.getElementById (ทดสอบบน Chrome, FireFox & IE11) คุณยังสามารถเลือก div โดยใช้วิธีการเลือกอื่น ๆ และคุณสมบัติ id จะถูกส่งคืนอย่างถูกต้อง

โปรดทราบว่าปัญหาดังกล่าวข้างต้นเปิดช่องโหว่ด้านความปลอดภัยที่อาจเกิดขึ้นในเว็บไซต์ที่แสดงภาพ SVG เนื่องจาก SVG ได้รับอนุญาตให้มีองค์ประกอบ DOM และแท็ก id อยู่ด้วย (อนุญาตให้เปลี่ยนเส้นทาง DOM สคริปต์ผ่านรูปภาพที่อัปโหลด) ตราบใดที่ SVG อยู่ในตำแหน่ง DOM ก่อนองค์ประกอบจะถูกแทนที่รูปภาพจะได้รับเหตุการณ์ JavaScript ทั้งหมดที่มีความหมายสำหรับองค์ประกอบอื่น ๆ

ปัญหานี้ไม่ได้อยู่ในเรดาร์ของใครก็ตามเท่าที่ฉันรู้ แต่มันเป็นเรื่องจริง

นี้:

<div id="unique" id="unique-also">One</div>

แสดงผลได้ดีในทุกเบราว์เซอร์ แต่เพียงครั้งแรก IDคุณกำหนดด้วยวิธีนี้หากคุณลองใช้ document.getElementById ('unique-also'); ในตัวอย่างข้างต้นคุณจะได้รับคืนเป็นโมฆะ (ทดสอบบน Chrome, FireFox & IE11)

นี้:

<div id="unique unique-two">Two</div>

แสดงผลได้ดีในทุกเบราว์เซอร์อย่างไรก็ตามไม่เหมือนกับแท็กคลาสที่สามารถคั่นด้วยช่องว่างได้แท็ก id อนุญาตให้มีช่องว่างดังนั้นรหัสขององค์ประกอบด้านบนจึงเป็น "เอกลักษณ์ไม่ซ้ำกันสองประการ" และขอ dom สำหรับ "เฉพาะ" หรือการแยกแบบ "unique-two" จะให้ค่า Null เป็นโมฆะยกเว้นว่ามีการกำหนดไว้ที่อื่นใน DOM (ทดสอบกับ Chrome, FireFox & IE11)

คำตอบ SLaks นั้นถูกต้อง แต่เป็นภาคผนวกโปรดทราบว่ารายละเอียด x / html ระบุว่ารหัสทั้งหมดจะต้องไม่ซ้ำกันภายในเอกสาร html (เดียว)เอกสาร แม้ว่ามันจะไม่ตรงกับที่ op ถาม แต่อาจมีอินสแตนซ์ที่ถูกต้องที่มี id เดียวกันแนบมากับเอนทิตีที่แตกต่างกันในหลาย ๆ หน้า

ตัวอย่าง:

(เสิร์ฟกับเบราว์เซอร์รุ่นใหม่) บทความ # main-content { styled one way }
(เสิร์ฟกับ legacy) div # main-content { เรียกอีกแบบหนึ่ง }

อาจเป็น Antipattern แม้ว่า เพิ่งออกจากที่นี่เป็นจุดสนับสนุนของปีศาจ

และสิ่งที่มีค่าสำหรับ Chrome 26.0.1410.65, Firefox 19.0.2 และ Safari 6.0.3 อย่างน้อยถ้าคุณมีองค์ประกอบหลายอย่างที่มี ID เดียวกันตัวเลือก jquery (อย่างน้อย) จะส่งคืนองค์ประกอบแรกด้วย ID นั้น

เช่น

<div id="one">first text for one</div>
<div id="one">second text for one</div>

และ

alert($('#one').size());

ดูhttp://jsfiddle.net/RuysX/สำหรับการทดสอบ

ด้วยการใช้เครื่องมือตรวจสอบ HTML ที่ w3.orgเฉพาะกับ HTML5 รหัสจะต้องไม่ซ้ำกัน

พิจารณาสิ่งต่อไปนี้ ...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">Barry</div>
        <div id="x">was</div>
        <div id="x">here</div>
    </body>
</html>

เครื่องมือตรวจสอบตอบกลับด้วย ...

Line 9, Column 14: Duplicate ID x.      <div id="x">was</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>
Error Line 10, Column 14: Duplicate ID x.       <div id="x">here</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>

... แต่ OP ระบุไว้เป็นพิเศษ - แล้วมีองค์ประกอบประเภทต่างๆ ลองพิจารณา HTML ต่อไปนี้ ...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">barry
            <span id="x">was here</span>
        </div>
    </body>
</html>

... ผลลัพธ์จากตัวตรวจสอบความถูกต้องคือ ...

Line 9, Column 16: Duplicate ID x.          <span id="x">was here</span>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">barry

สรุป:

ในทั้งสองกรณี (ประเภทองค์ประกอบเดียวกันหรือประเภทองค์ประกอบอื่น) หากใช้รหัสมากกว่าหนึ่งครั้งจะไม่ถือว่าเป็น HTML5 ที่ถูกต้อง

เราสามารถใช้ชื่อคลาสแทนการใช้ id รหัส html ควรไม่ซ้ำกัน แต่คลาสไม่ได้ เมื่อดึงข้อมูลโดยใช้ชื่อคลาสสามารถลดจำนวนบรรทัดโค้ดในไฟล์ js ของคุณ

$(document).ready(function ()
{
    $(".class_name").click(function ()
    {
        //code
    });
});

ฉันคิดว่าคุณไม่สามารถทำได้เพราะรหัสนั้นไม่เหมือนใครคุณต้องใช้มันกับองค์ประกอบเดียว คุณสามารถใช้คลาสเพื่อวัตถุประสงค์

<div id="one">first text for one</div>
<div id="one">second text for one</div>

var ids = document.getElementById('one');

รหัสมีองค์ประกอบ div แรกเท่านั้น ดังนั้นแม้ว่าจะมีหลายองค์ประกอบที่มี id เดียวกันวัตถุเอกสารจะส่งคืนการจับคู่ครั้งแรกเท่านั้น

ไม่ต้องมี ID คุณสามารถใช้คลาสเพื่อจุดประสงค์นั้นได้

<div class="a" /><div class="a b" /><span class="a" />

div.a {font: ...;}
/* or just: */
.a {prop: value;}

เป็นไปได้หรือไม่ที่จะมีนักเรียนมากกว่าหนึ่งคนในชั้นเรียนที่มีหมายเลข Roll / Id เดียวกัน ในidแอตทริบิวต์HTML เป็นเช่นนั้น คุณอาจใช้คลาสเดียวกันสำหรับพวกเขา เช่น:

<div class="a b c"></div>
<div class="a b c d"></div>

และอื่น ๆ

โดยปกติจะเป็นการดีกว่าที่จะไม่ใช้ ID เดียวกันหลายครั้งในหน้า html แม้ว่าจะเป็นไปได้ที่จะใช้ ID เดียวกันหลาย ๆ ครั้งในหน้าเว็บ อย่างไรก็ตามเมื่อคุณใช้ ID เป็นส่วนหนึ่งของ URI / URL ดังต่อไปนี้:

https://en.wikipedia.org/wiki/FIFA_World_Cup#2015_FIFA_corruption_case

และถ้าใช้ ID ('2015_FIFA_corruption_case') สำหรับองค์ประกอบหนึ่ง (ช่วง) ในหน้าเว็บ:

<span class="mw-headline" id="2015_FIFA_corruption_case">2015 FIFA corruption case</span>

จะไม่มีปัญหา ในทางตรงกันข้าม ID เดียวกันมีอยู่มากกว่าหนึ่งแห่งเบราว์เซอร์จะสับสน

ใช่พวกเขาสามารถ

ฉันไม่รู้ว่าสิ่งเหล่านี้ anwers ล้าสมัย แต่เพียงแค่เปิด youtube และตรวจสอบ html ลองตรวจสอบวิดีโอที่แนะนำคุณจะเห็นว่าพวกเขาทั้งหมดมีรหัสเดียวกันและโครงสร้างการทำซ้ำดังนี้:

<span id="video-title" class="style-scope ytd-compact-radio-renderer" title="Mix - LARA TACTICAL">