document.getElementById

25/Jun/2007 JavaScript , 32 Comentarios

Si hubiera que decir cual ha sido el método más importante del lenguaje JavaScript desde su creación, creo que muchos coincidiríamos en que es document.getElementById. Dicho método nos permite obtener la referencia a un elemento de la página mediante el id de dicho elemento.

Por ejemplo, si tenemos una imagen representada por el siguiente código HTML:

  1. <img src="foto.jpg" id="mifoto"/>

Podríamos obtener una referencia a dicha imagen mediante el siguiente código JavaScript:

  1. <script type="text/javascript">
  2. foto=document.getElementById("mifoto")
  3. </script>

Una vez obtenida la referencia al elemento, podemos acceder a todas sus propiedades, ya sea para lectura o escritura. Por ejemplo, en este caso podríamos cambiar el origen (src) de la imagen, su alto/ancho,...

Una de las cosas que más puede sacar de quicio a las personas que lo utilizan es confundir mayúsculas con minúsculas. Si usamos getElementBYID o getElementByID o GETELEMENTBYID,... no nos funcionará.

En este caso vamos a utilizar esta función para obtener el contenido de un área de texto. A si que lo primero que haremos será crear un área de texto:

  1. <form action="">
  2. <textarea rows="20" cols="40" id="areadetexto">Texto del área de texto</textarea>
  3. </form>

Ahora, para acceder al área de texto, utilizaremos su id "areadetexto" y la función document.getElementById. Con el fin de hacerlo más interactivo, vamos a utilizar el código JavaScript en el evento onClick de un botón.

Veamos el código:

  1. <form action="">
  2. <textarea rows="20" cols="40" id="areadetexto">Texto del área de texto</textarea>
  3. <input type="button" value="Contenido del TextArea" onClick="javascript:alert(document.getElementById('areadetexto').value);">
  4. </form>

Vídeos sobre Javascript


32 comentarios en “document.getElementById”

Víctor Cuervo

Luis Graciano

Hola quiero que me ayuden a resolver el tema de netBeans:

Ingrese por teclado 200 número enteros , finalizando el proceso mostrar:

. El porcentaje de pares sin incluir al cero
. El mayor número
. La cantidad de ceros.

gracias , al momento por favor.

Víctor Cuervo

German

Gracias, excelente aporte. Me sirvio mucho.

Víctor Cuervo

Danilo

Hmm creo que deberian utilizar las bondades de HTML5 !!! pasesen un poco por la documentacion y creo que les caera genial a todos !! :3

Víctor Cuervo

Víctor Cuervo

@Claudia,

Lo mejor es que pidas ayuda en nuestro foro Javascript
http://www.dudasprogramacion.com/forum/javascript

Allí te ayudarán.

Víctor Cuervo

Claudia

Hola tengo este select y la siguiente función:

Seleccione
Autor
Co-autor

Seleccione
Autor
Co-autor

// deshabilitar: Autor
function disableCombos1()
{
Autor1 = document.getElementById(‘Autor1’);

if (Autor1.options[Autor1.selectedIndex].value == “Autor”)
{
document.getElementById(‘Principal2’).disabled = true;
}
else
{
document.getElementById(‘Principal2’).disabled = false;
}
}
//————

function disableCombos2()
{
Autor2 = document.getElementById(‘Autor2’);
//
if (Autor2.options[Autor2.selectedIndex].value == “Autor” )
{
document.getElementById(‘Principal1’).disabled = true;
}
else
{
document.getElementById(‘Principal1’).disabled = false;
}
}

// deshabilitar: Co-autor
function disable1()
{
Autor1 = document.getElementById(‘Autor1’);
//
if (Autor1.options[Autor1.selectedIndex].value == “Co-autor”)
{
document.getElementById(‘Senior2’).disabled = true;
}
else
{
document.getElementById(‘Senior2’).disabled = false;
}
}
//————————-
function disable2()
{
Autor2 = document.getElementById(‘Autor2’);
//
if (Autor2.options[Autor2.selectedIndex].value == “Co-autor”)
{
//Deshabilita
document.getElementById(‘Senior1’).disabled = true;
}
else
{
document.getElementById(‘Senior1’).disabled = false;
}
}

Todo el código me funciona muy bien en FireFox, mi problema es que no funciona en IExplorer, no es que me salga error, simplemente no funciona. Podrían ayudarme!
Gracias!!!

Víctor Cuervo

el verdor

Hola Pato
¿Estas usando alguna librería como JQuery o Prototype?
Si es así, la debes cargar y también debes informarte si la versión de la librería es compatible con la del navegador.

Víctor Cuervo

Pato

