HTML의 데이터세트

데이터세트 속성을 사용하면 데이터 속성을 보다 직접적으로 검색할 수 있습니다. 각 사용자 정의 데이터 속성에 대해 이 속성은 항목만 포함된 DOMStringMap 객체를 반환합니다. HTML 요소 인터페이스의 데이터 세트 읽기 전용 개념은 지정된 요소의 사용자 정의 데이터 속성(data-*)에 대한 읽기/쓰기 액세스 방법을 제공합니다. 각 data-* 속성에 대한 항목이 있는 문자열 맵(DOMStringMap)을 제공합니다. 데이터세트는 DOM과 HTML 모두에서 사용할 수 있습니다.

구문:

구문은 다음과 같이 선언됩니다.

element.dataset.key

최소한의 데이터세트 생성입니다.

HTML 데이터세트를 사용하면 사용자는 기존 HTML 테이블과 기타 구조화된 마크업을 통해 데이터에 액세스할 수 있습니다. HTML 데이터세트는 이미 존재하는 수백만 개의 테이블을 활용할 수 있다는 점을 제외하면 XML 데이터세트와 유사하게 작동합니다. HTML 데이터 세트는 XML을 테이블 구조로 평면화했기 때문에 명백한 확장이었습니다. 데이터 세트는 데이터 속성을 보유하는 요소의 기본 속성입니다. IE11+ 및 Chrome 8+에서는 거의 지원되지 않습니다. 데이터 세트 항목 값은 일반적으로 문자열이지만 jQuery의 data()는 제공되는 유형을 따릅니다. 데이터(키, 값). (Dataset은 DOMStringMap을 반환하고, jQuery의 data()는 jQuery 객체를 반환합니다.)

HTML 데이터세트

사용자는 Spry HTML 데이터세트를 통해 일반 HTML 테이블과 다른 구조화된 마크업을 데이터 소스로 사용할 수 있습니다. HTML 데이터 세트는 사용 가능한 수백만 개의 테이블을 활용할 수 있다는 점을 제외하면 XML 데이터 세트와 유사하게 작동합니다. HTML 데이터세트는 XML을 테이블 구조로 평면화했기 때문에 Spry Framework가 자연스럽게 확장된 것입니다.

HTML 데이터세트에는 이를 변경하는 데 사용할 수 있는 유틸리티 세트가 함께 제공됩니다.

• getURL() – 이 함수는 데이터세트 함수 Object() { [네이티브 코드] }에서 현재 URL의 값을 반환합니다.
• setURL(“URL”) – 이 함수는 데이터 세트에서 활용될 새 파일의 경로를 지정합니다.
• getSourceElementID() – 데이터세트의 기반이 되는 페이지 요소의 ID를 가져옵니다.
• setSourceElementID(“theSourceID”) – 이 메소드는 데이터 소스 페이지 요소의 ID를 설정하거나 변경하는 데 사용됩니다.
• getRowSelector()는 현재 사용 중인 RowSelector를 반환합니다.
• setRowSelector(“theRowSelector”) 데이터 세트에 대한 새 RowSelector를 설정합니다.
• getDataSelector() – 현재 DataSeelctor를 반환합니다.
• setDataSelector(“theDataSelector”)-데이터세트에 대한 새 DataSelector를 설정합니다.

예

유효한 HTML 코드의 경우

<li class="prod" data-name="Dove Shampoo" data-country="Oslo"
data-lang="js" data-types="Hair">
<b>Hello Users:</b> <span>A newly launched Items</span>
</li>
var u1 = document.getElementsByTagName("li")[0];
var p1 = 0, span = user.getElementsByTagName("span")[0];
var content = [
{name: "country", prefix: "Product exported "},
{name: "type", prefix: "utilizing on hair "},
{name: "lang", prefix: "hello Oslo "}
];
u1.addEventListener("click", function(){
var content = content [ pos++ ];
span.innerHTML = content.prefix + u1.dataset[ content.name ];
}, false);

