 |
Consultar el tipo de nodo (nodeType , nodeName y nodeValue)
Node.nodeType
La propiedad de solo lectura Node.nodeType retornará un valor positivo entero representando el tipo de nodo.
- Si el nodo es un nodo de elemento, la propiedad nodeType devolverá 1.
- Si el nodo es un nodo de atributo, la propiedad nodeType devolverá 2.
- Si el nodo es un nodo de texto, la propiedad nodeType devolverá 3.
- Si el nodo es un nodo de comentario, la propiedad nodeType devolverá 8.
Esta propiedad es de sólo lectura.
Sintaxis
var type = node.nodeType;
- type será un entero positivo con alguno de los siguientes valores:
Propiedad nodeName
La propiedad nodeName devuelve el nombre del nodo especificado. Si el nodo es un nodo de elemento, la propiedad nodeName devolverá el nombre de la etiqueta. Si el nodo es un nodo de atributo, la propiedad nodeName devolverá el nombre del atributo. Para otros tipos de nodos, la propiedad nodeName devolverá diferentes nombres para diferentes tipos de nodos.
Sugerencia: también puede utilizar la propiedad tagName para devolver el nombre de etiqueta de un elemento. La diferencia es que tagName solo devuelve nombres de etiquetas, mientras que nodeName devuelve el nombre de todos los nodos (etiquetas, atributos, texto, comentarios).
Sintaxis
var str =node.nodeName;
- str es una variable de cadena en la que se almacena el nombre del elemento actual.
- nodeName es un atributo de solo-lectura.
Propiedad nodeValue
La propiedad nodeValue establece o devuelve el valor de nodo del nodo especificado, si el nodo es un nodo de elemento, la propiedad nodeValue devolverá nulo. Nota: Si desea devolver el texto de un elemento, recuerde que el texto siempre está dentro de un nodo Text , y tendrá que devolver el valor del nodo Text ( elemento .childNodes [0] .nodeValue). Para otros tipos de nodos, la propiedad nodeValue devolverá diferentes valores para diferentes tipos de nodos.
Consejo: una alternativa a la propiedad nodeValue puede ser la propiedad textContent .
Sintaxis
valor= nodo.nodeValue;
- valor es una cadena contenedora del valor del nodo actual, si es que tiene alguno.
<!DOCTYPE html>Los documentos, elementos, atributos y otros aspectos de un documento HTML o XML tienen diferentes tipos de nodos. Hay 12 tipos de nodos diferentes, que pueden tener hijos de varios tipos de nodos:
<html>
<body>
<p>Haga click en el botón para obtener el nombre del nodo, el tipo de nodo y el valor del nodo del primer hijo del div.</p>
<div id="myDIV">Este es un elemento.</div>
<br>
<button onclick="myFunction()">Probar</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myDIV").firstChild;
var txt = "";
txt += "El nombre del nodo es: " + x.nodeName + "<br>";
txt += "El valor del nodo es: " + x.nodeValue + "<br>";
txt += "El tipo de nodo es: " + x.nodeType;
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
| Nodetype | nodeName | nodeValue | |
|---|---|---|---|
| ELEMENT_NODE | 1 | nombre de elemento | nulo |
| ATTRIBUTE_NODE | 2 | nombre atributo | valor |
| TEXT_NODE | 3 | Texto | contenido del nodo |
| CDATA_SECTION_NODE | 4 | cdata-section | contenido del nodo |
| ENTITY_REFERENCE_NODE | 5 | nombre de referencia de la entidad | nulo |
| ENTITY_NODE | 6 | Nombre de entidad | nulo |
| PROCESSING_INSTRUCTION_NODE | 7 | destino del nodo | contenido del nodo |
| COMMENT_NODE | 8 | #comentario | texto del comentario |
| DOCUMENT_NODE | 9 | #documento | nulo |
| DOCUMENT_TYPE_NODE | 10 | nombre del tipo de documento | nulo |
| DOCUMENT_FRAGMENT_NODE | 11 | #document fragment | nulo |
| NOTATION_NODE | 12 | nombre de notación | nulo |
Los nodos principales que puede tener el DOM son los nodos elemento y los nodos texto. Todo nodo tiene una propiedad nodeType que almacena de qué nodo es. Si almacena un 1 (uno) el nodo es de tipo elemento (div, a, p etc.), si almacena un 3 (tres) se trata de un nodo de tipo texto.
A su vez, la propiedad nodeName almacena la marca HTML si se trata de un nodo de tipo elemento o el valor #text si se trata de un nodo de tipo text.
Por último, la propiedad nodeValue almacena el contenido del nodo si se trata de un nodo de tipo text, en caso de tratarse de un nodo de tipo elemento (es decir una márca HTML) almacena null.
Veamos con un ejemplo la impresión de las propiedades nodeType y nodeName.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
function tipoDeNodos()
{
var puntero=document.getElementById('grupo');
alert (puntero.nodeName + " es de tipo " + puntero.nodeType + " y el valor es " + puntero.nodeValue);
var hijo=puntero.childNodes[0];
alert (hijo.nodeName + " es de tipo " + hijo.nodeType + " y el valor es " + hijo.nodeValue);
var nieto=hijo.childNodes[0];
alert (nieto.nodeName + " es de tipo " + nieto.nodeType + " y el valor es " + nieto.nodeValue);
}
</script>
</head>
<body>
<div id="grupo"><p>Este es un párrafo</p></div>
<input type="button" value="Verificar de que tipo de nodo se trata" onClick="tipoDeNodos()">
</body>
</html>
El código javascript es:
function tipoDeNodos()
{
var puntero=document.getElementById('grupo');
alert (puntero.nodeName + " es de tipo " + puntero.nodeType + " y el valor es " + puntero.nodeValue);
var hijo=puntero.childNodes[0];
alert (hijo.nodeName + " es de tipo " + hijo.nodeType + " y el valor es " + hijo.nodeValue);
var nieto=hijo.childNodes[0];
alert (nieto.nodeName + " es de tipo " + nieto.nodeType + " y el valor es " + nieto.nodeValue);
}
Primeramento obtenemos la referencia del div:
var puntero=document.getElementById('grupo');
Luego imprimimos los valores de las propiedades nodeName , nodeType y nodeValue del div:
alert (puntero.nodeName + " es de tipo " + puntero.nodeType + " y el valor es " + puntero.nodeValue); ;
Obtenemos la referencia al nodo hijo y mostramos las propiedades:
> var hijo=puntero.childNodes[0]; alert (hijo.nodeName + " es de tipo " + hijo.nodeType + " y el valor es " + hijo.nodeValue);
Por último obtenemos la referencia del nodo texto que contiene el párrafo:
var nieto=hijo.childNodes[0]; alert (nieto.nodeName + " es de tipo " + nieto.nodeType + " y el valor es " + nieto.nodeValue);