jueves, 24 de julio de 2014

DOM HTML Level 1


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.

Atributoslength
Métodositem, 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.

Atributostitle, referrer, domain, URL, body, images, applets, links, forms, anchors, cookie
Métodosopen, 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

Atributosid
Métodostitle, 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 />).

Atributosdisabled, 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 />).

Atributoscontent, httpEquiv, name, scheme

Interfaz HTMLBaseElement


Define la base de la URI para el documento (<base />).

Atributoshref, target

Interfaz HTMLIsIndexElement (DEPRECATED HTML 4.0)


Este elemento se utiliza para la entrada de texto de una línea (<isindex />).

Atributosform, promt

Interfaz HTMLStyleElement

Este elemento se utiliza para definir la información de estilos del documento  (<style></style>).

Atributosdisabled, media, type

Interfaz HTMLBodyElement


Representa el cuerpo del documento (<body></body>).

AtributosaLink, 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>).

Atributoselements, length, name, acceptCharset, action, enctype, method, target 
Métodossubmit, reset 

Interfaz HTMLSelectElement


Representa la selección de una opción (<select></select>).

Atributostype, selectedIndex, value, length, form, options, disabled, multiple, name, size, tabIndex
Métodosadd, remove, blur, focus

Interfaz HTMLOptGroupElement


Representa un grupo de opciones en divisiones lógicas (<optgroup></optgroup>).

Atributosdisabled, label

Interfaz HTMLOptionElement


Representa una opción (<option></option>).

Atributosform, defaultSelected, text, index, disabled, label, selected, value

Interfaz HTMLInputElement


Representa un control del formulario (<input />).

AtributosdefaultValue, defaultChecked, form, accept, accessKey, align, alt, checked, disabled, maxLength, name, readOnly, size, src, tabIndex, type, useMap, value
Métodosblur, focus, select, click

Interfaz HTMLTextAreaElement


Representa un campo de texto multilínea (<textarea></textarea>).

AtributosdefaultValue, form, accessKey, cols, disabled, name, readOnly, rows, tabIndex, type, value
Métodosblur, focus, select

Interfaz HTMLButtonElement


Representa un botón en el documento (<button></button>).

Atributosform, accessKey, disabled, name, tabIndex, type, value

Interfaz HTMLLabelElement


Etiqueta de un campo de formulario (<label></label>).

Atributosform, 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.

Atributosform, accessKey, align

Interfaz HTMLUListElement


Representa una lista desordenada (<ul></ul>).

Atributoscompact, type

Interfaz HTMLOListElement


Representa una lista ordenada (<ol></ol>).

Atributoscompact, 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.

Atributostype, 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 />).

Atributoscolor, face, size

Interfaz HTMLFontElement (DEPRECATED HTML 4.0)


Representa un cambio de fuente local (<font /><font />).

Atributoscolor, face, size

Interfaz HTMLHRElement


Crea una línea/regla horizontal (<hr />).

Atributosalign, noShade, size, width

Interfaz HTMLModElement


Notifica que una parte del documento se ha modificado. Esta interfaz está conformada por los elementos INS y DEL.

Atributoscite, dateTime

Interfaz HTMLAnchorElement


Representa un enlace (<a><a />).

AtributosaccessKey, charset, coords, href, hreflang, name, rel, rev, shape, tabIndex, target, type
Métodosblur, focus

Interfaz HTMLImageElement


Representa una imagen embebida (<img />).

AtributoslowSrc, 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 />).

Atributosform, 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 />).

Atributosname, type, value, valueType

Interfaz HTMLAppletElement (DEPRECATED HTML 4.0)


Representa un Applet Java embebido (<applet><applet />).

Atributosalign, alt, archive, code, codeBase, height, hspace, name, object, vspace, width

Interfaz HTMLMapElement


Representa un mapa de magen del lado cliente (<map><map />).

Atributosareas, name

Interfaz HTMLAreaElement


Representa un área en un mapa de imagen (<area />).

AtributosaccessKey, alt, coords, href, noHref, shape, tabIndex, target

Interfaz HTMLScriptElement


Represente sentencias de guión (<script><script />).

Atributostext, 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 />).

Atributosalign, ch, chOff, span, vAlign, width

Interfaz HTMLTableSectionElement


Conforma el el encabezado, cuerpo y pie de una tabla con los elementos THEAD, TBODY, y TFOOT.

Atributosalign, ch, chOff, vAlign,rows 
MétodosinsertRow, deleteRow 

Interfaz HTMLTableRowElement


Representa una fila en la tabla (<tr /><tr>).

AtributosrowIndex, sectionRowIndex, cells, align, bgColor, ch, chOff, vAlign
MétodosinsertCell, deleteCell

Interfaz HTMLTableCellElement


Esta interfaz es utilizada para representar tanto los elementos TH como los TD.

AtributoscellIndex, abbr, align, axis, bgColor, ch, chOff, colSpan, headers, height, noWrap, rowSpan, scope, vAlign, width 

Interfaz HTMLFrameSetElement


Crea una grilla de marcos (<frameset /><frameset>).

Atributoscols, rows

Interfaz HTMLFrameElement


Crea un marco en el documento (<frame />).

AtributosframeBorder, longDesc, marginHeight, marginWidth, name, noResize, scrolling, src

Interface HTMLIFrameElement


Representa una sub-ventana en línea dentro del documento (<iframe /><iframe>).

Atributosalign, 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