위 코드 조각에서 데이터세트 속성은 속성 속성과 동일하게 작동합니다. 이 코드는 나중에 더 잘 작동하는 콘텐츠 접두사와 같은 접두사를 사용하여 강화될 수 있습니다. 키는 요소에서와 같이 속성을 설정하고 읽기 위해 데이터세트의 개체 속성으로 사용될 수 있습니다. 데이터세트.키 이름. 객체 속성 대괄호 구문을 사용하여 요소에서와 같이 속성을 설정하고 읽을 수도 있습니다. 데이터 세트[키 이름]. in 연산자를 사용하여 속성이 존재하는지 확인할 수 있습니다.

데이터세트 IDL 속성은 모든 요소의 data-* 속성(data-*/a>)에 대한 간단한 접근자를 제공합니다. 데이터세트 가져오기(dataset/a>) IDL 속성은 해당 요소에 이러한 속성을 노출하는 다음 알고리즘과 연결된 DOMStringMap 개체를 반환해야 합니다.

<ahref="demo.html#domstringmap-0"> </a>

주의할 사항:

• 속성 이름에는 더 이상 data- 접두사가 붙지 않습니다.
• 이름에서 소문자 앞에 오는 하이픈은 제거되고 그 뒤의 문자는 대문자로 변환됩니다.
• 다른 캐릭터는 혼자 남겨집니다. 즉, 뒤에 소문자가 오지 않는 하이픈은 그대로 유지됩니다.

브라우저 지원

데이터세트는 모든 브라우저(특히 이전 버전의 Internet Explorer)와 호환되지 않습니다. 업데이트된 호환성 데이터를 표에서 살펴보겠습니다.

Support	Versions
Desktop	Chrome	Edge	Firefox	Internet Explorer
	6 and 8	Yes	6 higher	9
Mobile	Android	Edge	Opera	Samsung
	6	Yes	Nil	Nil

사양/설명

HTML5에서는 표준 기반 홈페이지 개발을 더욱 쉽게 만들기 위해 상황이 변경되었으며 이는 큰 변화를 가져올 것입니다. 단순한 XML 기반 마크업은 학습 곡선과 실패율이 너무 높기 때문에 이 접근 방식을 적용하기 위한 방법으로 data- 속성을 만들었습니다. 데이터 속성이 네임스페이스나 다른 것을 대체하려고 시도하지 않는다는 점을 이해하는 것이 중요합니다. 위에서 설명한 기능을 *배포*하는 데 필요한 도구를 제공합니다. HTML의 data- 속성을 사용하여 RDFa, 정교한 형식 및 일부 유형의 네임스페이스를 구현할 수 있습니다. 이 사양의 가장 매력적인 측면은 사용자가 이를 활용하기 시작할 때까지 브라우저에서 이를 구현할 때까지 기다릴 필요가 없다는 것입니다. 사용자가 오늘 HTML 메타데이터에서 data- 접두사를 사용하기 시작하면 앞으로도 계속 작동할 것이라는 확신을 가질 수 있습니다.

다음 알고리즘을 실행하여 DOMStringMap의 이름-값 쌍을 가져옵니다.

• 목록은 비어 있는 이름-값 쌍의 목록입니다.
• 처음 5개가 문자열 "data-"이고 나머지 문자(있는 경우)에 ASCII 상위 알파가 포함되지 않은 DOMStringMap 관련 요소의 각 콘텐츠 속성에 대한 목록에 이름-값 쌍을 추가합니다. 해당 속성이 요소의 속성 목록에 나열되는 순서를 지정하세요.

기본 HTML 표준의 경우 – 검토 댓글은 최신 HTML 5.1과 정확히 다르지 않습니다

버전 HTML 5   – 검토 의견(이전 표준에는 변경 사항 없음)

버전 HTML 5.1 – HTML 5에는 영향이 없습니다.

결론 – HTML의 데이터세트

마지막으로 사용자 정의 데이터 속성은 웹페이지에 애플리케이션 데이터를 저장하는 편리한 방법입니다. 이제 HTML5를 사용하면 모든 HTML 구성 요소에 사용자 정의 데이터 속성을 통합할 수 있습니다. 이러한 속성이 도입되기 전까지 유사한 결과(데이터를 요소에 연결)를 달성하는 유일한 열쇠는 요소에서 CSS 클래스를 사용하는 것이었습니다.

위 내용은 HTML의 데이터세트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!