Tengo la siguiente función de un srcipt:
function init() {
obj = document.getElementById(‘firstItem’).value;
switchPaneState(obj.parentNode.nextSibling.firstChild,obj.parentNode.parentNode.parentNode.parentNode.parentNode,’tasks’);
}

En IE 7 no funciona pero en Firefox funciona sin ningún problema, por favor me pueden ayudar con alguna idea de como puedo solucionarlo

Víctor Cuervo

gabs

hola quiero cambia la forma de unos botones pero me borra todo el marco q hago para q lo demas no se mueva
cual es el comando?

Víctor Cuervo

david

Hola buen día, espero me puedan ayudar, esta es mi idea:
-Me gustaria hacer una interfaz en la que uno ponga su nombre de usuario y contraseña, y estos datos que uno puso en mi programa de alguna manera se puedan poner en la página web que a la persona le interesa loguearse por ejemplo (la pagina web ya es especifica no son varias)
si en la pagina web el ID para el campo de texto para usuario es: : usuario
y el ID del cuadro de texto en la página web para la contraseña es: contraseña

Si en mi programa pone el usuario su nombre de usuario y contraseña estos datos que puso de alguna manera puedan ser plasmados en el campo de texto de usuario y contraseña respectivamente en la pagina web. Lo que quiero es simplemente ver si es posible que se pueda tener una interaccion pues es mas bien para que lo haga un usuario desde su telefono movil y me parece que con ajax post lo puedo hacer pero no estoy seguro espero me puedan ayudar.

Víctor Cuervo

lady

oye me podrias explicar un poco mas sobre la utilizacion de getelementbyname es q aun se me dificulta po fis!graacias!

Víctor Cuervo

lady

oye me podrias explicar un poco mas sobre la utilizacion de getelementbyname

Víctor Cuervo

Jhobani

tengo el siguiente codigo para refrescar

function Refrescar(){
obj=document.getElementById(“cap”);
if (!obj) obj=window.document.all.cap;
if (obj){
obj.src=”paginas/PHP/captcha.php”;
}
}

……

lo probe el codigo en internet explorer 6 y si funciono perfectamente pero luego en 8 y no funciono y no entinendo no se si es por la version o ???

Víctor Cuervo

lineadecodigo

@jose,

Puedes seguir a Linea de Código en Facebook desde
http://www.facebook.com/LineaDeCodigo

Víctor Cuervo

jose

hola soy joseito mi febbook es joseito_junioe@hotmail.com

Víctor Cuervo

el_trocha

Hola a todos, me gustaria que me ayudaran a resolver esta duda:
¿ Por que no me reconoce ninguna funcion este script ?

function Enter(){

var v = document.getElementById(“comp”);
var a = v.value.lenght;

if( a > 2){

var s = document.getElementById(“idUser”);
var d = s.focus();

}
else{

var f = document.getElementById(“idPass”);
var g = f.focus();

}

}

Utilizo Netbeans y JSF, se que el programa accede al script con la llamada, por que he probado con un alert(“…”); para probar si entraba en el script y si lo hace. Sin embargo cuando escribo este script no funciona. He probado a poner alerts para que me indique hasta donde va leyendo, pero No lee ni la primera variable.

Ya no se que hacer. He probado con todo, cambiando las “” por ”, he probado con una sola variable y añadir el metodo junto con .value.lenght ….. y mil cosas mas.

Si se les ocurre algo, les agradecere la ayuda.

Un saludo

Víctor Cuervo

el verdor

Hola, tengo dos combos, y quiero saber cual de los dos es el que me lanza el evento, cuando hago, pareccido a esto:

function accion(i,v) {
if(i=1) i.background-color: #FFFFFF
else if(i=2) i.background-color: #000000
else i.background-color: #CCCCCC
}

blanco
negro

blanco
negro

la verdad es que no se si se pilla la idea, y tampoco se si va a tener mucha utilidad…

otro ejemplo parecido es este:, pero no hallo la forma de meter otro select:

// preload images
var img1 = new Image().src = “2.gif”
var img2 = new Image().src = “1.gif”
var img3 = new Image().src = “0.gif”

function setImage(imageSelect) {
theImageIndex = imageSelect.options[imageSelect.selectedIndex].value;
if (document.images)
document.images[0].src = eval(“img” + theImageIndex);
}

bien
mal

los gif , son bolitas, una blanca una verde y otra roja,
la verdad es q si se da a ver el codigo fuente se podran ver las soluciones , pero…. en eso estoy

muchas gracias

Víctor Cuervo

Paulo Arieu

Daniel:
Hola,no se entiende bien tu pregunta

Saludos

Víctor Cuervo

daniel

No se puede tomar el ID con mas elementos???

