1

Estoy intentando hacer unas cosillas con DOM y se me ha planteado un problema al que , a priori , no encuentro solucion .

Dado un codigo HTML cualquiera , me gustaria obtener el tipo de elemento (div,button,table...) y su posicion.

Obtener el tipo de elemento con el target es facil , su posicion no tanto.

Pongo un ejemplo :

Si yo pincho en esta lista "Coffe" , con el target obtengo "LI" que es el objeto de Coffe , hasta ahi perfecto , pero ¿Como puedo yo trabajar con ese objeto LI en concreto ? Me refiero , como puedo , por ejemplo , modificar su contenido ?

Porque para modificar su contenido tengo varias opciones :

  • document.getElementsByTagName("tag")[posicion] : Y claro no tengo la posicion.
  • document.getElementById("id").innerHTML :Estoy trabajando con html sin id's.

¿Alguna idea? ¿Deberia de poner obligatoriamente id's? Me parece un atraso.

Muchas gracias de nuevo.

  if (e.srcElement){
	  tag = e.srcElement.tagName;
  }else{ (e.target)
  	  tag = e.target.type;
  }
 
  console.log("El elemento selecionado ha sido " + tag);
	<ul> <!-- Primer ul -->
		  <li>Coffee</li>
			<ul> <!-- Segundo ul -->
				<li>Beer</li>
				   <ul> <!-- Tercer ul -->
					<li>Coffee</li>
					<li>Tea</li>
					<li>Milk</li>
				  </ul>
				<li>Cola</li>
				<li>Water</li>
			</ul>	
		  <li>Juice</li>
		  <li>Wine</li>
	</ul>

2
  • ¿Si el elemento que te interesa no tiene id, que otro criterio podrías usar para distinguirlo de otros? el 13 may. 2018 a las 14:45
  • Veo que buscas las mismas respuestas que yo @EdwinDalorzo.
    – Illidan
    el 13 may. 2018 a las 14:54

1 respuesta 1

1

Si estas pudiendo obtener event.target.type es porque ya tienes acceso al objeto que recibió el evento (en este caso event.target). Por lo tanto puedes manipular dicho objeto haciendo por ejemplo event.target.innerText = "Seleccionado";.

function cambiar(event) {
  var tag = event.srcElement ? event.srcElement.tagName : event.target.type;
  document.getElementById('seleccionado').innerText = "El elemento selecionado ha sido " + tag;
  event.target.innerHTML += "<ul><li>Agregado</li></ul>";
}
<div id="seleccionado"></div>
<ul onclick="cambiar(event)">
  <!-- Primer ul -->
  <li>Coffee</li>
  <ul>
    <!-- Segundo ul -->
    <li>Beer</li>
    <ul>
      <!-- Tercer ul -->
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <li>Cola</li>
    <li>Water</li>
  </ul>
  <li>Juice</li>
  <li>Wine</li>
</ul>

2
  • Muchisimas gracias .Si me lo permites , me gustaria hacerte una pregunta mas .¿De que manera puedo por ejemplo añadir un nuevo LI al objeto ya selecionado ? Porque tag no guarda nada y no puedo pasar directamente el event.target an appendChild . Gracias de nuevo
    – Illidan
    el 13 may. 2018 a las 16:43
  • Con este cambio puedes agregar sub-niveles. Siempre el Html que agregas tiene que ser correcto, de lo contrario, no se muestra bien o ni aparece. Por ejemplo un <li> tiene que ser hijo de un <ul> o un <ol>.
    – derloopkat
    el 13 may. 2018 a las 18:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.