Nota: Algunas interfaces de la API DOM HTML Level 1 vistas en este post dejarón de utilizarse con las nuevas versiones de HTML. Cuando se haga referencia al término DEPRECATED se anuncia explícitamente que la interfaz es obsoleta. Para ver una lista completa de los atributos y métodos obsoletos en cada interfaz visite la página oficial de la especificación en el siguiente enlace DOM HTML Level 1.
La API DOM HTML Level 1 describe los objetos y métodos propios de los documentos HTML. Sus principales objetivos son los siguientes:
- Agregar la funcionalidad necesario a los documentos HTML y sus elementos.
- Abordar la compatibilidad hacia atrás con el "DOM Level 0"
- Proveer los mecanismos necesarios para las acciones regulares al trabajar con documentos HTML
Nótese que "DOM Level 0" no es formalmente una especificación, esto se refiere a las funcionalidades HTML ofrecidas en su tiempo por Netscape Navigator v3.0 y Microsoft Internet Explorer v3.0.
A continuación veremos cada una de las interfaces que hacen parte del API DOM HTML.
Interfaz HTMLCollection
Esta interfaz define simplemente una lista de nodos. Por conveniencia, los nodos representados en una colección HTML son actualizados a medida que se actualiza el documento.
| Atributos | length |
| Métodos | item, namedItem |
Interfaz HTMLDocument
Esta interfaz se refiere a la raíz del documento la cual contiene todos los demás elementos el el árbol DOM.
| Atributos | title, referrer, domain, URL, body, images, applets, links, forms, anchors, cookie |
| Métodos | open, close, write, writeln, getElementById, getElementsByName |
Interfaz HTMLElement
Todas las interfaces de elementos HTML derivan de esta interfaz. Algunos elementos HTML solo exponen los atributos básicos, esto deben ser representados entonces con una interfaz HTMLElement base. Estos elementos son los siguientes:
- HEAD
- especiales: SUB, SUP, SPAN, BDO
- fuente: TT, I, B, U, S, STRIKE, BIG, SMALL
- frase: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ACRONYM, ABBR
- lista: DD, DT
- NOFRAMES, NOSCRIPT
- ADDRESS, CENTER
| Atributos | id |
| Métodos | title, lang, dir, className |
Interfaz HTMLHtmlElement
Esta interfaz representa el elemento root del documento HTML (<html></html>) y solamente posee el atributo version.
Interfaz HTMLHeadElement
Contiene la información del encabezado del documento HTML (<head></head>) y solamente posee el atributo profile.
Interfaz HTMLLinkElement
El elemento link hace referencia a todos los recursos externos del documento web (<link />).
| Atributos | disabled, charset, href, hreflang, media, rel, rev, target, type |
Interfaz HTMLTitleElement
El elemento title representa el título del documento web (<title></title>) y solamente posee el atributo text.
Interfaz HTMLMetaElement
Contiene meta-información acerca del documento (<meta />).
| Atributos | content, httpEquiv, name, scheme |
Interfaz HTMLBaseElement
Define la base de la URI para el documento (<base />).
| Atributos | href, target |
Interfaz HTMLIsIndexElement (DEPRECATED HTML 4.0)
Este elemento se utiliza para la entrada de texto de una línea (<isindex />).
| Atributos | form, promt |
Interfaz HTMLStyleElement
Este elemento se utiliza para definir la información de estilos del documento (<style></style>).
| Atributos | disabled, media, type |
Interfaz HTMLBodyElement
Representa el cuerpo del documento (<body></body>).
| Atributos | aLink, background, bgColor, link, text, vLink |
Interfaz HTMLFormElement
Este elemento presenta un comportamiento similar a una colección HTML. Provee el acceso directo a los elementos de entrada (input) del formulario (<form></form>).
| Atributos | elements, length, name, acceptCharset, action, enctype, method, target |
| Métodos | submit, reset |
Interfaz HTMLSelectElement
Representa la selección de una opción (<select></select>).
| Atributos | type, selectedIndex, value, length, form, options, disabled, multiple, name, size, tabIndex |
| Métodos | add, remove, blur, focus |
Interfaz HTMLOptGroupElement
Representa un grupo de opciones en divisiones lógicas (<optgroup></optgroup>).
| Atributos | disabled, label |
Interfaz HTMLOptionElement
Representa una opción (<option></option>).
| Atributos | form, defaultSelected, text, index, disabled, label, selected, value |
Interfaz HTMLInputElement
Representa un control del formulario (<input />).
| Atributos | defaultValue, defaultChecked, form, accept, accessKey, align, alt, checked, disabled, maxLength, name, readOnly, size, src, tabIndex, type, useMap, value |
| Métodos | blur, focus, select, click |
Interfaz HTMLTextAreaElement
Representa un campo de texto multilínea (<textarea></textarea>).
| Atributos | defaultValue, form, accessKey, cols, disabled, name, readOnly, rows, tabIndex, type, value |
| Métodos | blur, focus, select |
Interfaz HTMLButtonElement
Representa un botón en el documento (<button></button>).
| Atributos | form, accessKey, disabled, name, tabIndex, type, value |
Interfaz HTMLLabelElement
Etiqueta de un campo de formulario (<label></label>).
| Atributos | form, accessKey, htmlFor |
Interfaz HTMLFieldSetElement
Este elemento organiza los controles de formulario de forma lógica (<fieldset></fieldset>) y posee solamente el atributo form.
Interfaz HTMLLegendElement
Representa el título de un elemento FIELDSET.
| Atributos | form, accessKey, align |
Interfaz HTMLUListElement
Representa una lista desordenada (<ul></ul>).
| Atributos | compact, type |
Interfaz HTMLOListElement
Representa una lista ordenada (<ol></ol>).
| Atributos | compact, start, type |
Interfaz HTMLDListElement
Representa una lista de definición (<dl></dl>) y solamente posee el atributo compact.
Interfaz HTMLDirectoryElement (DEPRECATED HTML 4.0)
Representa una lista de directorios (<dir></dir>) y solamente posee el atributo compact.
Interfaz HTMLMenuElement (DEPRECATED HTML 4.0)
Representa una lista de menú (<menu></menu>) y solamente posee el atributo compact.
Interfaz HTMLLIElement
Representa un elemento de lista.
| Atributos | type, value |
Interfaz HTMLBlockquoteElement
Representa una cita en bloque (<blockquote></blockquote>) y solamente posee el atributo cite.
Interfaz HTMLDivElement
Representa un contenedor genérico (<div></div>) y solamente posee el atributo align.
Interfaz HTMLParagraphElement
Representa un párrafo (<p></p>) y solamente posee el atributo align.
Interfaz HTMLHeadingElement
Se compone de los elementos h1 hasta h6 (<hX></hX) y solamente posee el atributo align.
Interfaz HTMLQuoteElement
Representa una cita (<q></q>) y solamente posee el atributo cite.
Interfaz HTMLPreElement
Representa texto preformateado (<pre></pre>) y solamente posee el atributo width.
Interfaz HTMLBREElement
Representa un salto de línea (<br />) y solamente posee el atributo clear.
Interfaz HTMLBaseFontElement (DEPRECATED HTML 4.0)
Representa la base fuente para el documento (<basefont />).
| Atributos | color, face, size |
Interfaz HTMLFontElement (DEPRECATED HTML 4.0)
Representa un cambio de fuente local (<font /><font />).
| Atributos | color, face, size |
Interfaz HTMLHRElement
Crea una línea/regla horizontal (<hr />).
| Atributos | align, noShade, size, width |
Interfaz HTMLModElement
Notifica que una parte del documento se ha modificado. Esta interfaz está conformada por los elementos INS y DEL.
| Atributos | cite, dateTime |
Interfaz HTMLAnchorElement
Representa un enlace (<a><a />).
| Atributos | accessKey, charset, coords, href, hreflang, name, rel, rev, shape, tabIndex, target, type |
| Métodos | blur, focus |
Interfaz HTMLImageElement
Representa una imagen embebida (<img />).
| Atributos | lowSrc, name, align, alt, border, height, hspace, isMap, longDesc, src, useMap, vspace, width |
Interfaz HTMLObjectElement
Representa un objeto genérico embebido en el documento (<object><object />).
| Atributos | form, code, align, archive, border, codeBase, codeType, data, declare, height, hspace, name, standby, tabIndex, type, useMap, vspace, width |
Interfaz HTMLParamElement
Representa los parámetros definidos para los elementos de tipo OBJECT (<param />).
| Atributos | name, type, value, valueType |
Interfaz HTMLAppletElement (DEPRECATED HTML 4.0)
Representa un Applet Java embebido (<applet><applet />).
| Atributos | align, alt, archive, code, codeBase, height, hspace, name, object, vspace, width |
Interfaz HTMLMapElement
Representa un mapa de magen del lado cliente (<map><map />).
| Atributos | areas, name |
Interfaz HTMLAreaElement
Representa un área en un mapa de imagen (<area />).
| Atributos | accessKey, alt, coords, href, noHref, shape, tabIndex, target |
Interfaz HTMLScriptElement
Represente sentencias de guión (<script><script />).
| Atributos | text, htmlFor, event, charset, defer, src, type |
Interfaz HTMLTableElement
Representa una tabla con información tabular en el documento.
Atributos
|
caption, tHead, tFoot, rows, tBodies, align, bgcolor, border, cellPading, cellSpacing, frame, rules, summary, width
|
Métodos
|
createTHead, deleteTHead, createTFoot, deleteTFoot createCaption, deleteCaption, insertRow, deleteRow
|
Interfaz HTMLTableCaptionElement
Representa el título de la tabla (<caption><caption />) y solamente posee el atributo align.
Interfaz HTMLTableColElement
Reagrupa los elementos con COL y COLGROUP (<col />).
| Atributos | align, ch, chOff, span, vAlign, width |
Interfaz HTMLTableSectionElement
Conforma el el encabezado, cuerpo y pie de una tabla con los elementos THEAD, TBODY, y TFOOT.
| Atributos | align, ch, chOff, vAlign,rows |
| Métodos | insertRow, deleteRow |
Interfaz HTMLTableRowElement
Representa una fila en la tabla (<tr /><tr>).
| Atributos | rowIndex, sectionRowIndex, cells, align, bgColor, ch, chOff, vAlign |
| Métodos | insertCell, deleteCell |
Interfaz HTMLTableCellElement
Esta interfaz es utilizada para representar tanto los elementos TH como los TD.
| Atributos | cellIndex, abbr, align, axis, bgColor, ch, chOff, colSpan, headers, height, noWrap, rowSpan, scope, vAlign, width |
Interfaz HTMLFrameSetElement
Crea una grilla de marcos (<frameset /><frameset>).
| Atributos | cols, rows |
Interfaz HTMLFrameElement
Crea un marco en el documento (<frame />).
| Atributos | frameBorder, longDesc, marginHeight, marginWidth, name, noResize, scrolling, src |
Interface HTMLIFrameElement
Representa una sub-ventana en línea dentro del documento (<iframe /><iframe>).
| Atributos | align, frameBorder, height, longDesc, marginHeight, marginWidth, name, scrolling, src, width |
De seguro el lector ya habrá visto antes la mayoría de las anteriores interfaces en cursos básicos de HTML. El DOM HTML Leven 1 define formalmente los elementos HTML derivándolos de interfaces adecuadas para su posterior tratamiento. En resumen, podemos decir que cualquier introducción o curso intermedio de HTML hará referencia a las interfaces vistas anteriormente de forma mucho más transparente y sencilla para el programador, sin tanta formalidad y utilizando métodos empíricos más que teóricos. De cualquier forma, un programador que desee especializarse en el diseño web deberá pasar por algún momento de su vida por este interesante tema.
En una próxima entrega, veremos ejemplos prácticos de cómo podemos utilizar las interfaces más importantes vistas en este post. Hasta la próxima!.
Referencias
- Document Object Model (HTML) Level 1. (1998, October 1). In World Wide Web Consortium (W3C). Retrieved 22:48, June 5, 2014, from http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html
