So verwenden Sie den H5-Datensatz-H5-Tutorial-php.cn

So verwenden Sie den H5-Datensatz

php中世界最好的语言

Freigeben： 2018-03-14 15:15:05

Original

3369 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie den H5-Datensatz verwenden und welche Vorsichtsmaßnahmen bei der Verwendung des H5-Datensatzes gelten. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

Mit dem HTML5-Standard können Sie Attribute ähnlich wie data-* in gewöhnliche Element-Tags einbetten, um einen einfachen Datenzugriff zu erreichen. Seine Menge ist nicht begrenzt, und es kann auch dynamisch durch Javascript geändert werden und unterstützt auch den CSS-Selektor für das Styling. Dies macht das Datenattribut besonders flexibel und leistungsstark. Mit solchen Attributen können wir Daten geordneter und intuitiver voreinstellen oder speichern. Natürlich können Sie jedem Tag-Element beliebige benutzerdefinierte Attribute hinzufügen und auch deren Werte abrufen, aber das ist nicht so flexibel. Schauen wir uns zunächst die Speicherdaten für zufällige Attribute an.

1. Verwenden Sie das setAttribute und getAttribute des dom-Knotens-Objekts

Beispiel:

<!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>

Nach dem Login kopieren

Führen Sie diesen Code aus, und der Wert, der mtitle entspricht, kann auf der Seite abgerufen werden. Obwohl es möglich ist, auf diese Weise zu schreiben, sollten Sie, wenn Sie mehr Informationen voreinstellen möchten, ein semantisches Attribut data-* verwenden. Wenn Sie beispielsweise im Beispiel gerade mehr Daten zu diesem Lied in die Musik einfügen möchten

, können Sie so schreiben:

<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>

Nach dem Login kopieren

Zugriffsattribute können weiterhin mit der ersten Methode verwendet werden: var album = document.getElementById("music-latch").getAttribute("data-album"); 🎜>

Aber diese Methode ist relativ einfach zu bedienen. Wenn Sie auf mehrere benutzerdefinierte Datenfelder stoßen und alle Datenattribute auf einmal abrufen und in Objekte packen möchten, müssen Sie auch eine erstellen

Schleife, was sehr kompliziert ist. Wir haben aber auch die Dataset-API verfügbar. 2. Verwenden Sie die Datensatz-API, um auf den Datensatz zuzugreifenÜber die .dataset-API können wir alle Datenfelder des Elements bequemer abrufen und Objekte verwenden, um den Zugriff und das Durchlaufen zu erleichtern. Für das obige Beispiel können Sie beispielsweise Folgendes ausführen:

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

Nach dem Login kopieren

Zu diesem Zeitpunkt, wenn wir auf Daten zugreifen, benötigen wir nicht die „Daten- " Schlüsselwort. Sie können direkt darauf zugreifen, indem Sie .dataset.name verwenden. Dies ist praktischer als die oben beschriebene Methode. Alle vorgenommenen Änderungen können in Echtzeit im Datenattribut des Elements widergespiegelt werden. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie CSS3, um stereoskopische 3D-Effekte zu erzielen

Einige Zusammenfassung der Verwendung von DOM

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den H5-Datensatz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!