Propiedades de estructura y contenido
tipo nodo
Todos los nodos tienen tipos, y hay un total de 12 tipos de nodos.
La copia del código es la siguiente:
Nodo de interfaz {
// Nodetype
constsinsigned short element_node = 1;
constsigned short attribute_node = 2;
constsinsigned corta text_node = 3;
consts unsigned corto cdata_section_node = 4;
const sinigned breve entity_reference_node = 5;
const sinigned breve entity_node = 6;
Const Unsigned Short Processing_instruction_node = 7;
constsinsigned corta comment_node = 8;
constsinsigned corta document_node = 9;
constsinsigned corta documento_type_node = 10;
constsinsigned corta corta document_fragment_node = 11;
consts unsigned breve notación_node = 12;
...
}
Los dos nodos más importantes son los nodos de elementos (1) y los nodos de texto (3). El resto rara vez se usan.
Por ejemplo, al enumerar todos los nodos de elementos infantiles, podemos iterar sobre él y usar nodos de niños [i] .nodetype! = 1 para detectar.
Aquí está el código de implementación:
La copia del código es la siguiente:
<Body>
<Div> Lectores permitidos: </div>
<ul>
<li> John </li>
<li> Bob </li>
</ul>
<!-un nodo de comentarios->
<script>
var childNodes = document.body.childnodes
para (var i = 0; i <childnodes.length; i ++) {
if (bidnodes [i] .nodetype! = 1) Continuar
alerta (nodos de niños [i])
}
</script>
</body>
*pensar
¿Qué solicitará el siguiente código?
La copia del código es la siguiente:
<! Doctype html>
<html>
<Body>
<script>
alerta (document.body.lastchild.nodetype)
</script>
</body>
</html>
NodeName, TagName
Tanto NodeName como TagName contienen el nombre del nodo.
Para document.body
alerta (document.body.nodename) // cuerpo
Todos los nombres nodo en HTML serán capitalizados.
Cuando el nombre de nodo no se capitaliza
Esta situación es rara, si tiene curiosidad, puede leer lo siguiente.
Probablemente ya sepa que hay dos formas para que los navegadores analicen: el patrón HTML y el patrón __xml. Por lo general, se usa el esquema HTML, pero cuando se utiliza la tecnología XMLHTTPREQUEST__ para obtener documentos XML, se utiliza el esquema XML.
El patrón XML también se usa en Firefox cuando el tipo de contenido del documento XHTML se establece en XMlish.
En el modo __xml, el nombre del nodo se conservará, por lo que puede aparecer el cuerpo o el cuerpo.
Por lo tanto, si el documento XML a HTML se carga desde el servidor a través de la tecnología XMLHTTPREQUEST__, el nombre del nodo se conservará.
NodeName y __tagname__ son los mismos para elementos.
Sin embargo, los nodos que no son de elementos también tienen atributos NodeName, en los que tienen valores especiales:
alerta (document.nodename) // #Document
La mayoría de los tipos de nodos no tienen un atributo TagName, y el nombre de etiqueta del nodo se anota en IE IS!.
Por lo tanto, en términos generales, NodeName es más significativo que TagName. Pero TagName es como una versión simplificada, por lo que cuando solo procesa nodos de elementos, puede usarlo.
innerhtml
InnerHTML es parte del estándar HTML5. Consulte el enlace para más detalles
Permite el acceso al contenido de nodo en el texto. El siguiente ejemplo generará todo el contenido de document.body y los reemplazará con el nuevo contenido.
La copia del código es la siguiente:
<Body>
<p> El párrafo </p>
<div> y un div </div>
<script>
alerta (document.body.innerhtml) // Leer contenido actual
document.body.innerhtml = 'Yaaahoo!' // Reemplazar el contenido
</script>
</body>
InnerHTML contendrá un HTML eficiente. Pero los navegadores también pueden analizar HTML deformado.
InnerHTML se puede usar en cualquier nodo de elemento. Es muy, muy útil.
trampas innerhtml
Innerhtml no es tan simple como parece. Tiene algunas dificultades esperando a los novatos, y a veces los programadores experimentados no pueden evitarlo.
El innerhtml del nodo __table__ en IE es de solo lectura
En IE, Innerhtml es de solo lectura en Col, ColGroup, Frameset, Head, HTML, Style, Table, Tbody, Tfoot, Thead, Title, TR y otros elementos.
En las etiquetas de la tabla en IE, el InnerHTML es de solo lectura, excepto TD.
innerhtml no se puede agregar
De la estructura de la declaración, InnerHTML puede realizar operaciones de agregado, como:
chatdiv.innerhtml += "<iv> hi <img src = 'smile.gif'/>! </div>"
chatdiv.innerhtml += "¿Cómo estás?"
Pero lo que se ha hecho de hecho:
1. Se borra el contenido anterior
2. El nuevo contenido se analiza e inserta. El contenido no se agregó, se regeneró.
Por lo tanto, todas las imágenes y otros recursos se volverán a cargar después de la operación +=, incluida Smile.gif.
Afortunadamente, hay otras formas de actualizar el contenido, que no usa InnerHTML, por lo que no se mencionó anteriormente.
nodevalor
InnerHTML solo es válido para nodos de elementos.
Para otros tipos de nodos, usan la propiedad NodeValue para obtener el contenido. El siguiente ejemplo ilustrará cómo funciona en nodos de texto y nodos de comentarios.
La copia del código es la siguiente:
<Body>
El texto
<!-Un comentario->
<script>
para (var i = 0; i <document.body.childnodes.length; i ++) {
alerta (document.body.childnodes [i] .nodeValue)
}
</script>
</body>
En el ejemplo anterior, algunas advertencias están vacías debido a los nodos en blanco. Tenga en cuenta que NodeValue === NULL para nodos de script. Eso es porque el script es un nodo de elemento. Nodo de elemento, use InnerHTML.
Resumir
tipo nodo
Tipo de nodo. Lo más importante es que el nodo del elemento es 1, el nodo de texto es 3 y es de solo lectura.
NodeName/tagname
Nombre de la etiqueta Caps. Para los nodos no elementales, NodeName también tendrá valores especiales, de solo lectura.
innerhtml
Se puede escribir el contenido del nodo elemento.
nodevalor
Se puede escribir el contenido del nodo de texto.
El nodo DOM tiene algunos otros atributos según su tipo. Por ejemplo, la etiqueta de entrada tiene valor y __ecked__ atributos. El atributo A tiene href, etc.
Lo anterior se trata de este artículo, espero que les guste.