b'\n_START_ARTICLE_\nDocument Object Model\n_START_PARAGRAPH_\nDocument Object Model o DOM (\'Modelo de Objetos del Documento\' o \'Modelo en Objetos para la Representaci\xc3\xb3n de Documentos\') es esencialmente una interfaz de plataforma que proporciona un conjunto est\xc3\xa1ndar de objetos para representar documentos HTML, XHTML y XML,\xe2\x80\x8b un modelo est\xc3\xa1ndar sobre c\xc3\xb3mo pueden combinarse dichos objetos, y una interfaz est\xc3\xa1ndar para acceder a ellos y manipularlos. A trav\xc3\xa9s del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se dise\xc3\xb1\xc3\xb3 principalmente._NEWLINE_El responsable del DOM es el World Wide Web Consortium (W3C)._NEWLINE_El DOM permite el acceso din\xc3\xa1mico a trav\xc3\xa9s de la programaci\xc3\xb3n para acceder, a\xc3\xb1adir y cambiar din\xc3\xa1micamente contenido estructurado en documentos con lenguajes como ECMAScript (JavaScript).\n_START_SECTION_\nEstablecer referencias a objetos\n_START_PARAGRAPH_\nEl DOM define la manera en que objetos y elementos se relacionan entre s\xc3\xad en el navegador y en el documento._NEWLINE_Puede utilizarse cualquier lenguaje de programaci\xc3\xb3n adecuado para el dise\xc3\xb1o web. En el caso de JavaScript, cada objeto tiene un nombre, el cual es exclusivo y \xc3\xbanico. Cuando existe m\xc3\xa1s de un objeto del mismo tipo en un documento web, estos se organizan en un vector._NEWLINE_Es posible asignarle una identificaci\xc3\xb3n a un objeto, y luego usarla para hacer referencia a \xc3\xa9ste, por ejemplo:_NEWLINE_<div id="Juan">....</div>_NEWLINE_Para hacer referencia a elementos del mismo tipo, los cuales, como se ha dicho, est\xc3\xa1n organizados en un vector, se pueden utilizar la notaci\xc3\xb3n punto de la siguiente manera._NEWLINE_document.div[0]document.div["Juan"]document.div.Juan_NEWLINE_Donde el elemento \xc2\xabJuan\xc2\xbb es el primero del vector de elementos del tipo <div>._NEWLINE_Tambi\xc3\xa9n se puede usar la funci\xc3\xb3n getElementById._NEWLINE_document.getElementById("Juan")\n_START_SECTION_\nManipular las propiedades y funciones de objetos\n_START_PARAGRAPH_\nLos objetos computacionales, de la misma forma que cualquier objeto de la vida real, tienen propiedades. Algunos ejemplos de propiedades de objetos de la vida real son dimensiones, color y peso._NEWLINE_En la mayor\xc3\xada de los objetos computacionales algunas propiedades se pueden determinar de la siguiente manera:_NEWLINE_Objeto.propiedad = valor;//por ejemplo para el objeto \xc2\xabVaso\xc2\xbbVaso.color = rojo;_NEWLINE_La manipulaci\xc3\xb3n de objetos sigue los mismos principios que en el lenguaje de programaci\xc3\xb3n que se est\xc3\xa9 utilizando. Una de las caracter\xc3\xadsticas de estos objetos es la funci\xc3\xb3n para la cual est\xc3\xa1n dise\xc3\xb1ados, de hecho en la mayor\xc3\xada de ocasiones tienen m\xc3\xa1s de una funci\xc3\xb3n. En JavaScript, muchas funciones para cada uno de los objetos, incluyendo el navegador y la ventana que lo contiene, han sido definidas previamente; adicionalmente, el usuario puede definir funciones de acuerdo a sus necesidades, por ejemplo el c\xc3\xb3digo:_NEWLINE_function comeLaLetraA(Texto){_NEWLINE_  var TextoNuevo = "";_NEWLINE_  while(letras in Texto){_NEWLINE_    //lee la siguiente letra_NEWLINE_    //si esta letra no es \xc2\xaba\xc2\xbb a\xc3\xb1\xc3\xa1dela al nuevo texto_NEWLINE_  }_NEWLINE_  return TextoNuevo;}_NEWLINE_A\xc3\xb1ade una nueva funci\xc3\xb3n al documento utilizado para crear una p\xc3\xa1gina web.\n_START_SECTION_\nEventos\n_START_PARAGRAPH_\nUn evento desde el punto de vista computacional ocurre cuando cambia alguna situaci\xc3\xb3n en la computadora como, por ejemplo, la posici\xc3\xb3n del rat\xc3\xb3n, la pulsaci\xc3\xb3n de alguna tecla, los contenidos de alguna de las memorias, la condici\xc3\xb3n de la pantalla, etc. En la creaci\xc3\xb3n de p\xc3\xa1ginas web estos eventos representan la interacci\xc3\xb3n del usuario con la computadora. _NEWLINE_Cuando alguno de estos eventos ocurre, como por ejemplo la presi\xc3\xb3n de alg\xc3\xban bot\xc3\xb3n del rat\xc3\xb3n, es deseable que la computadora responda de alguna manera. Esta es la raz\xc3\xb3n por la que existen event handlers (\'encargados de manejar eventos\') los cuales son objetos que responden a eventos. Una manera de a\xc3\xb1adir eventos en el DOM utilizando javascript es:_NEWLINE_<element onevent="script">....</element>_NEWLINE_Por ejemplo:_NEWLINE_<div id="midivision" onClick="javascript:comeLaLetraA(\'bar\');">_NEWLINE_Aqu\xc3\xad va otro texto_NEWLINE_</div>_NEWLINE_Otra forma de manipular eventos en JavaScript, al crear p\xc3\xa1ginas web, es trat\xc3\xa1ndolos como propiedades de los elementos que forman la p\xc3\xa1gina, por ejemplo:_NEWLINE_object.event = funcion;//como puede ser:document.midivision.onclick = hazAlgo;// tambi\xc3\xa9n:document.getElementById("midivision").onclick = hazAlgo;_NEWLINE_En DOM se considera que un evento se origina en el exterior de la p\xc3\xa1gina web y se propaga de alguna manera hasta los elementos internos de la p\xc3\xa1gina. Un posible ejemplo de esta propagaci\xc3\xb3n es:_NEWLINE_EVENTO \xe2\x86\x92 Ventana \xe2\x86\x92 Document \xe2\x86\x92 HTML \xe2\x86\x92 BODY \xe2\x86\x92 DIV \xe2\x86\x92 DESTINO_NEWLINE_RESPUESTA \xe2\x86\x92 DIV \xe2\x86\x92 BODY \xe2\x86\x92 HTML \xe2\x86\x92 Document \xe2\x86\x92 Ventana \xe2\x86\x92 EVENTO_NEWLINE_Siguiendo esta idea, se establecen tres etapas: captura, la cual se da cuando el evento se est\xc3\xa1 trasladando a su destino. Blanco, que ocurre cuando llega al blanco, o sea que llega a su destino. Este destino es el objeto en el cual se va a crear una reacci\xc3\xb3n a este evento. Finalmente la etapa de burbujeo que ocurre cuando el evento \xc2\xabregresa\xc2\xbb a su posici\xc3\xb3n original._NEWLINE_Ciertos objetos pueden estar pendientes de ciertos eventos. Para hacer esto el objeto a\xc3\xb1ade un \xc2\xaboyente de eventos\xc2\xbb con la funci\xc3\xb3n addEventListener. Cuando el evento ocurra, alguna funci\xc3\xb3n determinada se lleva a cabo. En este proceso se indica en qu\xc3\xa9 momento la funci\xc3\xb3n se lleva a cabo, ya sea en la etapa de captura o en la etapa de burbujeo. Este momento se indica con la palabra true si debe ocurrir en la etapa de captura o false si debe ocurrir en la etapa de burbujeo. En JavaScript se escribe de la siguiente manera:_NEWLINE_objeto.addEventListener(evento, funcion, momento);por ejemplo:document.getElementById("mydivision").addEventListener("click", hazAlgo, false);'