H5 데이터 세트를 사용하는 방법-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

H5 데이터 세트를 사용하는 방법

php中世界最好的语言

Mar 14, 2018 pm 03:15 PM

dataset html5 사용

이번에는 H5 데이터세트를 어떻게 사용하는지, H5 데이터세트를 사용할 때 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례로 살펴보겠습니다.

HTML5 표준을 사용하면 일반 요소 태그에 data-*와 유사한 속성을 삽입하여 간단한 데이터 액세스를 달성할 수 있습니다. 수량에는 제한이 없으며 javascript로 동적으로 수정할 수도 있고 스타일 지정을 위한 CSS 선택기도 지원합니다. 이는 데이터 속성을 특히 유연하고 강력하게 만듭니다. 이러한 속성을 통해 우리는 보다 질서 있고 직관적인 방식으로 데이터를 미리 설정하거나 저장할 수 있습니다. 물론 태그 요소에 원하는 대로 사용자 정의 속성을 추가할 수 있고 해당 값을 얻을 수도 있지만 이만큼 유연하지는 않습니다. 먼저 무작위 속성 저장 데이터를 살펴보겠습니다.

1. dom node 객체

의 setAttribute 및 getAttribute를 사용합니다. 예:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>
Document
</title>
 </head>
 <body>
   <span id="music" mtitle="yestoday once more">昨日重现</span>
   <script type="text/javascript">
      var mdoc=document.getElementById(&#39;music&#39;);
 alert(mdoc.getAttribute(&#39;mtitle&#39;));
   </script>
 </body>
</html>

로그인 후 복사

이 코드를 실행하면 페이지에서 mtitle에 해당하는 값을 얻을 수 있습니다. 이렇게 작성하는 것도 가능하지만, 더 많은 정보를 미리 설정하고 싶다면 시맨틱 속성인 data-*를 사용해야 합니다. 예를 들어, 지금의 예에서 이 노래에 대한 추가 데이터를 음악

에 삽입하려면 다음과 같이 작성할 수 있습니다.

<span id="music-latch" class="musique"  
data-date="2013"  
data-genre="Electronic"  
data-album="Settle (Deluxe)"  
data-artist="Disclosure"  
data-composer="Howard Lawrence & Guy Lawrence">  
Latch (feat. Sam Smith)  
  </span>

로그인 후 복사

속성에 액세스하는 첫 번째 방법을 계속 사용할 수 있습니다. var album = document.getElementById("music-latch ").getAttribute("data-album");
console.log(album);

그러나 이 방법은 여러 데이터가 발생하는 경우-* 사용자 정의 필드를 한 번에 가져오려는 경우 데이터 속성이 객체로 패키징되면 loop을 만들어야 하는데 이는 매우 번거롭습니다. 하지만 Dataset API도 사용할 수 있습니다.
2. 데이터세트 API를 사용하여 데이터세트에 액세스
.dataset API를 통해 요소의 모든 데이터 필드를 더 편리하게 얻을 수 있고, 객체를 사용하여 액세스 및 탐색을 용이하게 할 수 있습니다. 예를 들어 위의 예에서는 다음을 실행할 수 있습니다.

 <script type="text/javascript">
   var mdoc=document.getElementById(&#39;music-latch&#39;);
   var ds=mdoc.dataset;
   alert(ds.date+&#39;--&#39;+ds.album);
   </script>

로그인 후 복사

이때 데이터에 액세스할 때 "data-" 키워드가 필요하지 않습니다. 를 사용하여 직접 액세스할 수 있습니다. 데이터세트.이름 . 위의 방법보다 이 방법이 더 편리합니다. 모든 변경 사항은 요소의 데이터 속성에 실시간으로 반영될 수 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!