javascript - examples - dojo tutorial
Eliminar todos los elementos DOM de los niños en div (7)
Tengo los siguientes códigos de dojo para crear un elemento de gráficos de superficie bajo un div:
....
<script type=text/javascript>
....
function drawRec(){
var node = dojo.byId("surface");
// remove all the children graphics
var surface = dojox.gfx.createSurface(node, 600, 600);
surface.createLine({
x1 : 0,
y1 : 0,
x2 : 600,
y2 : 600
}).setStroke("black");
}
....
</script>
....
<body>
<div id="surface"></div>
....
drawRec () dibujará un gráfico de rectángulo por primera vez. Si llamo a esta función nuevamente en un ancla href como esta:
<a href="javascript:drawRec();">...</a>
dibujará otros gráficos de nuevo. Lo que necesito para limpiar todos los gráficos en el div y luego crear de nuevo. ¿Cómo puedo agregar algunos códigos de dojo para hacer eso?
Antes que nada, necesitas crear una superficie una vez y mantenerla en algún lugar a mano. Ejemplo:
var surface = dojox.gfx.createSurface(domNode, widthInPx, heightInPx);
domNode suele ser un <div> sin adornos, que se usa como marcador de posición para una superficie.
Puede borrar todo en la superficie de una vez (todos los objetos de forma existentes se invalidarán, no los use después de eso):
surface.clear();
Todas las funciones y métodos relacionados con la superficie se pueden encontrar en la documentación oficial en dojox.gfx.Surface . Se pueden encontrar ejemplos de uso en dojox/gfx/tests/ .
De la documentation API dojo:
dojo.html._emptyNode(node);
En Dojo 1.7 o posterior, use domConstruct.empty(String|DomNode) :
require(["dojo/dom-construct"], function(domConstruct){
// Empty node''s children byId:
domConstruct.empty("someId");
});
En Dojo antiguo, use dojo.empty(String|DomNode) (obsoleto en Dojo 1.8):
dojo.empty( id or DOM node );
Cada uno de estos métodos empty elimina de forma segura todos los elementos secundarios del nodo.
Si está buscando una forma moderna de> 1.7 Dojo para destruir a todos los hijos de nodos, esta es la forma:
// Destroys all domNode''s children nodes
// domNode can be a node or its id:
domConstruct.empty(domNode);
Vacía de forma segura el contenido de un elemento DOM. empty () borra todos los elementos secundarios pero mantiene el nodo allí.
Verifique la documentación de "dom-construct" para más detalles.
// Destroys domNode and all it''s children
domConstruct.destroy(domNode);
Destruye un elemento DOM. destroy () borra todos los elementos secundarios y el nodo en sí.
node.innerHTML = "";
No estándar, pero rápido y bien soportado.
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
while(node.firstChild) {
node.removeChild(node.firstChild);
}