los Document método getElementById() devuelve un Element objeto que representa el elemento cuyo id propiedad coincide con el especificado string. Dado que los ID de elementos deben ser únicos si se especifican, son una forma útil de obtener acceso rápidamente a un elemento específico.

Si necesita acceder a un elemento que no tiene una ID, puede usar querySelector() para encontrar el elemento usando cualquier selector.

Sintaxis

var element = document.getElementById(id);

Parámetros

id
El ID del elemento que se va a ubicar. La identificación distingue entre mayúsculas y minúsculas string que es único dentro del documento; solo un elemento puede tener un ID determinado.

Valor devuelto

Un Element objeto que describe el objeto del elemento DOM que coincide con el ID especificado, o null si no se encontró ningún elemento coincidente en el documento.

Ejemplo

HTML

<html><head><title>getElementById exampletitle>head><body><pid="para">Some text herep><buttononclick="changeColor('blue');">bluebutton><buttononclick="changeColor('red');">redbutton>body>html>

JavaScript

functionchangeColor(newColor)var elem = document.getElementById('para');
  elem.style.color = newColor;

Resultado

Notas de uso

La capitalización de "Id" en el nombre de este método debe sea ​​correcto para que el código funcione; getElementByID() es no válido y no funcionará, por muy natural que parezca.

A diferencia de otros métodos de búsqueda de elementos como Document.querySelector() y Document.querySelectorAll(), getElementById() solo está disponible como método de la document objeto, y no disponible como método en todos los objetos de elementos del DOM. Debido a que los valores de ID deben ser únicos en todo el documento, no hay necesidad de versiones “locales” de la función.

Ejemplo

doctypehtml><html><head><metacharset="UTF-8"><title>Documenttitle>head><body><divid="parent-id"><p>hello word1p><pid="test1">hello word2p><p>hello word3p><p>hello word4p>div><script>var parentDOM = document.getElementById('parent-id');var test1 = parentDOM.getElementById('test1');//throw error//Uncaught TypeError: parentDOM.getElementById is not a functionscript>body>html>

Si no hay ningún elemento con el dado id, esta función devuelve null. Tenga en cuenta que el id El parámetro distingue entre mayúsculas y minúsculas, por lo que document.getElementById("Main") volverá null en lugar del elemento

porque “M” y “m” son diferentes para los propósitos de este método.

Elementos que no están en el documento no son buscados por getElementById(). Al crear un elemento y asignarle un ID, debe insertar el elemento en el árbol del documento con Node.insertBefore() o un método similar antes de poder acceder a él con getElementById():

var element = document.createElement('div');
element.id ='testqq';var el = document.getElementById('testqq');// el will be null!

Documentos que no son HTML. La implementación DOM debe tener información que diga qué attributes son de tipo ID. Los atributos con el nombre “id” no son de tipo ID a menos que así se definan en la DTD del documento. los id attribute se define como de tipo ID en los casos comunes de XHTML, XUL, y otra. Implementaciones que desconozco si attributes son de tipo ID o no se espera que regresen null.

Especificaciones

Especificación Estado Comentario
Especificación de nivel 1 del modelo de objetos de documento (DOM)
La definición de ‘getElementById’ en esa especificación.		 Obsoleto Definición inicial de la interfaz
Especificación básica de nivel 2 del modelo de objetos de documento (DOM)
La definición de ‘getElementById’ en esa especificación.		 Obsoleto Reemplazar DOM 1
Modelo de objeto de documento (DOM) Especificación básica de nivel 3
La definición de ‘getElementById’ en esa especificación.		 Obsoleto Reemplazar DOM 2
DOM
La definición de ‘getElementById’ en esa especificación.		 Estándar de vida Tiene la intención de reemplazar DOM 3

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
getElementById 1 12 1 5.5 7 1 1 18 4 10.1 1 1.0

Ver también

  • Document referencia para otros métodos y propiedades que puede utilizar para obtener referencias a elementos en el documento.
  • Document.querySelector() para selectores a través de consultas como 'div.myclass'
  • xml: id – tiene un método de utilidad para permitir getElementById() para obtener ‘xml: id’ en documentos XML (como los devueltos por llamadas Ajax)