JavaScript - ¿Cómo obtener un elemento por atributo?

   
Vista:

¿Cómo obtener un elemento por atributo?

Publicado por Vega (16 intervenciones) el 15/05/2014 21:07:44
Hola a todos, nuevamente yo :P

Quisiera saber si alguien podría ayudarme con un problemilla que tengo, he encontrado en la red un script que sirve para que al pulsar un botón se agregue texto a un DIV, este es el ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
<html><head><title>Falso Chat</title>
<script type="text/javascript">
    function AgregarLineaDeTexto(TextoLinea) {
        document.getElementById("texto_chat").innerHTML += "<br>" + TextoLinea;  // Agrego nueva linea antes
    }
</script>
</head>
<body>
<input type="button" value="Agregar 'Hola'" onClick="AgregarLineaDeTexto('Hola')">
<input type="button" value="Agregar 'Chau'" onClick="AgregarLineaDeTexto('Chau')">
<div id="texto_chat">Este texto no va a desaparecer...</div>
</body></html>

Y funciona perfectamente, pero el problema es que donde yo lo quiero usar es específicamente en el body de un editor de texto, por lo cual no puedo utilizar getElementByTagName por que se agregaría el contenido tanto en el body del sitio como en el del editor. Para mi mala suerte no tiene ningún ID el body del editor y para peor suerte no puedo editarlo para agregarle uno.

Noté que tiene dos atributo únicos, mas específicamente la etiqueta completa es así:
1
<body class="cke_show_borders" spellcheck="true" contenteditable="true">

Encontré otro código que obtiene los elementos por atributo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getAllElementsWithAttribute(attribute)
{
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++)
  {
    if (allElements[i].getAttribute(attribute))
    {
      // Element exists with attribute. Add to array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

Pero no tengo idea de cómo hacer...
1
document.getAllElementsWithAttribute('spellcheck').innerHTML

De antemano muchas gracias por leer el tema, saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

¿Cómo obtener un elemento por atributo?

Publicado por xve (1594 intervenciones) el 16/05/2014 08:05:59
Hola Vega, puedes utilizar en vez de getElementById() el getElementsByClassName(), el cual te permite hacer referencia a la clase cke_show_borders.

Te puede servir?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

¿Cómo obtener un elemento por atributo?

Publicado por Vega (16 intervenciones) el 16/05/2014 08:59:13
Hola xve, gracias por responder.

He probado así:
1
2
3
4
5
6
7
8
9
10
11
12
<html><head><title>Falso Chat</title>
<script type="text/javascript">
    function AgregarLineaDeTexto(TextoLinea) {
        document.getElementsByClassName("cke_show_borders").innerHTML += "<br>" + TextoLinea;  // Agrego nueva linea antes
    }
</script>
</head>
<body class="cke_show_borders" spellcheck="true" contenteditable="true">
<input type="button" value="Agregar 'Hola'" onClick="AgregarLineaDeTexto('Hola')">
<input type="button" value="Agregar 'Chau'" onClick="AgregarLineaDeTexto('Chau')">
<div id="texto_chat">Este texto no va a desaparecer...</div>
</body></html>

Pero a pesar de que la consola no me da ningún error ni advertencia, por alguna razón no funciona, es decir, no agrega el texto que debería agregar, de igual forma gracias por el dato, no conocía ese get :)

Por cierto también gracias por la respuesta de mi último tema en el foro de apache, si pude solucionar el problema pero ya no pude entrar al tema para comentarlo, nunca me carga xD

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

¿Cómo obtener un elemento por atributo?

Publicado por xve (1594 intervenciones) el 16/05/2014 10:42:06
Hola Vega, te pido disculpas, no te lo explique todo.

como estas haciendo referencia a clases de CSS, y en un pagina pueden haber varios con el mismo nombre, getElementsByClassName devuelve un array de valores.

prueba así:
1
document.getElementsByClassName("cke_show_borders")[0].innerHTML += "<br>" + TextoLinea;

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

¿Cómo obtener un elemento por atributo?

Publicado por Vega (16 intervenciones) el 16/05/2014 20:31:11
Muchas gracias, ha funcionado de maravilla, ahora ya podré trabajar en el siguiente paso B)

Para los que les sea útil éste es el código final:
1
2
3
4
5
6
7
8
9
10
11
12
<html><head><title>Falso Chat</title>
<script type="text/javascript">
    function AgregarLineaDeTexto(TextoLinea) {
        document.getElementsByClassName("cke_show_borders")[0].innerHTML += "<br>" + TextoLinea;  // Agrego nueva linea antes
    }
</script>
</head>
<body class="cke_show_borders" spellcheck="true" contenteditable="true">
<input type="button" value="Agregar 'Hola'" onClick="AgregarLineaDeTexto('Hola')">
<input type="button" value="Agregar 'Chau'" onClick="AgregarLineaDeTexto('Chau')">
<div id="texto_chat">Este texto no va a desaparecer...</div>
</body></html>

Saludos a todos, y gracias por la ayuda xve :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar