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>