En la introducción de esta serie, dice: "Los elementos HTML son los nodos que conforman el Modelo de objetos del documento". Hablamos del tipo de nodos de los elementos. En esta sección, analizamos las APIs de elementos que permiten consultar esos nodos.
El DOM y el AOM
El DOM es una API para acceder a documentos y manipularlos. El DOM es el árbol de todos los nodos del documento. Algunos nodos pueden tener elementos secundarios, mientras que otros no. El árbol incluye elementos, junto con sus atributos y nodos de texto.
Las herramientas del navegador no proporcionan visualizaciones de árbol como la anterior, pero puedes ver los nodos en el inspector de elementos.
La representación de árbol que se puede inspeccionar en las herramientas para desarrolladores de navegadores es el árbol de accesibilidad. El AOM se basa del DOM; De manera similar, el árbol de accesibilidad contiene objetos que representan todos los elementos de marcado, los atributos y el texto nodos:
API de elementos HTML
La letra central del DOM es "object". Como en el ejemplo de los objetos person
o car
de la introducción a la programación orientada a objetos
cada nodo del árbol del documento es un objeto que se puede manipular con JavaScript.
El navegador proporciona muchas
APIs que proporcionan métodos, eventos y consultas y actualizaciones de propiedades compatibles de forma nativa.
Los nodos de los elementos contienen información sobre todos los atributos establecidos en el elemento. Puedes usar interfaces HTML para acceder
información sobre los atributos de un elemento. Por ejemplo, podemos usar HTMLImageElement.alt
.
Obtén los atributos alt
de todas las imágenes:
let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
console.log(imageInstance.alt);
});
Las interfaces HTML proporcionan más que solo acceso a los atributos de un elemento. puedes acceder a mucha más información. Podemos
busca el elemento HTMLElement.offsetHeight
de solo lectura para obtener la altura de cada sección de nuestra página en relación con el diseño.
let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
console.log(sectionInstance.offsetHeight);
});
Si el usuario cambia la orientación de su dispositivo o el ancho del viewport, la altura de cada <section>
y las propiedades del DOM se actualizarán automáticamente.
Las API de la interfaz HTML no se limitan a acceder a valores de atributos. El DOM proporciona estadísticas sobre el estado actual de la IU.
Las API HTML pueden acceder a toda esa información. Puedes acceder a la duración del video, desde donde se encuentra la vista de la reproducción actual,
y si el video (o audio) terminó de reproducirse con HTMLMediaElement.duration
,
HTMLMediaElement.currentTime
y
HTMLMediaElement.ended
, respectivamente.
Interfaces de elementos disponibles
La mayoría de los elementos HTML que vimos hasta ahora en esta serie, excepto algunos elementos de sección, tienen
una interfaz de DOM asociada. La interfaz base para todos los elementos se denomina correctamente Element.
El elemento HTMLElement
hereda del elemento y todos los elementos HTML
o interfaces de usuario heredadas de esta. Varios elementos similares implementan algunas interfaces específicas de elementos.
Las interfaces son las siguientes:
HTMLAnchorElement
:<a>
HTMLAreaElement
:<area>
HTMLAudioElement
:<audio>
HTMLBaseElement
:<base>
HTMLButtonElement
:<button>
HTMLCanvasElement
:<canvas>
HTMLDataElement
:<data>
HTMLDataListElement
:<datalist>
HTMLDetailsElement
:<details>
HTMLDialogElement
:<dialog>
HTMLEmbedElement
:<embed>
HTMLFieldSetElement
:<fieldset>
HTMLFormElement
:<form>
HTMLHtmlElement
:<html>
HTMLIFrameElement
:<iframe>
HTMLImageElement
:<img>
HTMLInputElement
:<input>
HTMLLabelElement
:<label>
HTMLLegendElement
:<legend>
HTMLLIElement
:<li>
HTMLLinkElement
:<link>
HTMLMapElement
:<map>
HTMLMediaElement
:<audio>
de<video>
HTMLMenuElement
:<menu>
HTMLMetaElement
:<meta>
HTMLMeterElement
:<meter>
HTMLModElement
:<ins>
de<del>
HTMLObjectElement
:<object>
HTMLOListElement
:<ol>
HTMLOptGroupElement
-<optgroup>
HTMLOptionElement
:<option>
HTMLOutputElement
:<output>
HTMLPictureElement
:<picture>
HTMLProgressElement
:<progress>
HTMLQuoteElement
:<q>
,<blockquote>
y<cite>
HTMLScriptElement
:<script>
HTMLSelectElement
:<select>
HTMLSlotElement
:<slot>
HTMLSourceElement
:<source>
HTMLStyleElement
:<style>
HTMLTableCellElement
:<td>
de<th>
HTMLTableColElement
:<col>
de<colgroup>
HTMLTableElement
:<table>
HTMLTableRowElement
:<tr>
HTMLTableSectionElement
:<thead>
,<tbody>
y<tfoot>
HTMLTemplateElement
:<template>
HTMLTextAreaElement
:<textarea>
HTMLTimeElement
:<time>
HTMLTitleElement
:<title>
HTMLTrackElement
:<track>
HTMLVideoElement
:<video>
La convención de nomenclatura es "HTML" seguido de un elemento o una agrupación de elementos en mayúsculas mediales, seguido de "Elemento", pero la parte del elemento o agrupación de elementos no sigue un patrón exacto. No se preocupe. No es necesario memorizarlos. Es importante saber que existen para que puedas buscarlos cuando lo necesites.
Si tienes una colección de elementos, también hay interfaces de colección. Por ejemplo, el
El método HTMLCollection.namedItem()
muestra el primer
elemento de la colección cuyo atributo id
o name
coincide con el parámetro, o un valor nulo si no coincide ningún elemento.
Más de 30 elementos no tienen una interfaz de DOM asociada que no sea HTMLElement
, incluidos <address>
, <article>
,
<section>
, <nav>
, <header>
, <footer>
, <aside>
y <hgroup>
. Muchos elementos que no admiten funciones
Los atributos no globales tienen interfaces específicas del elemento, como HTMLPElement
(el elemento <p>
) y HTMLUnknownElement
( <😃>
o cualquier otro elemento que no esté definido), pero esas interfaces no implementan ninguna propiedad ni método adicional.
además de las propiedades y los métodos heredados de HTMLElement
y no se enumeran anteriormente.
Métodos y propiedades de API redundantes
Si una interfaz tiene el mismo nombre de método o propiedad que la interfaz que hereda, la propiedad o el método heredados se reemplazan
la heredada. Cuando accedimos a las propiedades alt
y offsetHeight
anteriores con imageInstance.alt
y sectionInstance.offsetHeight
respectivamente, el código no identificaba a qué API se estaba accediendo.
Por lo general, como en estos dos ejemplos, esto no es un problema. Sin embargo, puede ser. Por ejemplo, HTMLCollection.length
es de solo lectura, mientras que la interfaz de la HTMLOptionsCollection
heredada
La propiedad length (que solo muestra la propiedad options
de <select>
) también se puede usar para establecer el tamaño de la colección.
Otras interfaces
Existen interfaces adicionales que permiten manipular las ubicaciones de las ramas de los nodos del DOM. La interfaz EventTarget
, que proporciona
con addEventListener()
y removeEventListener()
, la heredan las interfaces Node
y Window
. A su vez, las interfaces Element, Document y DocumentFragment (que vimos en los elementos personalizados) heredan de Node, mientras que la interfaz HTMLElement hereda de Element.
La interfaz node
Cada tipo de nodo del DOM se representa con una interfaz basada en Node
,
que brinda información y métodos relacionados con los elementos del árbol del DOM. La interfaz Node
permite consultar y agregar nodos al árbol de nodos.
El famoso "caminar del DOM" de Douglas Crockford usa el firstChild
de Node
y las propiedades nextSibling
.
const walk_the_DOM = function walk(node, callback) {
callback(node);
node = node.firstChild;
while (node) {
walk(node, callback);
node = node.nextSibling;
}
};
Utilizamos el appendChild()
de Node y
Métodos cloneNode()
para definir elementos personalizados
La interfaz de Node proporciona muchas propiedades y métodos útiles para consultar y manipular el DOM.
customElements.define('star-rating',
class extends HTMLElement {
constructor() {
super(); // Always call super first in constructor
const starRating = document.getElementById('star-rating-template').content;
const shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.appendChild(starRating.cloneNode(true));
}
});
El método attachShadow()
es un método del elemento.
interfaz de usuario. También hay una interfaz shadowRoot
para la
API de Shadow DOM renderizada por separado de un
árbol principal del DOM del documento.
Las interfaces Document
y HTMLDocument
La interfaz Document
hereda de Node
. Representa el
página web cargada en el navegador, ya sea que el documento sea HTML, SVG, XML, MathML o cualquier otro archivo. La interfaz Document
también
hereda de la interfaz HTMLDocument
.
document
permite un acceso rápido a los tipos de nodos y la capacidad de crear colecciones de tipos de elementos específicos, como
document.body
y document.styleSheets
. HTMLDocument permite acceder a información relevante para el documento que
no se encuentran en nodos HTML, como Document.location
,
Document.lastModified
y Document.Cookie
.
Hay varias APIs disponibles según las funciones que se muestran en la interfaz del documento, incluida la API de arrastrar y soltar.
y la API de FullScreen. Ambos se heredan de Element
.
La interfaz Window
La interfaz de Window incluye elementos disponibles globalmente más allá del DOM que se pueden usar para manipular el DOM. La ventana proporciona funciones, espacios de nombres, objetos y constructores documentados en JavaScript de MDN y Referencias del DOM.
La interfaz de Window es la API del objeto que contiene el documento. El objeto window
global es la ventana en la que
se esté ejecutando la secuencia de comandos. Cada pestaña del navegador contiene su propio objeto Window. La interfaz de Windows puede consultar el contenido de la pestaña
así como la ventana y el dispositivo generales. Por ejemplo, resizeTo()
se puede usar para cambiar el tamaño de la ventana del navegador, el elemento devicePixelRatio
proporciona acceso a los píxeles de pantalla del dispositivo. Cuando accedes a información sobre la pestaña,
en lugar del árbol del DOM que muestra la pestaña, es probable que la ventana sea la interfaz que buscas.
Hay varias APIs disponibles según las funciones que se muestran a través de la interfaz de Windows, incluidos los Web Workers. y las APIs de IndexedDB.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre las API de HTML.
¿Qué significa la O en DOM?
¿Qué interfaz puede ayudarte a encontrar información sobre la pestaña en la que se encuentra el contenido?