Maison interface Web Tutoriel H5 Explication détaillée de la façon d'obtenir automatiquement les attributs data-* de l'exemple de code HTML5

Explication détaillée de la façon d'obtenir automatiquement les attributs data-* de l'exemple de code HTML5

Mar 11, 2017 pm 04:37 PM

Une série de balises personnalisées doivent être conçues dans le projet, cela implique donc comment accéder aux attributs des balises. Si vous utilisez l'attribut data-* de HTML5, vous pouvez accéder directement au nom dataset.attribute après avoir obtenu l'élément. Le type d'ensemble de données est DOMStringMap {}, un objet MAP, qui est toujours un objet clé/valeur, ce qui est plus. pratique à utiliser. Cependant, nous avons rencontré un problème de compatibilité, et il n'est pas supporté sur certains anciens navigateurs comme Android 2.3.

Nous pouvons écrire un patch de compatibilité pour cela. Le principe principal est de « détourner » des méthodes telles que document.querySelector/querySelectorAll pour obtenir des éléments, puis de fournir un ensemble de données de champ personnalisé = {....} pour obtenir une écriture standard similaire. Bien sûr, vous pouvez simplement fournir une méthode API comme getDataAttrib() pour obtenir l'attribut, et l'effet sera le même. La raison pour laquelle nous n’adoptons pas cette méthode mais une autre méthode est de mieux nous rapprocher du standard et d’utiliser une méthode d’accès cohérente pour tout le monde.

Mon implémentation est la suivante :

// 如浏览器不支持 HTML5 data-* 属性,设置一个。
;(function(){
	// 测试元素
	var el;
	el = document.createElement('p');
	el.setAttribute('data-id', '111');
	if(!el.dataset){
		Element.prototype.dataset = {};
		
		var querySelectorAll = document.querySelectorAll; // 保存一个
		document.querySelectorAll = function(){
			var resultEls = querySelectorAll.apply(this, arguments);
			for(var resultEl, i = 0, j = resultEls.length; i < j; i++){
				resultEl = resultEls[i];
				resultEl.dataset = getAttrib(resultEl.attributes)
			}
			
			return resultEls;
		}
		
		// 也就是单个的 document.querySelectorAll()。不保存,直接覆盖
		document.querySelector = function(){
			var resultEls = document.querySelectorAll.apply(this, arguments);
			return resultEls ? resultEls[0] : null;
		};	
		
	}
	el = null; // 要完全移除 dummy 元素,是否这样就 ok?
	
	/**
	 * 把元素保存为 JSON 对象
	 * @param {Element.attributes} 元素属性集合
	 * @return {Object}
	 */
    function getAttrib(attributes) {
        if (!attributes) return;
        var hash = {};
        
        for (var attribute, i = 0, j = attributes.length; i < j; i++) {
            attribute = attributes[i];
            if(attribute.nodeName.indexOf(&#39;data-&#39;) != -1){
	            hash[attribute.nodeName.slice(5)] = attribute.nodeValue;
            }
        }
        
        return hash;
    }
})();
Copier après la connexion

Considérant que la méthode d'obtention des éléments de querySelector est suffisante, la méthode documeny.getElementByID("#id") n'est actuellement pas fournie.

Veuillez noter : querySelector /querySelectorAll exécuté sur des objets non-document ne sera pas pris en charge et l'ensemble de données ne sera pas renvoyé. Ce problème a été résolu en réécrivant la méthode Element.prototype le 16/01/2013. Le processus détaillé est le suivant :

if(!canSupportDataSet()){
    Element.prototype.dataset = {};


    modifyQuerySelectorAll_By(document);  // document 的好像不一样……
    modifyQuerySelectorAll_By(Element.prototype);
}


/**
 * 覆盖系统的 querySelector/querySelectorAll 方法。
 * @param host {Element.prototype/Document}
 */
function modifyQuerySelectorAll_By(host){
    var querySelectorAll = host.querySelectorAll; // 保存一个
    host.querySelectorAll = function(){
        var resultEls = querySelectorAll.apply(this, arguments);
        for(var resultEl, i = 0, j = resultEls.length; i < j; i++){
            resultEl = resultEls[i];
            resultEl.dataset = getAttrib(resultEl.attributes)
        }


        return resultEls;
    }


    // 也就是单个的 document.querySelectorAll()。不保存,直接覆盖
    host.querySelector = function(){
        var resultEls = host.querySelectorAll.apply(this, arguments);
        return resultEls ? resultEls[0] : null;
    };
}
Copier après la connexion

Exemple de test :

<listview id="foo" data-id="1">
    Hello World
    <p data-id="2"></p>
</listview>

<script>
var el = document.querySelector(&#39;#foo&#39;);
alert(el.querySelector(&#39;p&#39;).dataset.id);
</script>
Copier après la connexion

Résumé du problème :

  1. Le navigateur doit être capable de prendre en charge la méthode querySelector/ querySelectorAll, sinon cette méthode n'a aucun sens

  2. ne peut fournir qu'un ensemble de données à partir de la méthode d'obtention d'éléments ; Par exemple, e.tartget.dataset du paramètre e dans le gestionnaire d'événements est un objet vide.

  3. Comme le montre le code ci-dessus, un seul querySelector() passe par querySelectorAll(), qui inclut l'opération de parcours du tableau. Peut-il être optimisé de manière appropriée et utiliser le tableau natif ?

  4. Pour les étudiants sensibles à la vitesse du CSS Selector Engine, cette méthode n'est pas applicable. Parce que la méthode du système est modifiée, on constate que les performances vont inévitablement diminuer. Mais on peut garantir que cette diminution est faible ;

  5. ne prend pas encore en charge documenteny.getElementByID et sera ajouté.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Espace réservé d'entrée HTML Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

See all articles