html - 특수문자 - 자바 스크립트 id 값 변경




HTML의 id 속성에 유효한 값은 무엇입니까? (15)

HTML 요소의 id 속성을 만들 때 값에 어떤 규칙이 있습니까?


HTML5 :

id 속성에 대한 추가 제한 사항 은 여기를 참조하십시오 . 유일한 요구 사항은 (문서에서 고유함을 제외하고) 다음과 같습니다.

  1. 값에는 하나 이상의 문자가 포함되어야합니다 (비워 둘 수 없음).
  2. 공백 문자를 포함 할 수 없습니다.

이전 HTML5 :

ID가 일치해야합니다.

[A-Za-z][-A-Za-z0-9_:.]*
  1. AZ 또는 az 문자로 시작해야합니다.
  2. - (하이픈), _ (밑줄), : (콜론) 및 . (기간)

그러나 피해야한다 . beacause :

예를 들어, ID는 "ab : c"로 레이블되고 스타일 시트에서 #ab : c로 참조 될 수 있지만 요소의 ID 일뿐 아니라 id "a", 클래스 "b" 선택기 "c". 혼동을 피하고 사용하지 못하게하는 것이 가장 좋습니다. 및 : 전부.


HTML5 : ID 및 클래스 속성에 허용되는 값

HTML5부터 ID 값에 대한 유일한 제한은 다음과 같습니다.

  1. 문서에서 고유해야 함
  2. 공백 문자가 없어야합니다.
  3. 적어도 하나의 문자를 포함해야합니다.

비슷한 규칙이 클래스에 적용됩니다 (물론 고유성 제외).

따라서 값은 모든 자릿수, 단 하나의 숫자, 문장 부호 문자, 특수 문자를 포함 할 수 있습니다. 그냥 공백이 없습니다. 이것은 HTML4와 매우 다릅니다.

HTML 4에서 ID 값은 문자로 시작해야하며 문자, 숫자, 하이픈, 밑줄, 콜론 및 마침표 만 따라야합니다.

HTML5의 경우 유효합니다.

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

ID 값에 숫자, 구두점 또는 특수 문자를 사용하면 다른 상황 (예 : CSS, JavaScript, 정규식)에서 문제가 발생할 수 있음을 명심하십시오.

예를 들어 다음 ID는 HTML5에서 유효합니다.

<div id="9lions"> ... </div>

그러나 CSS에서는 유효하지 않습니다.

CSS2.1 사양 :

4.1.3 문자와 케이스

CSS에서 식별자 (선택자의 요소 이름, 클래스 및 ID 포함)에는 문자 [a-zA-Z0-9] 및 ISO 10646 문자 U + 00A0 이상, 하이픈 (-) 및 밑줄 _); 두 자리 하이픈 또는 한 자리 뒤에 하이픈으로 시작할 수 없습니다 .

대부분의 경우 제한이나 특별한 의미가있는 상황에서 문자를 이스케이프 할 수 있습니다.

W3C 참고 문헌

HTML5

3.2.5.1 id 속성

id 속성은 요소의 고유 식별자 (ID)를 지정합니다.

이 값은 요소의 홈 하위 트리에있는 모든 ID 중에서 고유해야하며 적어도 하나의 문자를 포함해야합니다. 값에는 공백 문자가 없어야합니다.

참고 : ID가 취할 수있는 양식에는 다른 제한 사항이 없습니다. 특히 ID는 숫자로 구성 될 수 있고, 숫자로 시작하고, 밑줄로 시작하며, 구두점으로 구성 될 수 있습니다.

3.2.5.7 class 속성

속성을 지정하는 경우 요소가 속하는 다양한 클래스를 나타내는 공백으로 구분 된 토큰 집합의 값을 가져야합니다.

HTML 요소가 할당 한 클래스는 class 속성의 값이 공백으로 분리 될 때 반환되는 모든 클래스로 구성됩니다. 중복은 무시됩니다.

제작자가 class 속성에서 사용할 수있는 토큰에 대한 추가 제한은 없지만 작성자는 원하는 내용의 표현을 설명하는 값이 아닌 내용의 성격을 설명하는 값을 사용하는 것이 좋습니다.


  1. ID는 레이아웃의 일부 이름을 지정하는 데 가장 적합하므로 ID 및 클래스에 동일한 이름을 지정하지 않아야합니다.
  2. ID는 영숫자 및 특수 문자를 허용합니다.
  3. # : . * ! 사용하지 마십시오 # : . * ! # : . * ! 기호들
  4. 허용되지 않는 공백
  5. 숫자 나 하이픈 뒤에 숫자가 오지 않는다.
  6. 대소 문자를 구분하는
  7. ID 선택기를 사용하는 것이 클래스 선택기를 사용하는 것보다 빠릅니다.
  8. 긴 CSS 클래스 나 ID 규칙 이름에 하이픈 "-"을 사용하십시오 (밑줄 "_"은 seo를 사용할 수도 있지만 좋지 않습니다).
  9. 규칙에 키 선택기로 ID 선택자가 있으면 규칙에 태그 이름을 추가하지 마십시오. ID가 고유하기 때문에 태그 이름을 추가하면 불필요하게 일치 프로세스가 느려집니다.
  10. HTML5에서 id 속성은 모든 HTML 요소에서 사용할 수 있으며 HTML 4.01에서는 id 속성을 <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