Ayudaaaa

danielgordillo65@gmail.com

Víctor Cuervo

paulo arieu

Hola,gracias por responder;ya me suscribi y copie el codigo. Espero su amable repsuetsa ya que he estado todo el fin de semana luchando con este script.
saludos cordiales

Víctor Cuervo

lineadecodigo

@paulo arieu,

Buenas, acabo de probarlo en un Google Chrome 2.0.172.43 y funciona perfectamente. Options es una colección que está recogida en DOM Level 1. Soportado por todos los navegadores importantes.

Vamos a hacer una cosa. Copiame el código en el foro de JavaScript y analizo a ver si podemos dar con el problema.

Víctor Cuervo

paulo arieu

hola,gracias por responderme rapido.
Esta opcion no me funciona con Chrome.
Como puedo hacer que funcione con estos otros navegadores?
Espero su respuesta
Saludos cordiales

Víctor Cuervo

lineadecodigo

@Paulo Arieu,

Tienes que indicar cual de las opciones quieres marcar. Es decir, pasar un índice a options. Quedaría de la siguiente manera:

document.getElementById(‘pais’).options[3].selected=true;

Así marcas la opción 4. Ya que empiezan desde el 0.

Apunto para escribir un artículo con este ejemplo. Espero poderlo tener pronto.

Víctor Cuervo

Paulo Arieu

Hola,necesito por favor, como asignar para Chrome,un valor en un objeto select en forma dinamica.

Este ejenmplo funciona con otros navegadores,pero no con Chrome.
document.getElementById(“pais”).options[ ].selected= true

Gracias.

Víctor Cuervo

daniel mendez cruz

si tienes razon en que no debo de usar el el bucle while porque solo hago un ciclo infinito gracias por eso en el y el parametro value lo utilizo para direccionar las opciones del selected al cual yo estoy pulsando

Víctor Cuervo

Paulo Arieu

Hola,como se modifica en tiempo de ejecucion el valor de un combobox,Yo uso el navegador Chrome.

Víctor Cuervo

lineadecodigo

@daniel mendez,

No debería de ir muy lento el programa. Algunas cosas:

1. No entiendo para que le pasas un parámetro value, que parece que no se usa.
2. En vez de un bucle while utiliza un if. No parece que iteres mucho.

De momento no se me ocurre mucho más.

Víctor Cuervo

daniel mendez

hola mucho gusto en conocerlos entre a este foro porque me parece que aqui me pueden dar una solucion a mi problema tengo la siguiente funcion :
function habilitar(value){
var nombrecompañia=document.getElementById(‘idNombre’).value;
var direccion =document.getElementById(‘iddireccion’).value;
var telefono =document.getElementById(‘idtelefono’).value;
document.getElementById(‘idinsertar’).disabled=true;

while(nombrecompañia != ” && direccion != ” && telefono!= ” ){
document.getElementById(‘idinsertar’).disabled=false;
}
}

y funciona y todo pero lo unico que esta mal es que hace muy lento el explorador necesito saber que parte me hizo falta para que no ocurra ese error de procesamiento de antemano muchas gracias.
posdata: esa funcion habilita un submit para loguear los campos a los que hago referencia en la funcion anterior

Víctor Cuervo

Dailier

Yo uso onkeypress para la validacion de caracteres extraños, pero no se activa cuando yo presiono el caracter extraño sino despues que presiono otra tecla..
Me podrian ayudar con eso…

Víctor Cuervo

Jose

Estoy estableciendo una especie de “arquitectura” de javascript que debe recoger todos los valores de los id’s de una página que se asienta sobre esta arquitectura, por lo que no se conoce estos id’s.
¿Existe alguna clase de propiedad/método/array donde se almacenen los nombres de los identificadores de una página?
Es decir, si tengo como puede obtener “primero” y “segundo”.
Una vez los tenga ya con un bucle podré acceder a sus valores y mostrarlos o trabajar con ellos.
Gracias

Víctor Cuervo

Omar

document.getElementById(‘areadetexto’).value no funciona en IE 7. En Mozilla Firefox funciona perfecto pero no todos los que miran nuestros sitios usan Firefox.

Alguna otra opción ?

Víctor Cuervo

roger

Tengo una funcion que rellena un combo con los numeros del año desde el 2007 hasta 1985 en javascript, el IE todo bien, pero en Firefox no funca, y no se como arreglarla…. ayuda por favor !!!!

ahora = new Date();
ahoraDay = ahora.getDate();
ahoraMonth = ahora.getMonth();
ahoraYear = 85; //año 1985
yaAno = ahora.getYear();

if (ahoraYear

document.write(rellenaAnyos(50));

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*