HTML5 데이터 - * 속성을 사용하여 더 나은 UX를 만드는 방법

JavaScript로 나중에 액세스하기 위해 특정 HTML 요소에 맞춤 데이터를 추가하고 싶습니까? HTML5가 출시되기 전에는 DOM과 관련된 맞춤 데이터를 저장하는 것이 매우 번거롭기 때문에 개발자는 비표준 속성을 도입하거나 오래된 setUserData () 메소드를 사용하여 문제를 해결하는 등 모든 종류의 불쾌한 해킹을 사용해야했습니다..

다행히도 HTML5가 새로운 글로벌 기능을 도입 했으므로 더 이상 그렇게 할 필요가 없습니다. 데이터-* HTML 요소에 추가 정보를 포함시킬 수있는 속성 새로운 데이터-* 속성들 HTML을보다 확장 가능하게 만든다., 따라서 더 복잡한 앱을 만들 수있게 해줍니다., Ajax 호출 또는 서버 측 데이터베이스 쿼리와 같은 리소스 집약적 인 기술을 사용하지 않고도보다 정교한 사용자 경험을 생성 할 수 있습니다..

새로운 글로벌 속성에 대한 브라우저 지원은 모든 최신 브라우저에서 지원되므로 비교적 양호합니다 (IE8-10에서는 부분적으로 지원함).

구문 구문 데이터-* 속성

새로운 구문 데이터-* 속성은 aria-prefixed 속성의 속성과 유사합니다. 소문자 문자열을 해당 위치에 삽입 할 수 있습니다. * 기호. 또한 문자열 형식으로 각 속성에 값을 지정해야합니다..

예를 들어 회사 소개 각 직원이 근무하는 부서의 이름을 저장하고 저장하십시오. 추가 사항 외에 다른 작업을 수행 할 필요가 없습니다. 데이터 부서 맞춤 속성을 다음과 같은 방식으로 적절한 HTML 요소에 추가합니다.

 
 
 존 도우 
 
 제인 도우 
 

관습 데이터-* 속성은 수업 과 신분증 속성을 사용하여 모든 HTML 요소에서 사용할 수 있습니다. 만큼 추가 할 수도 있습니다. 데이터-* 속성을 원하는대로 HTML 태그에 추가하십시오. 위의 예에서 예를 들어 다음과 같은 새 맞춤 속성을 도입 할 수 있습니다. 데이터 사용자 직원 사용자 이름 저장.

 
 
 존 도우 
 
 제인 도우 
 

일반적으로 HTML 요소에 사용자 지정 특성을 추가하려면 항상 HTML 요소 앞에 접두사를 추가해야합니다. 데이터- 끈. 마찬가지로 다른 사람의 코드에서 데이터 접두사가 붙은 속성을 볼 때 해당 속성이 작성자가 소개 한 맞춤 속성이라는 것을 알 수 있습니다.

사용자 지정 특성을 사용하지 않을시기 및 사용시기

W3C는 커스텀을 정의한다. 데이터-* 다음과 같은 속성 :

“사용자 지정 데이터 특성은 적절한 특성이나 요소가없는 사용자 지정 데이터를 페이지 또는 응용 프로그램에 저장하기위한 것입니다..”

사용하는 것이 좋습니다. 데이터-* 속성들 저장할 데이터에 대해 다른 의미 적 속성을 찾을 수없는 경우.

스타일링 용도로만 사용하는 것이 가장 좋은 생각은 아닙니다. 수업 그리고 스타일 속성. HTML5에 의미 론적 속성이있는 데이터 유형을 저장하려는 경우 (예 : 날짜 시간 에 대한 속성 요소가 있으면 데이터 접두사가 붙은 속성 대신 사용하십시오.

주의해야 할 점은 데이터-* 속성은 페이지 또는 애플리케이션 전용, 이는 검색 엔진 봇 (bot) 및 외부 응용 프로그램과 같은 사용 도구에 의해 무시된다는 것을 의미합니다. 데이터 접두사가 붙은 속성은 HTML을 호스팅하는 사이트에서 실행되는 코드만으로 액세스 할 수 있습니다.

관습 데이터-* 속성은 Bootstrap 및 Zurb Foundation과 같은 프론트 엔드 프레임 워크에서 광범위하게 사용됩니다. 좋은 소식은 데이터 접두사가 붙은 애트리뷰트를 프레임 워크의 일부로 사용하려는 경우 JavaScript를 작성하는 방법을 알 필요가 없다는 것입니다. HTML 접두사를 HTML 코드에 추가하면됩니다. 사전 작성된 자바 스크립트 플러그인.

아래의 코드 스 니펫은 부트 스트랩의 버튼에 왼쪽의 툴팁을 추가합니다. 데이터 토글 그리고 데이터 배치 사용자 지정 특성을 지정하고 적절한 값을 할당.

  왼쪽 툴팁 

목표 데이터-* CSS를 사용한 속성

사용하지 않는 것이 좋지만 데이터-* 스타일 지정 용도로만 속성을 사용하는 경우 일반 속성 선택기를 사용하여 속한 HTML 요소를 선택할 수 있습니다. 특정 데이터 접두사가있는 속성이있는 각 요소를 선택하려면 CSS에서 다음 구문을 사용하십시오.

 li [data-user] color : blue; 

위 코드 스 니펫에 파란색으로 표시되는 사용자 이름은 아닙니다. 즉, 사용자 정의 속성에 저장된 모든 데이터가 보이지 않지만 사용자 이름에 포함 된 직원의 이름은 보이지 않습니다.

 li [data-department = "IT"] border : 단색 파랑 1px; 

 var jane = document.getElementById ( "jane"); console.log (jane.dataset); // DOMStringMap user : "janedoe", department : "IT" 

 var jane = document.getElementById ( "jane"); console.log (jane.dataset.user) // janedoe

 $ ( "# jane") .hover (function () var department = $ ( "# jane") 데이터 ( "부서"); 경보 (부서););

 var town = $ ( "# jane"). 데이터 ( "town", "New York");