We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

 

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,