Hai phần tử HTML có cùng thuộc tính id: Nó thực sự tệ đến mức nào?

Chỉ cần duyệt mã nguồn google maps. Trong tiêu đề của họ, họ có 2 div với id = "search" cái này chứa cái kia và cũng có thuộc tính jstrack = "1". Có một hình thức phân tách chúng như vậy:

<div id="search" jstrack="1">
    <form action="/maps" id="...rest isn't important">
        ...
        <div id="search">...

Vì đây là google, tôi cho rằng nó không phải là một sai lầm.

Vì vậy, làm thế nào xấu thực sự có thể vi phạm quy tắc này? Miễn là bạn cẩn thận trong việc lựa chọn css và dom, tại sao không sử dụng lại các lớp giống như id? Có ai làm điều này trên mục đích, và nếu vậy, tại sao?

Thông số kỹ thuật cho biết ĐỘC ĐÁO

Đặc tả HTML 4.01 cho biết ID phải là tài liệu duy nhất trên toàn tài liệu.

Đặc tả HTML 5 nói điều tương tự nhưng nói cách khác. Nó nói rằng ID phải là duy nhất trong cây con nhà của nó , về cơ bản là tài liệu nếu chúng ta đọc định nghĩa của nó .

Tránh trùng lắp

Nhưng vì trình kết xuất HTML rất dễ tha thứ khi kết xuất HTML nên họ cho phép các ID trùng lặp. Điều này nên tránh nếu có thể và tuyệt đối tránh khi lập trình truy cập các phần tử bằng ID trong JavaScript. Tôi không chắc getElementByIdhàm nào sẽ trả về khi tìm thấy một số phần tử phù hợp? Nên nó:

• trả lại một lỗi?
• trả lại yếu tố phù hợp đầu tiên?
• trả lại yếu tố phù hợp cuối cùng?
• trả về một tập hợp các yếu tố phù hợp?
• Trả lại cái gì?

Nhưng ngay cả khi các trình duyệt hoạt động đáng tin cậy trong những ngày này, không ai có thể đảm bảo hành vi này trong tương lai vì điều này trái với đặc điểm kỹ thuật. Đó là lý do tại sao tôi khuyên bạn không bao giờ trùng lặp ID trong cùng một tài liệu.

Bạn hỏi "thật tệ". Vì vậy, để xác thịt trả lời @ RobertKoritnik (hoàn toàn chính xác) một chút ...

Mã đó không chính xác. Không chính xác không có màu xám. Mã này vi phạm tiêu chuẩn và do đó không chính xác. Nó sẽ không kiểm tra xác nhận, và nó nên.

Điều đó nói rằng, không có trình duyệt hiện tại trên thị trường sẽ phàn nàn về nó, hoặc có bất kỳ vấn đề với nó. Các trình duyệt sẽ có quyền khiếu nại về vấn đề này, nhưng không có phiên bản hiện tại nào trong số chúng hiện đang làm. Điều đó không có nghĩa là các phiên bản trong tương lai có thể không đối xử tệ với mã này.

Hành vi của bạn khi cố gắng sử dụng ID đó làm công cụ chọn, trong css hoặc javascript, là không thể chấp nhận được và có thể thay đổi tùy theo trình duyệt. Tôi cho rằng một nghiên cứu có thể được thực hiện để xem mỗi trình duyệt phản ứng với điều đó như thế nào. Tôi nghĩ trong trường hợp tốt nhất, nó sẽ coi nó giống như "class =" và chọn danh sách của chúng. (Tuy nhiên, điều đó có thể gây nhầm lẫn cho các thư viện JavaScript - nếu tôi là tác giả của jQuery, tôi có thể đã tối ưu hóa mã bộ chọn của mình để nếu bạn đến với tôi với bộ chọn bắt đầu bằng "#", tôi mong đợi một đối tượng và nhận được một đối tượng danh sách có thể bork tôi hoàn toàn.)

Nó cũng có thể chọn cái đầu tiên, hoặc có thể là cái cuối cùng, hoặc không chọn cái nào trong số chúng, hoặc làm hỏng hoàn toàn trình duyệt. Không có cách nào để nói mà không thử nó.

"Làm thế nào xấu" sau đó phụ thuộc hoàn toàn vào mức độ nghiêm trọng của một trình duyệt cụ thể thực hiện thông số HTML và những gì nó làm khi đối mặt với vi phạm thông số kỹ thuật đó.

EDIT: TÔI CHỈ tình cờ bắt gặp điều này ngày hôm nay. Tôi đang sử dụng các thành phần khác nhau từ các biểu mẫu tìm kiếm trên nhiều loại thực thể khác nhau để tạo ra một tiện ích báo cáo tất cả trong một lớn cho trang web này, tôi đang tải lên các biểu mẫu tìm kiếm của các trang từ xa trong các div ẩn và đưa chúng vào trình tạo báo cáo khi loại thực thể phù hợp được chọn làm nguồn cho báo cáo. Vì vậy, có một phiên bản ẩn của biểu mẫu và một phiên bản được hiển thị trong trình tạo báo cáo. Trong tất cả các trường hợp, JavaScript đi kèm với các phần tử bằng ID, trong đó hiện có HAI trên trang - một ẩn và một được hiển thị.

