Atributos definibles por el usuario en elementos HTML?

Lo que necesito hacer es almacenar algunos datos sobre un elemento.Atributos definibles por el usuario en elementos HTML?

Por ejemplo, digamos que tengo un elemento de la lista < li>, y quiero almacenar algunos datos al respecto en el elemento, como "Este es el elemento 1 de XYZ".

La única manera que sé cómo hacer esto (que no quiero hacer, si puedo evitarlo) es la siguiente:

<li id='item1'> 
    Item 1 
    <!--This is element 1 from XYZ--> 
</li> 

<script> 
    // read it something like this 
    var e = document.getElementById('item1').innerHTML; 
    // then parse out the comment, etc. 
    // -- 
</script>

Lo que realmente quiero decir algo como esto (que soy bastante seguro no es posible):

// example 
<li id='item1' userdata='This is element 1 from XYZ'>Item 1</li>

.. por supuesto, me gustaría ser capaz de acceder a él de alguna manera a través de JavaScript de forma.

Alternativamente, ¿hay alguna otra manera de lograr esto?

Gracias -

Fuente

2010-01-08 OneNerd

Puede acceder a su atributo userdata = "" desde JavaScript. Sólo hacer:

var theData = document.getElementById('item1').getAttribute('userdata');

Si desea hacerlo de la manera HTML5, entonces deberías usar atributos denominados Data- *, por ejemplo:

<li id='item1' data-foo='This is element 1 from XYZ'>Item 1</li>

de esa manera, seguirá siendo válida (es decir, te hará sentir mejor por no usar un atributo no válido). Los nuevos navegadores apoyarán acceder a los atributos Data- * modo:

var theData = document.getElementById('item1').data.foo;

pero no creo que se implementa ampliamente suficiente para confiar en todavía.

Si desea almacenar los datos en un comentario (aunque te aconsejo tomar la ruta de atributo en su lugar) que podría hacer algo como:

var e = document.getElementById('item1'); 
var n = e.firstChild; 
while (n && n.nodeType != Node.COMMENT_NODE) { 
    n = n.nextSibling; 
} 
// now n.nodeValue will have the comment contents

(No hay garantías acerca de si el IE le gusta ninguna de las arriba.)

Fuente

2010-01-08 01:44:25 heycam

+1 Por mencionar los atributos de datos * válidos * HTML5. ¡Gran respuesta! –

+1 también para HTML5 – Anurag

Guau, qué excelente respuesta, además de la mención HTML5 es muy útil. ¡Muchas gracias! – OneNerd

No es posible añadir elementos arbitrarios a HTML. Bueno, puedes, pero no será válido y el comportamiento no está definido. Para este tipo de cosas tiendo a usar jQuery. Tiene una llamada data() que puede agregar datos arbitrarios a un elemento. Creo que lo codifica en el atributo de clase, pero la implementación no es importante.

Puede hacerlo usted mismo, pero ¿para qué molestarse? Es fácil equivocarse al poner los caracteres incorrectos, no escapando/escapando datos correctamente o destruyendo inadvertidamente la información. En su lugar, solo haga lo siguiente:

$("#item1").data({source: "Thsi is element 1 from XYZ"});

Fuente

2010-01-08 01:43:03 cletus

Si no necesita que el HTML sea válido, puede hacer cualquier atributo que desee, y puede acceder a él en Javascript llamando al método getAttribute.

Fuente

2010-01-08 01:44:37 SLaks

Puede agregar un elemento invisible anidado con un ID y sus datos como el texto interno. Use el atributo de estilo para asegurarse de que sea invisible.

Pero todo depende de lo que intentes lograr. ¿Podrías elaborar más?

Fuente

2010-01-08 01:47:51

Ya que se puede aceptar la adición de comentarios, una mejor solución sería añadir un elemento span con el contenido que quería ..

<span class="data">.....</span>

que definir la clase de datos para tener display:none y es invisible ...

esta manera se puede tener acceso a ella con el DOM normal de atravesar métodos ..

Fuente

2010-01-08 01:59:08

puede utilizar la función() setUserData() y getUserData http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-setUserData

Por ejemplo:

<html> 
<head> 
    <script type="text/javascript"> 
     function set(){ 
      var a = document.getElementById("testElement"); 
      a.setUserData("testData", "Some text", null); 
     } 

     function get(){ 
      var a = document.getElementById("testElement"); 
      alert(a.getUserData("testData")); 
     } 
    </script> 
</head> 
<body> 
    <span id="testElement"/> 
    <form> 
     <input type="button" value="setUserData" onclick="set()"/> 
     <input type="button" value="getUserData" onclick="get()"/> 
    </form> 
</body>

Fuente

2010-01-08 02:27:14

// Si desea incluir los datos en el html por qué no darle su propio nodo?

.hiddendata{ 
display: none 
} 

<li id= 'item1'> 
Item 1 
<span class= "hiddendata"> This is element 1 from XYZ</span> 
</li> 

function readHiddenData(who){ 
var A= [], n= who.firstChild; 
while(n){ 
    if(n.className= 'hiddendata'){ 
    A[A.length]= n.textContent || n.innerText || ''; 
    } 
    n= n.nextSibling; 
} 
return A; 
} 

function showHiddenData(who){ 
var n= who.firstChild; 
while(n){ 
    if(n.className= 'hiddendata'){ 
    n.style.display= "inline" 
    } 
    n= n.nextSibling; 
} 
}

Fuente

2010-01-08 04:09:37 kennebec

Atributos definibles por el usuario en elementos HTML?

Respuesta

Cuestiones relacionadas