Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

DOM

Resumen

El Modelo de Objetos de Documento (Document Object Model o DOM) es una interfaz de programación de aplicaciones (API) para documentos con sintaxis de etiquetas como el HTML, SVG, MathML y XML. El DOM proporciona una representación de un documento estructurada lógicamente y un conjunto de Objetos y Métodos para la manipulación de esa estructura.

Explora nuestros documentos sobre el DOM

Material didáctico del DOM

Tutoriales y artículos didácticos para que aprendas la manipulación del DOM desde la base.

Eventos

Una guía de referencia de los eventos fundamentales del DOM disponibles.

Métodos

Una guía de referencia de los métodos para la manipulación del DOM disponibles.

Nota: Si eres completamente nuevo en el desarrollo web, puede que quieras revisar Desarrollo web para principiantes.

Antecedentes

Cuando el navegador analiza un documento etiquetado, éste lo convierte en una estructura de árbol llamada el modelo de objetos del documento o DOM. Dicho modelo puede ser utilizado para acceder y manipular los elementos existentes en el documento o crear otros elementos nuevos, un conjunto de actividades esenciales para crear funcionalidades dinámicas en la página.

  • Primera versión: Publicada en 1997 cuando los fabricantes de navegadores que participan en el W3C decidieron ponerse de acuerdo en un solo modelo de objetos de documento estandarizado para hacer la creación de código multi-navegador menos que una pesadilla.

  • Versión estable actual: El DOM nivel 3 es la versión más estable y cuya especificación está dividida en diferentes partes, todas las cuales han alcanzado el estado de recomendación. Puedes encontrar una lista de todas las publicaciones del DOM en Informes técnicos del DOM.

  • Trabajo actual y futuro: El DOM nivel 4 es la versión naciente del DOM en la que se está trabajando actualmente.

Contribuir con el desarrollo del DOM

El DOM está siendo desarrollado por el Grupo de Trabajo de Aplicaciones Web; consulta sus listas de correo para conocer o participar en la discusión y contribuir con ideas.

Indice de todos los temas del DOM

