▷Modelo de objeto de documento Dom: ejemplo de ejemplos ✔️ Foro Ayuda 【 2024 】

Buscamos por el mundo on line para así mostrarte la solución a tu inquietud, si tienes alguna difcultad deja la inquietud y contestaremos porque estamos para ayudarte.

Este capítulo proporciona algunos ejemplos más extensos de desarrollo web y XML utilizando DOM. Siempre que sea posible, los ejemplos utilizan API, trucos y patrones comunes en JavaScript para manipular el objeto del documento.

Ejemplo 1: alto y ancho

El siguiente ejemplo muestra el uso de la height y width propiedades junto con imágenes de diferentes dimensiones:

DOCTYPEhtml><htmllang="en"><head><title>width/height exampletitle><script>functioninit()var arrImages =newArray(3);

  arrImages[0]= document.getElementById("image1");
  arrImages[1]= document.getElementById("image2");
  arrImages[2]= document.getElementById("image3");var objOutput = document.getElementById("output");var strHtml ="";for(var i =0; i < arrImages.length; i++)
    strHtml +="image"+(i+1)+": height="+ arrImages[i].height +", width="+ arrImages[i].width +", style.height="+ arrImages[i].style.height +", style.width="+ arrImages[i].style.width +"
";

  strHtml +="
";

  objOutput.innerHTML = strHtml;script>head><bodyonload="init();"><p>Image 1: no height, width, or style
  <imgid="image1"src="http://www.mozilla.org/images/mozilla-banner.gif">p><p>Image 2: height="50", width="500", but no style
  <imgid="image2"src="http://www.mozilla.org/images/mozilla-banner.gif"height="50"width="500">p><p>Image 3: no height, width, but
  <imgid="image3"src="http://www.mozilla.org/images/mozilla-banner.gif"style="height: 50px;width: 500px;">p><divid="output">div>body>html>

Ejemplo 2: Atributos de imagen

DOCTYPEhtml><htmllang="en"><head><title>Modifying an image bordertitle><script>functionsetBorderWidth(width)
  document.getElementById("img1").style.borderWidth = width +"px";script>head><body><p><imgid="img1"src="image1.gif"style="border: 5px solid green;"width="100"height="100"alt="border test">p><formname="FormName"><inputtype="button"value="Make border 20px-wide"onclick="setBorderWidth(20);"/><inputtype="button"value="Make border 5px-wide"onclick="setBorderWidth(5);"/>form>body>html>

Ejemplo 3: manipulación de estilos

En este ejemplo simple, se accede a algunas propiedades de estilo básicas de un elemento de párrafo HTML utilizando el objeto de estilo en el elemento y las propiedades de estilo CSS de ese objeto, que se pueden recuperar y configurar desde el DOM. En este caso, está manipulando los estilos individuales directamente. En el siguiente ejemplo (consulte el Ejemplo 4), puede utilizar hojas de estilo y sus reglas para cambiar los estilos de documentos completos.

DOCTYPEhtml><htmllang="en"><head><title>Changing color and font-size exampletitle><script>functionchangeText()var p = document.getElementById("pid");

  p.style.color ="blue"
  p.style.fontSize ="18pt"script>head><body><pid="pid"onclick="window.location.href ='http://www.cnn.com/';">linkerp><form><p><inputvalue="rec"type="button"onclick="changeText();"/>p>form>body>html>

Ejemplo 4: uso de hojas de estilo

La propiedad styleSheets del objeto de documento devuelve una lista de las hojas de estilo que se han cargado en ese documento. Puede acceder a estas hojas de estilo y sus reglas individualmente utilizando los objetos hoja de estilo, estilo y CSSRule, como se muestra en este ejemplo, que imprime todos los selectores de reglas de estilo en la consola.

var ss = document.styleSheets;for(var i =0; i < ss.length; i++)for(var j =0; j < ss[i].cssRules.length; j++)dump( ss[i].cssRules[j].selectorText +"n");

Para un documento con una sola hoja de estilo en la que se definen las siguientes tres reglas:

bodybackground-color: darkblue;pfont-face: Arial;font-size: 10pt;margin-left: .125in;#lumpydisplay: none;

Este script genera lo siguiente:

BODY
P
#LUMPY

Ejemplo 5: Propagación de eventos

Este ejemplo demuestra cómo los eventos se activan y se manejan en el DOM de una manera muy simple. Cuando se carga el BODY de este documento HTML, se registra un detector de eventos en la fila superior de TABLE. El detector de eventos maneja el evento ejecutando la función stopEvent, que cambia el valor en la celda inferior de la tabla.

Sin embargo, stopEvent también llama a un método de objeto de evento, event.stopPropagation, lo que evita que el evento se propague más hacia el DOM. Tenga en cuenta que la tabla en sí tiene un onclick controlador de eventos que debería mostrar un mensaje cuando se hace clic en la tabla. Pero el método stopEvent ha detenido la propagación y, por lo tanto, una vez que se actualizan los datos de la tabla, la fase del evento finaliza de forma efectiva y se muestra un cuadro de alerta para confirmarlo.

