JavaScript getElementByid

Para acceder a DOM (el modelo de objeto de documento es un elemento de programación), puede aplicar varias técnicas. Uno de los métodos más útiles y populares es utilizar el método JavaScript GetElementById (). Todos los navegadores admiten JavaScript GetElementById () incluyendo Firefox, Internet Explorer, Chrome, etc.

Este artículo discutirá el método GetElementById () en JavaScript.

¿Qué es GetElementById () en JavaScript??

Para obtener un objeto de un elemento HTML con la ayuda de su "identificación", utilizar el "documento.getElementById ()" método.Es la técnica más rápida y eficiente para acceder a un elemento DOM. Se utiliza principalmente para manipular u obtener información de un elemento en su documento.

Nota: La identificación de un elemento debe ser única dentro de un documento HTML. Si hay muchos elementos con la misma ID en el documento HTML, el método proporciona el primer elemento que detecta. Emite nulo si no puede localizar un elemento en el DOM con la ID especificada.

Cómo usar getElementById () en JavaScript?

Siga la siguiente sintaxis para usar el método GetElementById ():

documento.getElementById (id);

Acepta un "identificación"Del elemento en el que necesita realizar alguna operación. Esta identificación agregada debe ser única en un documento y una caja sensible a.

Ejemplo 1: cambiar el color del texto

En este ejemplo, hacer clic en un botón hará que cambie el color del encabezado. Para hacerlo, crearemos encabezado usando

etiqueta y establecido "bienvenido"Como su identificación que ayudará a obtener este elemento:

Bienvenido a Linuxhint

Luego, cree un botón donde se adjunte el evento OnClick () que invocará la función definida por el usuario de JavaScript llamada "Changecolor ()", Dispara cuando se hace clic en el botón:

haga clic aquí

En el archivo JavaScript, defina una función llamada "Changecolor ()"Eso primero obtendrá el encabezado agregado usando el"getElementById ()Método "y luego llamar al atributo de estilo para establecer el color igual al"magenta":

function changeColor ()
documento.getElementById ("bienvenido").estilo.color = "magenta";

Se puede ver desde la salida cuando se hace clic en el botón, se cambia el color del encabezado agregado:

Ejemplo 2: Cambiar texto

Aquí, cambiaremos el texto completo del encabezado en el clic del botón. Primero, crearemos un encabezado usando

Etiqueta configurando ID como "chngtxt":

Bienvenido al Linuxhint

Luego, adjunte un evento OnClick () con el botón que llamará al "ChangEtext ()"Función para cambiar el texto agregado:

haga clic aquí

Definir el "ChangEtext ()"Funciona de tal manera que obtendrá el encabezado de encabezado usando el documento.Método GetElementById () y cambie su texto cuando se haga clic en el botón:

function ChangEtext ()
VAR demo = documento.getElementById ("chngtxt").innerhtml = "El mejor sitio web para habilidades de aprendizaje";

Como puede ver en la salida, cuando hacemos clic en el botón, se cambia el texto:

Hemos cubierto todos los detalles sobre el método GetElementById () en JavaScript.

Conclusión

GetElementById () es el método JavaScript utilizado para obtener el elemento DOM HTML. Es la técnica más eficiente para acceder a un elemento DOM. Busca el elemento con la ayuda de la identificación asignada. Si la identificación especificada no se encuentra en el DOM, devolverá nulo. Este manual discutió el método JavaScript getElementById () con ejemplos detallados.