||
|dom/AnimationEvent|dom/AnimationEvent/animationName|dom/AnimationEvent/elapsedTime|
|dom/AnimationEvent/pseudoElement|dom/Attr|dom/BeforeUnloadEvent|
|dom/BeforeUnloadEvent/returnValue|dom/CSSFontFaceRule|dom/CharacterData|
|dom/CharacterData/appendData|dom/CharacterData/data|dom/CharacterData/deleteData|
|dom/CharacterData/insertData|dom/CharacterData/length|dom/CharacterData/replaceData|
|dom/CharacterData/substringData|dom/ClipboardData|dom/CloseEvent|
|dom/CloseEvent/code|dom/CloseEvent/reason|dom/CloseEvent/wasClean|
|dom/Comment|dom/CompositionEvent|dom/CompositionEvent/data|
|dom/CompositionEvent/locale|dom/CustomEvent|dom/CustomEvent/detail|
|dom/DOMError|dom/DOMError/message|dom/DOMError/name|
|dom/DOMException|dom/DOMException/message|dom/DOMSettableTokenList|
|dom/DOMTokenList|dom/DOMTokenList/add|dom/DOMTokenList/contains|
|dom/DOMTokenList/length|dom/DOMTokenList/remove|dom/DOMTokenList/toggle|
|dom/DataTransfer|dom/DataTransfer/clearData|dom/DataTransfer/dropEffect|
|dom/DataTransfer/effectAllowed|dom/DataTransfer/files|dom/DataTransfer/getData|
|dom/DataTransfer/items|dom/DataTransfer/setData|dom/DataTransfer/setDragImage|
|dom/DataTransfer/types|dom/Document|dom/Document/activeElement|
|dom/Document/adoptNode|dom/Document/body|dom/Document/characterSet|
|dom/Document/charset|dom/Document/close|dom/Document/cookie|
|dom/Document/createAttribute|dom/Document/createAttributeNS|dom/Document/createCDATASection|
|dom/Document/createComment|dom/Document/createDocumentFragment|dom/Document/createElement|
|dom/Document/createElementNS|dom/Document/createEvent|dom/Document/createNodeIterator|
|dom/Document/createProcessingInstruction|dom/Document/createRange|dom/Document/createTextNode|
|dom/Document/createTreeWalker|dom/Document/defaultCharset|dom/Document/defaultView|
|dom/Document/designMode|dom/Document/doctype|dom/Document/documentElement|
|dom/Document/domain|dom/Document/elementFromPoint|dom/Document/exitFullscreen|
|dom/Document/forms|dom/Document/fullscreenElement|dom/Document/fullscreenEnabled|
|dom/Document/getElementById|dom/Document/getElementsByClassName|dom/Document/getElementsByName|
|dom/Document/getElementsByTagName|dom/Document/getElementsByTagNameNS|dom/Document/getNamedFlows|
|dom/Document/hasFocus|dom/Document/head|dom/Document/hidden|
|dom/Document/images|dom/Document/implementation|dom/Document/importNode|
|dom/Document/inputEncoding|dom/Document/lastModified|dom/Document/linkColor|
|dom/Document/links|dom/Document/open|dom/Document/readyState|
|dom/Document/referrer|dom/Document/register|dom/Document/releaseCapture|
|dom/Document/rowenter|dom/Document/rowexit|dom/Document/rowsdelete|
|dom/Document/rowsinserted|dom/Document/scripts|dom/Document/scroll|
|dom/Document/select|dom/Document/selectionchange|dom/Document/selectstart|
|dom/Document/start|dom/Document/stop|dom/Document/storage|
|dom/Document/storagecommit|dom/Document/title|dom/Document/visibilityState|
|dom/Document/visibilitychange|dom/Document/vlinkColor|dom/Document/write|
|dom/Document/writeln|dom/Document/xmlEncoding|dom/Document/xmlStandalone|
|dom/Document/xmlVersion|dom/DocumentType|dom/DocumentType/name|
|dom/DocumentType/publicId|dom/DocumentType/systemId|dom/DomTokenList/item|
|dom/DragEvent|dom/DragEvent/dataTransfer|dom/DragEvent/drag|
|dom/DragEvent/dragend|dom/DragEvent/dragenter|dom/DragEvent/dragleave|
|dom/DragEvent/dragover|dom/DragEvent/dragstart|dom/DragEvent/drop|
|dom/DragEvent/initDragEvent|dom/Element|dom/Element/RangeException|
|dom/Element/change|dom/Element/childElementCount|dom/Element/children|
|dom/Element/classList|dom/Element/code|dom/Element/createControlRange|
|dom/Element/cuechange|dom/Element/durationchange|dom/Element/emptied|
|dom/Element/ended|dom/Element/entities|dom/Element/error|
|dom/Element/firstElementChild|dom/Element/getAdjacentText|dom/Element/getAttribute|
|dom/Element/getAttributeNS|dom/Element/getAttributeNode|dom/Element/getAttributeNodeNS|
|dom/Element/hasAttribute|dom/Element/hasAttributeNS|dom/Element/hashchange|
|dom/Element/help|dom/Element/htmlText|dom/Element/inRange|
|dom/Element/input|dom/Element/insertAdjacentHTML|dom/Element/internalSubset|
|dom/Element/isEqual|dom/Element/isTextEdit|dom/Element/item|
|dom/Element/lastElementChild|dom/Element/layoutcomplete|dom/Element/load|
|dom/Element/loadeddata|dom/Element/loadedmetadata|dom/Element/loadstart|
|dom/Element/losecapture|dom/Element/media|dom/Element/move|
|dom/Element/moveend|dom/Element/movestart|dom/Element/nextElementSibling|
|dom/Element/notations|dom/Element/offline|dom/Element/oneTimeOnly|
|dom/Element/onerror|dom/Element/online|dom/Element/onload|
|dom/Element/onloadend|dom/Element/onloadstart|dom/Element/onprogress|
|dom/Element/ownerElement|dom/Element/page|dom/Element/parent|
|dom/Element/parentElement|dom/Element/parentTextEdit|dom/Element/paste|
|dom/Element/pause|dom/Element/play|dom/Element/playing|
|dom/Element/previousElementSibling|dom/Element/propertychange|dom/Element/ratechange|
|dom/Element/readyState|dom/Element/readystatechange|dom/Element/releasePointerCapture|
|dom/Element/removeAttribute|dom/Element/removeAttributeNS|dom/Element/removeAttributeNode|
|dom/Element/requestFullscreen|dom/Element/requestPointerLock|dom/Element/reset|
|dom/Element/resize|dom/Element/resizeend|dom/Element/resizestart|
|dom/Element/result|dom/Element/scrollByLines|dom/Element/scrollByPages|
|dom/Element/scrollIntoView|dom/Element/scrollIntoViewIfNeeded|dom/Element/seeked|
|dom/Element/seeking|dom/Element/setAttribute|dom/Element/setAttributeNS|
|dom/Element/setAttributeNode|dom/Element/setAttributeNodeNS|dom/Element/setPointerCapture|
|dom/Element/size|dom/Element/stalled|dom/Element/submit|
|dom/Element/suspend|dom/Element/systemLanguage|dom/Element/timeupdate|
|dom/Element/type|dom/Element/unload|dom/Element/volumechange|
|dom/Element/waiting|dom/Error|dom/Error/colno|
|dom/Error/initErrorEvent|dom/Error/lineno|dom/Event|
|dom/Event/DOMContentLoaded|dom/Event/afterprint|dom/Event/afterupdate|
|dom/Event/beforeactivate|dom/Event/beforecopy|dom/Event/beforecut|
|dom/Event/beforedeactivate|dom/Event/beforeeditfocus|dom/Event/beforepaste|
|dom/Event/beforeprint|dom/Event/beforeunload|dom/Event/beforeupdate|
|dom/Event/bounce|dom/Event/bubbles|dom/Event/cancelable|
|dom/Event/cellchange|dom/Event/change|dom/Event/contextmenu|
|dom/Event/controlselect|dom/Event/copy|dom/Event/currentTarget|
|dom/Event/cut|dom/Event/dataavailable|dom/Event/datasetchanged|
|dom/Event/datasetcomplete|dom/Event/deactivate|dom/Event/defaultPrevented|
|dom/Event/error|dom/Event/errorupdate|dom/Event/eventPhase|
|dom/Event/filterchange|dom/Event/finish|dom/Event/initEvent|
|dom/Event/isTrusted|dom/Event/preventDefault|dom/Event/stopImmediatePropagation|
|dom/Event/stopPropagation|dom/Event/target|dom/Event/timeStamp|
|dom/Event/type|dom/EventException|dom/EventTarget|
|dom/EventTarget/addEventListener|dom/EventTarget/dispatchEvent|dom/EventTarget/removeEventListener|
|dom/FocusEvent|dom/FocusEvent/blur|dom/FocusEvent/focus|
|dom/FocusEvent/focusin|dom/FocusEvent/focusout|dom/FocusEvent/initFocusEvent|
|dom/FormData|dom/FormData/append|dom/HTMLAllCollection|
|dom/HTMLAnchorElement|dom/HTMLAnchorElement/select|dom/HTMLAnchorElement/text|
|dom/HTMLAppletElement|dom/HTMLAppletElement/object|dom/HTMLAreaElement|
|dom/HTMLAudioElement|dom/HTMLBGSoundElement|dom/HTMLBRElement|
|dom/HTMLBaseElement|dom/HTMLBaseElement/replaceAdjacentText|dom/HTMLBaseFontElement|
|dom/HTMLBlockElement|dom/HTMLBodyElement|dom/HTMLButtonElement|
|dom/HTMLCanvasElement|dom/HTMLCollection|dom/HTMLCollection/item|
|dom/HTMLCollection/length|dom/HTMLCollection/namedItem|dom/HTMLDDElement|
|dom/HTMLDListElement|dom/HTMLDTElement|dom/HTMLDataElement|
|dom/HTMLDirectoryElement|dom/HTMLDivElement|dom/HTMLDocumentCompatibleInfo|
|dom/HTMLElement|dom/HTMLElement/abort|dom/HTMLElement/attribute|
|dom/HTMLElement/blur|dom/HTMLElement/canHaveHTML|dom/HTMLElement/cellIndex|
|dom/HTMLElement/className|dom/HTMLElement/clearAttributes|dom/HTMLElement/click|
|dom/HTMLElement/clientHeight|dom/HTMLElement/clientLeft|dom/HTMLElement/clientTop|
|dom/HTMLElement/clientWidth|dom/HTMLElement/componentFromPoint|dom/HTMLElement/controlRange|
|dom/HTMLElement/dir|dom/HTMLElement/disabled|dom/HTMLElement/doScroll|
|dom/HTMLElement/document|dom/HTMLElement/draggable|dom/HTMLElement/elements|