JavaScript - DOM

Funcionalidad
Obtener elementos HTML, por id, nombre, clase y selector.
Métodos Ejemplo
document.getElementById(id);
document.getElementsByTagName(nombreElemento);
document.getElementsByClassName(nombreClase);
document.querySelectorAll(nombreSelector);
 document.getElementById("p1");
document.getElementsByTagName("parrafo1");
document.querySelectorAll("p1.intro");
Funcionalidad
Cambiar el contenido, el valor de los atributos y el estilo de un elemento HTML
Métodos Ejemplo
element.innerHTML = "contenido";
element.attribute = "valorAtributo";
element.setAttribute(atributo, valor);
element.style.property = "nuevoEstilo";
 document.getElementById("p1").innerHTML = "Párrafo 1";
document.getElementById("imagen1").src = "paisaje.jpg";
document.getElementById("p1").style.color = "blue";
Funcionalidad
Adicionar, reemplazar y borrar elementos
Métodos Ejemplo
document.createElement(elemento);
document.removeChild(elemento);
document.appendChild(elemento);
document.replaceChild(elemento);
document.write(texto);
 var div1 = document.getElementById("div1");
var parrafo = document.createElement("p1");
div1.appendChild(parrafo);
document.write(Date());
Funcionalidad
Adicionar manejadores de eventos
Métodos Ejemplo
document.getElementById(id).onclick = function(){code}
 document.getElementById("miBoton").onclick = function(){alert("Hola Mundo")};
Funcionalidad
Otros métodos para capturar determinados elementos.
Métodos Ejemplo
document.body;
document.forms;
document.cookie;
document.doctype;
document.documentElement;
document.title;
document.URL;
document.links;
Entre otros.
 alert(document.body.innerHTML);
document.getElementById("p1").innerHTML =
"Cantidad de formas: " + document.forms.length;
alert(document.documentElement.innerHTML);
Nota. Información tomada de Refsnes Data (s.f.).

Dato importante: Recordemos que para seguir con los lineamientos de la "Separación por Capas", lo más recomendable es que tanto los archivos de estilos (*.css) y los archivos de scripts (*.js) se enlacen a las páginas HTML de manera externa, esto hará más fácil la evolución y el mantenimiento del Front-end de nuestra aplicación Web.