mozilla
Los resultados de tu búsqueda

    Modelo de objeto de documento

    Imagen:traduccion-pendiente.png Esta página está traduciéndose a partir del artículo XUL Tutorial:Document Object Model, razón por la cual puede haber algunos errores sintácticos o partes sin traducir. Puedes colaborar continuando con la traducción

    El modelo de objeto de documento (DOM) can be used with XUL elements to get information about them or modify them.

    Introducción al 'DOM'

    El modelo de objeto de documento (DOM) es usado para almacenar el árbol de los nodos XUL. Cuando un archivo XUL es cargado, las etiquetas son analizadas y convertidas en un documento con estructura jerárquica de nodos, uno por cada etiqueta y bloque te texto. La estructura DOM puede ser examinada y modificada usando varios métodos con esta finalidad. Los elementos XUL específicos también proporcionan funciones adicionales que pueden ser usadas.

    Cada archivo XUL que es cargado tendrá su propio documento visualizado en una ventana o marco. A pesar que hay solo un documento asociado con una ventana en cada momento, se puede carga documentos adicionales usando varios métodos.

    En Mozilla, el DOM puede ser accedido y manipulado utilizando JavaScript. Los diversos objetos DOM tienen funciones las cuales pueden ser llamadas por script. Sin embargo, es importante advertir que la DOM es un API que es accesible por JavaScript. JavaScript por sí mismo , es exactamente un lenguaje de scripting que permite el acceso a dichos objetos porque Mozilla dispone esos objetos para su uso.

    En JavaScript, siempre hay un único objeto global que está siempre disponible. Se puede hacer referencia a sus propiedades y métodos. Por ejemplo, si un objeto global tiene como propiedad 'name', se puede cambiar el nombre (name) con el código 'name = 7', sin haber especificado objeto alguno. En el contexto de un browser, la es ventana es un objeto global y asimismo es cierto para XUL. Naturalmente, este objeto global sera diferente para cada ventana. Cada marco tendrá también un objeto ventana separado.

    La ventana es a menudo referida usando la propiedad de window, a pesar de que es optativo. En ocasiones, esto se hace simplemente para clarificar el alcance del método al que hace referencia. Por ejemplo, en el siguiente fragmento de código, las dos líneas son equivalentes.

    window.open("test.xul","_new");
    open("test.xul","_new");
    

    Cuando se declara una función o una variable en el nivel más alto de un script, es decir desde otra función, se está de hecho declarando una propiedad del objeto global. En XUL, cada función declarada será definida como propiedad del objeteo window. Por ejemplo, en el siguiente código se visualizará el texto 'Message' en una alerta doble.

    function getText(){
      return "Message";
    }
    
    alert(getText());
    alert(window.getText());
    

    De esta manera, si se desea acceder a variables o llamar a funciones declaradas en un script usado por otra ventana, solo se necesita acceder usando el objeto window de la otra ventana. Por ejemplo, si se combina los dos últimos ejemplos en un único archivo, podríamos querer llamar a la función getText() desde la otra ventana (por ejemplo la ventana 'test.xul'). Para hacerlo, se puede utilizar lo siguiente:

    alert(window.opener.getText());
    

    Cada ventana tiene un opener property que mantiene a dicho objeto ventana abierto. En este ejemplo, se recupera el opener window y llamamos a la función getText() declarada en el script. Observar que se ha explicitado la propiedad con el identificador 'window' para clarificarlo.

    El método de la apertura de la ventana (window's open())también devuelve una referencia a la nueva ventana, por lo que puede llamar a funciones de la nueva ventana desde el opener. Es importante advertir, que sin embargo, el método open() lo devuelve antes de que la ventana haya sido complemetamente cargada, por lo que no estarán disponibles todavía funciones.

    EL objeto ventana no está definido por ninguna especificación DOM, pero Mozilla en ocasiones lo considera parte del DOM Level 0, un nombre es usado por varios desarrolladores para referirse a este tipo de funciones antes que se hubieran añadido especificaciones. El documento actual visualizado en una ventana puede ser recuperado usando la propiedad del documento de la ventana. Desde que esto es uno de los más propiedades referenciadas de una ventana, la propiedad documento property es utilizado sin la partícula 'window.' .

    Mozilla provee varios objetos documento diferentes dependiendo del tipo de documento. Hay tres documentos principales HTMLDocument, XMLDocument, y XULDocument, para documentos HTML, XML y XUL respectivamente. Obviamente, esto es uno de los últimos tipos de documento usados por XUL. Los tres tipos de documentos son muy parecidos, de hecho comparten la misma implementación básica. Sun embargo, hay algunas funciones especificadads para cada tipo de documento.

    Recuperación de elementos

    El método más común para recuperar un elemento en un documento es dar al elemento un atributo con el id y el uso del documento getElementById(). Hemos añadido el atributo id a una serie de elementos a encontrar el archivo de diálogo. Por ejemplo, podríamos obtener el estado de una casilla de verificación mediante el código que aparece a continuación:

    var state = document.getElementById('casecheck').checked;
    

    El valor casecheck corresponde al id del checkbox (que es case sensitive: distingue entre mayúsculas y minúsculas) . Una vez que tenemos una indicación de si está marcada o no, podemos utilizar el estado para llevar a cabo la búsqueda. Podríamos hacer algo similar para las otras casillas de verificación, o cualquier otro elemento que tiene un id. Se necesita para obtener el texto en el campo de entrada, por ejemplo.

    Nuestro ejemplo

    No tiene sentido tener la barra de progreso y el árbol de dato de pruebas desplegado cuando el dialogo de búsqueda de archivos se visualiza primero. Estos se agregaron a fin de que pudiéramos verlos. Dejémoslo fuera y aparecerá sólo cuando se presione el botón Buscar. En primer lugar, tenemos que hacerlos inicialmente invisible. El atributo hidden, se utiliza para controlar si un elemento es visible o no.

    Vamos a cambiar la medida del progreso a fin de que esté inicialmente oculta. Además, vamos a añadir un atributo id de manera que podemos referirnos a ella en una secuencia de comandos para mostrar y ocultar. Si bien estamos en ello, también vamos a ocultar los divisores y el árbol de resultados que solo se necesitarán después de que la búsqueda se haya realizado.

    <tree id="results" hidden="true" flex="1">
      .
      .
      .
    <splitter id="splitbar" resizeafter="grow" hidden="true"/>
    
    <hbox>
    
      <progressmeter id="progmeter" value="50%"
        style="margin: 4px;" hidden="true"/>
    

    Hemos agregado el atributo hidden y fijado el valor true. Esto hace que el elemento se oculte cuando aparece por primera vez.

    A continuación, vamos a añadir una función que se llama cuando el botón Buscar se presiona. Vamos a poner el scripts en un archivo separado llamado findfile.js. En la sección anterior, añadimos el elemento script en el archivo XUL. Si no lo ha hecho, hagalo ahora, como se indica a continuación. Un controlador oncommand también se añadirá al botón Buscar.

    <script src="findfile.js"/>
      .
      .
      .
    <button id="find-button" label="Find"
       oncommand="doFind();"/>
    

    Ahora, crearemos otro archivo llamado findfile.js en el mismo directorio que findfile.xul. Vamos a añadir la función doFind() en este archivo. La etiqueta script permite código que pueda figurar directamente dentro de ella. Sin embargo, por diversas razones, entre ellas un mejor rendimiento, siempre se deben poner scripts en archivos separados, con excepción de breves fragmentos que pueden ponerse directamente en el controlador de eventos.

    function doFind(){
      var meter = document.getElementById('progmeter');
      meter.hidden = false;
    }
    

    Esta función primero obtiene una referencia del medidor de progreso utilizando su identificador, progmeter. La segunda línea del cuerpo de la función cambia el estado oculto de modo que el elemento es visible de nuevo.

    Por último, vamos a tener un cuadro de alerta pop-up que muestra lo que será buscado. Por supuesto, no queremos que esté en la versión final, pero vamos a añadirlo para asegurarnos que algo pasará.

    function doFind(){
      var meter=document.getElementById('progmeter');
      meter.hidden = false;
      var searchtext=document.getElementById('find-text').value;
      alert("Searching for \"" + searchtext + "\"");
    }
    

    Ahora, con ese cuadro de alerta ahí, sabemos lo que debería suceder cuando haga clic en el botón Buscar. Podríamos añadir código adicional para obtener la selección de los cuadros desplegables.

    XUL Element DOM

    Every XUL element has a set of attributes, a set of properties and a set of children.

    • The attributes are declared in the source, for example, flex="1", is a flex attribute set to the value 1.
    • Properties are available in JavaScript using the dot syntax. For example, element.hidden refers to the hidden property of an element.
    • The children are the child tags of the element and will be nested inside the element in the source.

    It is possible to manipulate the attributes, properties and children of an element dynamically using DOM methods.

    It is important to note that attributes and properties are separate things. Just because there is an attribute with a given name does not mean that there is a corresponding property with the same name. However, it will often be the case that such a property will exist. For example, to get the flex of an element, you can use the flex property. In this case, the underlying code just returns the value of the attribute. For other properties, XUL will perform more complex calculations.

    You can manipulate the attributes of an element using any of the following methods:

    getAttribute ( nombre )
    Return the value of the attribute with the given name.
    hasAttribute ( nombre )
    Return true if the attribute with the given name has a value.
    setAttribute ( nombre , valor )
    Set the value of the attribute with the given name to the given value.
    removeAttribute ( nombre )
    Remove the attribute with the given name.

    These functions allow you to get and change the value of an attribute at any time. For example, to use the value of the flex attribute, you might use code like the following:

     var box = document.getElementById('somebox');
     var flex = box.getAttribute("flex");
     
     var box2 = document.getElementById('anotherbox');
     box2.setAttribute("flex", "2");
    

    However, the flex attribute has a corresponding script property which can be used instead. It isn't any more efficient, but it does mean slightly less typing. The following example accomplishes the same as above using the flex property instead.

     var box = document.getElementById('somebox');
     var flex = box.flex;
     
     var box2 = document.getElementById('anotherbox');
     box2.flex = 2;
    

    Once you have a reference to an element, you can call the properties of that element. For example, to get the hidden property for an element, you can use the syntax element.hidden where 'element' is a reference to the element. You might note that most of the properties listed in the reference correlate to common attributes on elements. There are differences, of course, for example, while <font color="green">getAttribute("hidden") will return the string 'true'</font> for a hidden element, whereas the hidden <font color="green">property returns a boolean true value</font>. In this case, the type conversion is done for you so the property is more convenient.

    As with each document, there is a different element object for XUL elements as for HTML and XML elements. Every XUL element implements the XULElement interface. A XUL element is any element declared with the XUL namespace. So, XUL elements will have that interface even if added to other XML documents, and non-XUL elements will not have that interface. The XULElement interface has a number of properties and methods specific to XUL elements, many inherited from the generic DOM Element interface.

    A namespace is a URI which specifies the kind of element. Here are some examples:

    <button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
    <button xmlns="http://www.w3.org/1999/xhtml"/>
    <html:button xmlns:html="http://www.w3.org/1999/xhtml"/>
    <html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
    

    Namespaces are specified using the xmlns attribute.

    • The first button is a XUL element as it has been placed in the XUL namespace.
    • The second element is an XHTML element as it has been given the XHTML namespace.
    • In the third example, the prefix 'html' is mapped to the namespace 'http://www.w3.org/1999/xhtml'. You can also use the prefix syntax with a colon to use a specific namespace . This is used when you are using several namespaces in a document and you need to be more precise with which namespace is meant. This causes an XHTML button to be created for this case.
    • The fourth button is a little confusing, but might clarify that it is the URI that is important and not the prefix. The fourth example is a XUL button, not an HTML button, despite what the prefix might say.

    This is an important distinction. In fact, the actual text used for the prefix is irrelevant when determining what kind of element is used.

    The DOM provides a number of namespace related functions similar to the non-namespace ones. For example, the getAttributeNS() function is similar to the the getAttribute() function except an additional argument may be supplied to specify an attribute in a specific namespace.

    Many XUL elements have their own properties that are unique to that element. Refer to the elemento reference for a full guide to the attributes and properties available for an element.

    Navegación en el DOM

    The DOM is a tree structure with a single root node with children. You can get a reference to the root node using the document's documentElement property. The root node is always an element, but this is not the case for other nodes in the tree. An element corresponds to a tag is the XUL source, but you may also find text nodes, comment nodes and a few other types in a document tree. In the case of XUL, the root element will be the window tag in the XUL document. Each node in the tree may have children and those children may have child nodes of their own. Since the DOM is a tree structure, you can navigate through the tree using a variety of properties. Some common properties are listed below:

    firstChild 
    reference to the first child node of an element
    lastChild
    reference to the last child node of an element
    childNodes
    holds a list of the children of an element
    parentNode
    reference to the parent of an node
    nextSibling
    reference to the next sibling in sequence
    previousSibling
    reference to the previous sibling in sequence

    These properties allow you to navigate through a document is various ways. For example, you might get the first child of an element using the firstChild property and then navigate through the children using the nextSibling property. Or, you might accomplish the same thing by iterating through the items in the childNodes list. In Mozilla, the latter method is more efficient.

    The following example shows how to iterate over the children of the root node:

    var childNodes = document.documentElement.childNodes;
    for (var i = 0; i < childNodes.length; i++) {
      var child = childNodes[i];
      // do something with child
    }
    

    The childNodes variable will hold the children of the document root element. We then use a for loop to iterate over the children, accessing each item using an array-like notation.

    Nuestro ejemplo: Código Ver en funcionamiento

    See also: A re-introduction to JavaScript and the referencia de JavaScript

    Seguimos con la modificación del DOM.

    Etiquetas y colaboradores del documento

    Contributors to this page: Admlab, Urko1982, Mgjbot, Lucasarg, Nathymig
    Última actualización por: Lucasarg,