DOCTYPEhtml><htmllang="en"><head><title>Event Propagationtitle><style>#t-daddyborder: 1px solid red #c1background-color: pink;style><script>functionstopEvent(ev)
  c2 = document.getElementById("c2");
  c2.innerHTML ="hello";// this ought to keep t-daddy from getting the click.
  ev.stopPropagation();alert("event propagation halted.");functionload()
  elem = document.getElementById("tbl1");
  elem.addEventListener("click", stopEvent,false);script>head><bodyonload="load();"><tableid="t-daddy"onclick="alert('hi');"><trid="tbl1"><tdid="c1">onetd>tr><tr><tdid="c2">twotd>tr>table>body>html>

Ejemplo 6: getComputedStyle

Este ejemplo demuestra cómo window.getComputedStyle El método se puede usar para obtener los estilos de un elemento que no están configurados usando el style atributo o con JavaScript (p. ej., elt.style.backgroundColor="rgb(173, 216, 230)"). Estos últimos tipos de estilos se pueden recuperar con el método más directo. elt.style propiedad, cuyas propiedades se enumeran en el Lista de propiedades de DOM CSS.

getComputedStyle() devuelve un ComputedCSSStyleDeclaration objeto, cuyas propiedades de estilo individuales se pueden referenciar con este objeto getPropertyValue() método, como muestra el siguiente documento de ejemplo.

DOCTYPEhtml><htmllang="en"><head><title>getComputedStyle exampletitle><script>functioncStyles()var RefDiv = document.getElementById("d1");var txtHeight = document.getElementById("t1");var h_style = document.defaultView.getComputedStyle(RefDiv,null).getPropertyValue("height");

  txtHeight.value = h_style;var txtWidth = document.getElementById("t2");var w_style = document.defaultView.getComputedStyle(RefDiv,null).getPropertyValue("width");

  txtWidth.value = w_style;var txtBackgroundColor = document.getElementById("t3");var b_style = document.defaultView.getComputedStyle(RefDiv,null).getPropertyValue("background-color");

  txtBackgroundColor.value = b_style;script><style>#d1margin-left: 10px;background-color:rgb(173, 216, 230);height: 20px;max-width: 20px;style>head><body><divid="d1"> div><formaction=""><p><buttontype="button"onclick="cStyles();">getComputedStylebutton>
    height<inputid="t1"type="text"value="1"/>
    max-width<inputid="t2"type="text"value="2"/>
    bg-color<inputid="t3"type="text"value="3"/>p>form>body>html>

Ejemplo 7: Visualización de las propiedades del objeto de evento

Este ejemplo usa métodos DOM para mostrar todas las propiedades del GlobalEventHandlers.onloadevent objeto y sus valores en una tabla. También muestra una técnica útil de usar un bucle for..in para iterar sobre las propiedades de un objeto para obtener sus valores.

Las propiedades de los objetos de eventos difieren mucho entre los navegadores, la Estándar WHATWG DOM enumera las propiedades estándar, sin embargo, muchos navegadores las han ampliado enormemente.

Ponga el siguiente código en un archivo de texto en blanco y cárguelo en una variedad de navegadores, se sorprenderá de los diferentes números y nombres de propiedades. Es posible que también desee agregar algunos elementos en la página y llamar a esta función desde diferentes controladores de eventos.

DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><title>Show Event propertiestitle><style>tableborder-collapse: collapse;theadfont-weight: bold;tdpadding: 2px 10px 2px 10px;.oddbackground-color: #efdfef;.evenbackground-color: #ffffff;style><script>functionshowEventProperties(e)

window.onload=function(event)showEventProperties(event);script>head><body><h1>Properties of the DOM <spanid="eventType">span> Event Objecth1>body>html>

Ejemplo 8: uso de la interfaz de tabla DOM

La interfaz DOM HTMLTableElement proporciona algunos métodos convenientes para crear y manipular tablas. Dos métodos de uso frecuente son HTMLTableElement.insertRow y tableRow.insertCell.

Para agregar una fila y algunas celdas a una tabla existente:

<tableid="table0"><tr><td>Row 0 Cell 0td><td>Row 0 Cell 1td>tr>table><script>var table = document.getElementById('table0');var row = table.insertRow(-1);var cell,
    text;for(var i =0; i <2; i++)
  cell = row.insertCell(-1);
  text ='Row '+ row.rowIndex +' Cell '+ i;
  cell.appendChild(document.createTextNode(text));script>

Notas

Una mesa innerHTML La propiedad nunca debe usarse para modificar una tabla, aunque puede usarla para escribir una tabla completa o el contenido de una celda.
Si los métodos DOM Core document.createElement y Node.appendChild se utilizan para crear filas y celdas, IE requiere que se agreguen a un elemento tbody, mientras que otros navegadores permitirán agregar a un elemento de tabla (las filas se agregarán al último elemento tbody).
Hay una serie de otros métodos de conveniencia que pertenecen a la interfaz de tablas que se pueden utilizar para crear y modificar tablas.

Acuérdate de que puedes añadir una estimación correcta si te fue de ayuda.

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Tags : Dom DOM /

Modelo de objeto de documento Dom: ejemplo de ejemplos