Điều mà jQuery dường như đang làm là chọn cho tôi cái đầu tiên, mà trong mọi trường hợp chính xác là cái tôi không muốn.

Tôi đang giải quyết vấn đề này bằng cách viết các công cụ chọn để chỉ định vùng của trang mà tôi muốn đưa trường của mình vào (ví dụ: $ ('# containerDiv #specificEuity')). Nhưng có một câu trả lời cho câu hỏi của bạn - jQuery trên Chrome chắc chắn hành xử theo một cách cụ thể khi đối mặt với vi phạm thông số kỹ thuật này.

Làm thế nào là nó thực sự xấu?

1. Nó làm tôi khóc
2. Nó không hợp lệ
3. Nhiều thư viện javascript sẽ không hoạt động như mong đợi
4. Nó làm cho mã của bạn khó hiểu

Kinh nghiệm nói rằng getEuityById trong các trình duyệt chính sẽ trả về phần tử phù hợp đầu tiên trong tài liệu. Nhưng điều này có thể không phải luôn luôn là trường hợp trong tương lai.

Khi jQuery được cung cấp một id, ví dụ #foo, nó sử dụng getEuityById và bắt chước hành vi đó. Nếu bạn phải giải quyết vấn đề này (thật đáng buồn), bạn có thể sử dụng $ (" * #foo") để thuyết phục jQuery sử dụng getElementsByTagName và trả về danh sách tất cả các yếu tố phù hợp.

Tôi thường phải viết mã cho các trang web khác và tôi phải giải quyết vấn đề này. Trong một thế giới công bằng, tôi sẽ không phải thiết kế lại các chức năng để bắt đầu bằng cách kiểm tra xem ID có phải là duy nhất không. ID phải luôn là duy nhất. Thế giới thật tàn khốc và đó là lý do tại sao tôi khóc.

Bạn có thể làm rất nhiều thứ - nhưng điều đó không có nghĩa là bạn nên làm.

Là một lập trình viên (nói chung), chúng tôi xây dựng cuộc sống của mình dựa trên chính xác và tuân theo các quy tắc - đây là một quy tắc đơn giản để tuân theo, nó khá cơ bản với những gì chúng tôi làm - chúng tôi thích (phụ thuộc vào) các định danh duy nhất trong một phạm vi nhất định ...

Phá vỡ quy tắc là điều chúng ta có thể làm vì trình duyệt quá phù hợp - nhưng thực sự tất cả chúng ta sẽ tốt hơn nếu các trình duyệt nghiêm ngặt về việc cần HTML được hình thành tốt và hợp lệ, nỗi đau nhỏ mà nó sẽ gây ra từ lâu được hoàn trả!

Vì vậy, nó thực sự là xấu? Là một lập trình viên, làm thế nào bạn có thể hỏi? Đó là một tội ác chống lại nền văn minh (-:

Phụ lục:

Bạn viết rằng các trình duyệt quá sức chứa như nó là điều xấu

Tôi làm, bởi vì đó là - chúng tôi không nói về các quy tắc phức tạp, chúng tôi đang nói về việc làm cho mọi thứ được hình thành tốt và áp dụng các quy tắc có thể được kiểm tra một cách máy móc và từ đó giúp cho kết quả được xử lý một cách dễ dàng hơn. Nếu các trình duyệt nghiêm ngặt thì các công cụ sẽ rất nhanh chóng thích nghi để hỗ trợ điều đó - không phải vì vậy mà chúng không làm như vậy, một số đến mức chúng khai thác thất bại thay thế. Chỉ cần nghĩ về điều này - email sẽ là một phương tiện đẹp hơn nhiều nếu MS và Netscape không làm hỏng nó bằng cách cho phép HTML không bị hạn chế khi một "ngôn ngữ đánh dấu email" ít phức tạp hơn với sự hỗ trợ rõ ràng cho văn bản được trích dẫn sẽ cung cấp cho chúng tôi một công cụ tốt hơn nhiều ... nhưng con tàu đó đã đi thuyền và tương tự như vậy chúng ta có thể 'nên có ) nhưng chúng ta không thể

Trong Scripting: getElementByIDsẽ chỉ trả lại trận đấu đầu tiên. Trong CSS: #idsẽ ảnh hưởng đến TẤT CẢ các yếu tố với ID đó. Trong Trình duyệt Kết xuất sẽ không có hiệu lực.

Đây là hành vi của tiêu chuẩn w3c. Không phải là một điều có thể, đó là thực tế được xác định.

https://dom.spec.whatwg.org/#interface-nonelementparentnode