document.getElementById

Devuelve una referencia al elemento por su ID.

Sintaxis

js
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
<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

js
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

html
<!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():

js
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.

Especificaciones

Specification
DOM Standard
# ref-for-dom-nonelementparentnode-getelementbyid②

Compatibilidad del Navegador

BCD tables only load in the browser

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.