MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey-2018-1

 

Devuelve una referencia al elemento por su ID.

Sintaxis

elemento = document.getElementById(id);

Parámetros

id
Es una cadena sensible a mayúsculas referida al ID único del elemento buscado.

Valor Retornado

element
Es una referencia a un objeto Element, o null si un elemento con el ID especificado no se encuentra en el documento.

Ejemplo

HTML

<html>
<head>
   <title>Ejemplo getElementById</title>
</head>
<body>
   <p id="para">Cualquier texto acá</p>
   <button onclick="changeColor('blue');">Azul</button>
   <button onclick="changeColor('red');">Rojo</button>
</body>
</html>

JavaScript

function changeColor(newColor) {
   var elem = document.getElementById('para');
   elem.style.color = newColor;
}

Resultado

Notas

Los usuarios nuevos deberían notar que escribir en mayúsculas 'Id' en el nombre de este método debe ser corregida para que el código sea válido - 'getElementByID' no funcionará a pesar de que parezca natural.

A diferencia de otros métodos similares, getElementById sólo está disponible como un método del objeto global document, y no se encuentra disponible como un método en todos los objetos  del DOM. Como los valores ID deben ser únicos a traves del documento, no existe necesidad para versiones "locales" de la función.

Ejemplo

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Documento</title>
</head>
<body>
    <div id="parent-id">
        <p>Hola Mundo 1</p>
        <p id="test1">Hola Mundo 2</p>
        <p>Hola palabra 3</p>
        <p>Hola palabra 4</p>
    </div>
    <script>
        var parentDOM = document.getElementById('parent-id');
        var test1=parentDOM.getElementById('test1');
        //lanza error
        //Uncaught TypeError: parentDOM.getElementById is not a function
    </script>
</body>
</html>

Si no existe un elemento con la id solicitada, esta función devuelve null. Note que el parámetro id es sensible a mayúsculas, así que document.getElementById("Main") devolverá null dentro del elemento <div id="main"> porque "M" y "m" son diferentes para los propósitos de este método.

Elementos que no se encuentren en el documento no serán buscados por getElementById(). Cuando se cree un elemento y se le asigne un ID, debe insertar el elemento dentro del árbol del documento con Node.insertBefore() u otro método similar antes de que se pueda acceder a el con getElementById():

var element = document.createElement("div");
element.id = 'testqq';
var el = document.getElementById('testqq'); // el será null!

Documentos no-HTML. La implementación de DOM debe tener información que diga que atributos son del tipo ID. Los atributos con el nombre "id" son son del tipo ID a menos que se los defina en el DTD del documento. El atributo id es definido para ser del tipo ID en los casos comunes de XHTML, XUL,  y otros. Las implementaciones que no sepan si los atributos son o no del tipo ID se espera que retornen null.

Especificación

Especificación Status Comentarios
Document Object Model (DOM) Level 1 Specification
La definición de 'getElementById' en esta especificación.
Obsolete Definición inicial para la interfase
Document Object Model (DOM) Level 2 Core Specification
La definición de 'getElementById' en esta especificación.
Obsolete Supersede DOM 1
Document Object Model (DOM) Level 3 Core Specification
La definición de 'getElementById' en esta especificación.
Obsolete Supersede DOM 2
DOM
La definición de 'getElementById' en esta especificación.
Living Standard Intend to supersede DOM 3

Compatibilidad con navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 o anterior) 5.5 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0) 6.0 6.0 1.0

Ver también

  • La referencia document para otros métodos y propiedades que se pueden usar para obtener referencias a elementos en el documento.
  • document.querySelector() para selectores via consultas como 'div.myclass'
  • xml:id - tiene un método utilitario para permitir que getElementById() obtenga 'xml:id' en documentos XML documents (como los retornados por llamadas Ajax.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Enesimus, jlpindado, pclifecl, OLiiver, fscholz, teoli, tuxisma, Juan c c q
 Última actualización por: Enesimus,