HTML 4 사양에서 ...

ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 숫자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_" , 콜론 ( ":") 및 마침표 ( ".")로 구성됩니다.

편집 : 오! 다시 버튼에 맞았다!


jQuery 유효한 ID 이름을 처리합니다. 메타 문자 (예 : 점, 세미콜론, 대괄호 ...) 만 이스케이프해야합니다. 그것은 자바 스크립트가 따옴표에 문제가 있다고 말하는 것과 같습니다.

var name = 'O'Hara';

jQuery API의 셀렉터 (하단 참조)


공백이 없어야하며 적어도 a부터 z까지 그리고 0에서 9까지의 문자로 시작해야합니다.


나는 이것이이 질문에 대답하기에는 너무 늦었다 고 알고있다. 그러나 나는 똑같은 문제가 있었기 때문에 나는이 대답을 더 완전하게 찾았다. 나는 대답하기로 결심한다.

A, B, C ... x, y, z, A, B, C ... X, Y, Z, 0,1,2 ... 7,8,9, id하지만 숫자와 -는 첫 번째 문자로 사용하면 안됩니다.

이들은 틀리다 :

1adfsvsdf   // use number in first
-adfasdf    // use - in first
afd'ksdf    // use ' in characters
asdf;asdf   // use ; in characters

또한 ID가 고유하다는 사실을 잊지 마십시오. 일단 ID 값을 사용하면 문서의 어느 곳에서도 다시 나타나지 않을 수 있습니다.

많은 ID가있을 수 있지만 모두 고유 한 값을 가져야합니다.

반면에, 클래스 요소가 있습니다. ID와 마찬가지로 여러 번 나타날 수 있지만 그 값은 반복해서 사용될 수 있습니다.


모든 영숫자 값 과 " - "및 " _ "이 유효합니다. 그러나 ID 이름AZ 또는 az 사이의 문자로 시작 해야합니다.


실제로 많은 사이트에서는 숫자로 시작하는 id 속성을 사용합니다. 비록 이것이 기술적으로 유효한 HTML이 아니지만.

HTML 5 드래프트 사양idname 속성에 대한 규칙을 완화합니다. 즉, 공백을 포함 할 수없는 그냥 불투명 한 문자열입니다.


엄밀히 말하면 일치해야합니다.

[A-Za-z][-A-Za-z0-9_:.]*

하지만 jquery는 콜론에 문제가있는 것 같아서이를 피하는 것이 더 나을 수도 있습니다.


요소의 고유 식별자입니다.

문서에 동일한 id 값을 가진 요소가 여러 개 있어서는 안됩니다.

문자열은 다음과 같은 제한이 있습니다.

  1. 적어도 한 문자 이상이어야합니다.
  2. 공백 문자를 포함해서는 안됩니다.

    • U + 0020 SPACE
    • U + 0009 문자표 (탭)
    • U + 000A 라인 피드 (LF)
    • U + 000C 양식 지급 (FF)
    • U + 000D CARRIAGE RETURN (CR)

ASCII letters and digits, '_', '-' and '.' 제외한 문자 사용 ASCII letters and digits, '_', '-' and '.' HTML 4 에서 허용되지 않았기 때문에 호환성 문제가 발생할 수 있습니다. 이 제한 사항은 HTML 5 에서 해제되었지만 ID는 호환성을 위해 문자로 시작해야합니다.


하이픈, 밑줄, 마침표, 콜론, 숫자 및 문자 모두 CSS 및 JQuery와 함께 사용할 수 있습니다. 다음은 작동해야하지만 페이지 전체에서 고유해야하며 문자 [A-Za-z]로 시작해야합니다.

콜론과 마침표로 작업하는 것은 더 많은 작업이 필요하지만 다음 예제와 같이 할 수 있습니다.

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

HTML 4 사양에서 :

ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 숫자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_" , 콜론 ( ":") 및 마침표 ( ".")로 구성됩니다.

일반적인 실수는 숫자로 시작하는 ID를 사용하는 것입니다.


HTML5

이 값은 요소의 홈 하위 트리에있는 모든 ID 중에서 고유해야하며 적어도 하나의 문자를 포함해야합니다. 값에는 공백 문자가 없어야합니다.

적어도 하나의 문자, 공백이 없어야합니다.

이렇게하면 악센트 부호가있는 문자 사용과 같은 유효한 유스 케이스에 대한 문이 열립니다. 또한 CSS와 JavaScript 모두에 문제를 일으킬 수있는 ID 값을 사용할 수 있으므로 실제로는주의해야 할 때가 아니라면 훨씬 더 많은 탄약을 발사 할 수 있습니다.





html