Dom estructura de árbol y el funcionamiento de dom

Dom estructura de árbol y el funcionamiento de dom

árbol DOM (herencia)

• Nodo - EventTarget prototipo prototipo prototipo objeto es nulo

  • Documento (documento)

    • documento documento HTMLDocument

    • documento XML XmlDoucment

  • CharacterData

    • Texto -> texto

    • Comentario -> comentario

  • Element (elementos del documento)

    • HTMLElement -> elemento superconjunto

      • HTMLHeaderElement

      • HTMLBodyElement

      • HTMLTitleElement

      • HTMLParagraphElement ->

      • HTMLInputElement

      • HTMLHDivElement

      • ........

  • atr

Nodo (un superconjunto de todos los elementos de la interfaz) cuatro propiedades

• nombreNodo: de sólo lectura nombre de nodo

• nodeValue: sólo los nodos de contenido de comentario de lectura y escritura de nodo y los nodos de texto que hay, el otro es nula

• nodeType: sólo lectura tipo de nodo

  • nodo de elemento --1 es elementos DOM como: div, palmo, p, etc.

  • nodos atributo - 2 dom.attributes nodos atributo del conjunto de elementos dom.attributes [0] .name dom.attributes [0] .value puede cambiar su valor, el nombre no se puede cambiar

  • nodo Text --3 incluyendo espacios retornos de carro, etc.

  • Comentario nodo - 8

  • documento - 9 un nodo de documento.

  • Tipo de Documento Descripción Tipo de -10 nodo del nodo de documento DocumentType. Por ejemplo, se utiliza para HTML5.

  • DocumentFragment - 11 un nodo DocumentFragment

  • Algunos han sido abandonados

Recorrer el árbol de nodos (tanto para la propiedad) compatibilidad, pero será elegido o anotaciones de texto

• parentNode -> padre tiene sólo un nodo superior para el documento

• childNode -> todos los nodos hijos

• firstChild -> primer nodo

• lastChild -> el último niño

• nextSibling -> inmediatamente después de un hermano

• El nodo secundario anterior> inmediatamente - previousSilbing

Atravesando árbol de nodos elemento (tanto para la propiedad) no es compatible con IE9 y por debajo no son compatibles

• parentElement -> nodo elemento padre tiene un solo nodo superior es nulo no es un documento (IE no es compatible)

• los niños -> todos los hijos del nodo elemento

• firstElementChild -> nodo hijo del primer elemento (IE incompatibles)

• lastElementChild -> último hijo elemento (incompatibles IE)

• nextElementSibling -> inmediatamente después de un nodo relacionado (IE incompatible)

• previousElementSilbing -> inmediatamente anterior elemento de nodo del mismo nivel (IE incompatibles)

Elementos hallazgo

• la getElementById () definido en Document.prototype, es decir, los nodos no puede acceder Element

• la getElementsByName () definido en HTMLDocument.prototype, elemento es decir, no html no se puede utilizar (por ejemplo: xml, elemento)

• la getElementsByTagName () definido en Document.prototype, la mejor compatibilidad y Element.prototype

• HTMLDocument.prototype define las propiedades comunes (por ejemplo .: cuerpo, la cabeza) y la etiqueta con el documento, respectivamente,

• Document.prototype propiedad documentElement definido, es decir, se refiere a la etiqueta de elemento raíz del documento

• getElementsByClassName, querySelectorALl, querySelector se definen en Document.prototype y Element.prototype en.

El aumento de elemento (el método del objeto documento)

• document.createElement ();

• document.createTextNode ();

• document.createComment ();

• document.createDocumentFragment (); Crear un fragmento de documento, cuando se añade al documento, este elemento desaparecerá, no aparecen

elementos de inserto

• se añadió (método de objeto Node) a un elemento hijo del elemento padre sólo para la (Node) no puede ser (DOMString) sólo puede pasar un parámetro a un elemento de corte existente, otro; parentNode.appendChild () lugar

• parentNode.append (); parámetro (métodos de objeto Element) método Experimento problemas de compatibilidad puede ser recibido (DOMString, tipo de nodo) puede ser una pluralidad de

• parentNode.insertBefore (a, b); la inserción de un elemento precedente en el elemento b elementos parentNode; y b debe haber estado en estructura dom; b antes de insertar una

La eliminación de los elementos

• parent.removeChild (hijo); (objetos Método nodo) devuelve el objeto que se desea borrar

• dom.remove (); (métodos de objeto Element) no devuelve valor

Alternativamente (objetos Método Node)

• parent.replaceChild (nuevo, edad); elementos antiguos volverán

Elemento

Las propiedades comunes

• copia innerHtml cubrirá otros elementos

• innerText asignación cubrirá otros elementos (que no sean compatibles con el viejo Firefox) Frecuentes

• TextContent misma y la (antigua incompatibles IE en IE9) innerText

método común

• setAttribute ();

• getAttribute ();