"nodopadre"
A menudo se utiliza para obtener el nodo principal de un elemento. Considere parentNodes como un contenedor y hay nodos secundarios en el contenedor.
ejemplo:
<div id="padre">
<b id="child">Mi texto</b>
</div>
En el código anterior, verá que "Papá" se usa como contenedor div y que hay un "niño" en el contenedor, que es la parte del texto en negrita. Si planea usar el método getElementById() para obtener la negrita. elemento y quiero saberlo ¿Quién es "Papá"? La información devuelta será un div. Demuestre el siguiente script y sabrá lo que está pasando...
Cita:
Copie el código de código de la siguiente manera:
<div id="padre">
<b id="child">Mi texto</b>
</div>
<tipo de script="texto/javascript">
<!--
alert(document.getElementById("child").parentNode.nodeName);
//-->
</script>
Usar parentNode no necesariamente solo encuentra un "padre", un "hijo" también puede convertirse en un "padre", como en el siguiente ejemplo...
Cita:
Copie el código de código de la siguiente manera:
<div id="padre">
<div id="hijopadre">
<b id="child">Mi texto</b>
</div>
</div>
Hay dos "padres" y dos "hijos" en el código anterior. El primer div (id "padre") es el "padre" del segundo div (padre hijo).
Hay un elemento en negrita (id "niño") en "childparent", que es el "niño" del div "childparent". Entonces, ¿cómo acceder a "abuelo" (id "padre")? .
Cita:
Copie el código de código de la siguiente manera:
<div id="padre">
<div id="hijopadre">
<b id="child">Mi texto</b>
</div>
</div>
<tipo de script="texto/javascript">
<!--
alert(document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</script>
¿Notaste que dos parentNode se usan juntos? "parentNode.parentNode". El primer parentNode es div (id "childparent"), porque queremos obtener el elemento principal más externo, por lo que agregamos otro parentNode a div (id "childparent" ) "padre").
Usar parentNode hace más que simplemente encontrar el nombre de nodo de un elemento. Por ejemplo, puede obtener el nodo principal de una gran cantidad de elementos y agregar un nuevo nodo al final.
IE tiene su propio nombre llamado "parentElement" y para scripts entre navegadores se recomienda utilizar parentNode.
Dos palabras más:
Si coloca javascript al principio del archivo html, se producirá un error. Firefox informará el siguiente error:
document.getElementById("child") no tiene propiedades
Para IE es:
Objeto requerido
La razón es que todos los navegadores que admiten JavaScript ejecutan JavaScript antes de analizar completamente el DOM. En la programación web real, la mayoría de JavaScript se puede colocar en la etiqueta head. Para que se ejecute correctamente, la alerta debe estar incluida en la función y en el documento. Llame a la función después de cargarla, por ejemplo, agréguela a la etiqueta Cuerpo.
¿Cuáles son las diferencias entre parentNode, parentElement, childNodes e hijos?
parentElement Obtiene el objeto principal en la jerarquía de objetos.
parentNode obtiene el objeto principal en la jerarquía del documento.
childNodes Obtiene una colección de elementos HTML y objetos TextNode que son descendientes directos del objeto especificado.
niños Obtiene una colección de objetos DHTML que son descendientes directos del objeto.
-------------------------------------------------- ------
parentNode tiene la misma función que parentElement y childNodes tiene la misma función que los hijos. Sin embargo, parentNode y childNodes cumplen con los estándares W3C y se puede decir que son relativamente universales. Los otros dos sólo son compatibles con IE, no con estándares, y no son compatibles con Firefox.
-------------------------------------------------- ------
En otras palabras, parentElement y los niños son cosas propias de IE y no son reconocidos por otros lugares.
Entonces, su versión estándar es parentNode, childNodes.
Las funciones de estos dos son las mismas que las de parentElement e Children, y son estándar y universales.
-------------------------------------------------- ------
La siguiente es una explicación sencilla; preste atención a las diferencias entre palabras individuales:
Propiedad parentNode: recupera el objeto principal en la jerarquía del documento.
Propiedad parentElement: recupera el objeto principal en la jerarquía de objetos.
niñoNodos:
Recupera una colección de elementos HTML y objetos TextNode que son descendientes directos del objeto especificado.
niños:
Recupera una colección de objetos DHTML que son descendientes directos del objeto.
Ejemplo de uso de parentElement parentNode.parentNode.childNodes
primer método
Copie el código de código de la siguiente manera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transicional//ES">
<HTML>
<CABEZA>
<TITLE> Nuevo documento </TITLE>
<NOMBRE META="Generador" C>
<NOMBRE META="Autor" C>
<META NOMBRE="Palabras clave" C>
<NOMBRE META="Descripción" C>
<IDIOMA DE ESCRITURA="JavaScript">
<!--
var fila = -1;
función mostrarEditar(obj){
var celda2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<tipo de entrada='texto' valor='"+ cell2.innerHTML +"'>";
si(fila!= -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].value;
}
fila = índice de fila;
}
//-->
</SCRIPT>
</CABEZA>
<CUERPO>
<TABLA id="tb">
<TR>
<TD><tipo de entrada="radio" nombre="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><tipo de entrada="radio" nombre="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><tipo de entrada="radio" nombre="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLA>
</CUERPO>
</HTML>
Segundo método
Copie el código de código de la siguiente manera:
<borde de la tabla=1 ancho=100%>
<tr>
<td><nombre de entrada=m tipo=casilla de verificación</td>
<td>1111</td>
<td><nombre de entrada=valor aaa="222" deshabilitado></td>
<td><nombre de entrada=bbb valor="333" deshabilitado></td>
</tr>
<tr>
<td><nombre de entrada=m tipo=casilla de verificación</td>
<td>1111</td>
<td><nombre de entrada=valor aaa="222" deshabilitado></td>
<td><nombre de entrada=bbb valor="333" deshabilitado></td>
</tr>
<tr>
<td><nombre de entrada=m tipo=casilla de verificación</td>
<td>1111</td>
<td><nombre de entrada=valor aaa="222" deshabilitado></td>
<td><nombre de entrada=bbb valor="333" deshabilitado></td>
</tr>
</tabla>
<IDIOMA DE ESCRITURA="JavaScript">
función mm(e)
{
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("entrada");
para(var i=0;i<inputObjs.length;i++)
{
if(inputObjs[i]==e) continuar;
inputObjs[i ].disabled=!e.checked;
}
}
</SCRIPT>
Obtener el método de control principal en HTML
Copie el código de código de la siguiente manera:
función valor establecido (v, o)
{
//var obj=document.getElementById(''batchRate'');
//ventanas.
alerta(o.parentNode.innerHTML);
alert(o.parentNode); //parentNode también obtiene el control principal aquí
alert(o.parentElement); //parentElement también obtiene el control principal aquí
alert(o.parentElement.parentNode); //parentElement.parentNode también obtiene el control principal aquí
//o.parentNode.bgColor="rojo";
o.parentElement.parentNode.bgColor="rojo";
}
Ejemplo:
Copie el código de código de la siguiente manera:
<html>
<cabeza>
<meta http-equiv="Idioma-de-contenido" c>
<meta http-equiv="Tipo de contenido" c>
<title>Nueva página web 1</title>
</cabeza>
<guión>
función valor establecido (v, o)
{
//var obj=document.getElementById(''batchRate'');
//ventanas.
alerta(o.parentNode.innerHTML);
alerta(o.parentNode);
alerta(o.parentElement);
//o.parentNode.bgColor="rojo";
o.parentElement.parentNode.bgColor="rojo";
}
</script>
<cuerpo>
<id de tabla="tabla1">
<tr>
<td><a >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>