"paiNode"
Freqüentemente usado para obter o nó pai de um elemento. Pense em parentNodes como um contêiner e existem nós filhos no contêiner.
exemplo:
<div id="pai">
<b id="child">Meu texto</b>
</div>
No código acima, você vê que "Dad" é usado como um contêiner div e há um "filho" no contêiner, que é a parte do texto em negrito. Se você planeja usar o método getElementById() para obter o negrito. elemento e quer saber Quem é "Pai"? A informação retornada será uma div. Demonstre o script a seguir e você saberá o que está acontecendo...
Citar:
Copie o código do código da seguinte forma:
<div id="pai">
<b id="child">Meu texto</b>
</div>
<script type="texto/javascript">
<!--
alert(document.getElementById("filho").parentNode.nodeName);
//-->
</script>
Usar parentNode não necessariamente encontra apenas um “pai”, um “filho” também pode se tornar um “pai”, como no exemplo a seguir...
Citar:
Copie o código do código da seguinte forma:
<div id="pai">
<div id="filhopai">
<b id="child">Meu texto</b>
</div>
</div>
Existem dois "pais" e dois "filhos" no código acima. O primeiro div (id "pai") é o "pai" do segundo div (filho).
Existe um elemento em negrito (id “child”) em “childparent”, que é o “child” da div “childparent” Então, como acessar “grandpa” (id “parent”)? .
Citar:
Copie o código do código da seguinte forma:
<div id="pai">
<div id="filhopai">
<b id="child">Meu texto</b>
</div>
</div>
<script type="texto/javascript">
<!--
alerta(document.getElementById("filho").parentNode.parentNode.nodeName);
//-->
</script>
Você notou que dois parentNodes são usados juntos? "parentNode.parentNode". O primeiro parentNode é div (id "childparent"), porque queremos obter o elemento pai mais externo, então adicionamos outro parentNode ao div (id "childparent"). ) "pai").
Usar parentNode faz mais do que apenas encontrar o nodeName de um elemento. Por exemplo, você pode obter o nó pai de um grande número de elementos e adicionar um novo nó no final.
O IE tem seu próprio nome chamado "parentElement" e para scripts entre navegadores é recomendado usar parentNode.
Mais duas palavras:
Se você colocar javascript no início do arquivo html, ocorrerá um erro. O Firefox reportará o seguinte erro:
document.getElementById("child") não possui propriedades
Para o IE é:
Objeto obrigatório
A razão é que todos os navegadores que suportam JavaScript executam JavaScript antes de analisar completamente o DOM. Na programação Web real, a maior parte do JavaScript pode ser colocada na tag head. Para funcionar corretamente, o alerta precisa ser encapsulado na função e no documento. Chame a função após o carregamento. Por exemplo, adicione-a à tag Body.
Quais são as diferenças entre parentNode, parentElement, childNodes e filhos?
parentElement Obtém o objeto pai na hierarquia de objetos.
parentNode obtém o objeto pai na hierarquia do documento.
childNodes Obtém uma coleção de elementos HTML e objetos TextNode que são descendentes diretos do objeto especificado.
children Obtém uma coleção de objetos DHTML que são descendentes diretos do objeto.
-------------------------------------------------- ------
parentNode tem a mesma função que parentElement e childNodes tem a mesma função que filhos. No entanto, parentNode e childNodes estão em conformidade com os padrões W3C e podem ser considerados relativamente universais. Os outros dois são suportados apenas pelo IE, não pelos padrões, e não são suportados pelo Firefox.
-------------------------------------------------- ------
Em outras palavras, parentElement e children são coisas do próprio IE e não são reconhecidos por outros lugares.
Então, sua versão padrão é parentNode, childNodes.
As funções desses dois são iguais às de parentElement e filhos, e são padrão e universais.
-------------------------------------------------- ------
A seguir está uma explicação simples, preste atenção às diferenças nas palavras individuais:
Propriedade parentNode: recupera o objeto pai na hierarquia do documento.
Propriedade parentElement: recupera o objeto pai na hierarquia de objetos.
nós filhos:
Recupera uma coleção de elementos HTML e objetos TextNode que são descendentes diretos do objeto especificado.
crianças:
Recupera uma coleção de objetos DHTML que são descendentes diretos do objeto.
Exemplo de uso de parentElement parentNode.parentNode.childNodes
primeiro método
Copie o código do código da seguinte forma:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<CABEÇA>
<TITLE> Novo documento </TITLE>
<META NAME="Gerador" C>
<META NAME="Autor" C>
<NOME DA META="Palavras-chave" C>
<NOME DA META="Descrição" C>
<SCRIPT LANGUAGE="JavaScript">
<!--
var linha = -1;
função mostrarEdit(obj){
var cell2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<tipo de entrada='texto' valor='"+ cell2.innerHTML +"'>";
if(linha!= -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].valor;
}
linha = linhaIndex;
}
//-->
</SCRIPT>
</HEAD>
<CORPO>
<TABLE id="tb">
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</TABELA>
</BODY>
</HTML>
Segundo método
Copie o código do código da seguinte forma:
<borda da tabela=1 largura=100%>
<tr>
<td><input name=m type=caixa de seleção </td>
<td>1111</td>
<td><input name=aaa value="222" desativado></td>
<td><input name=bbb value="333" desativado></td>
</tr>
<tr>
<td><input name=m type=caixa de seleção </td>
<td>1111</td>
<td><input name=aaa value="222" desativado></td>
<td><input name=bbb value="333" desativado></td>
</tr>
<tr>
<td><input name=m type=caixa de seleção </td>
<td>1111</td>
<td><input name=aaa value="222" desativado></td>
<td><input name=bbb value="333" desativado></td>
</tr>
</tabela>
<SCRIPT LANGUAGE="JavaScript">
função mm(e)
{
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("entrada");
for(var i=0;i<inputObjs.length;i++)
{
if(inputObjs[i ]==e) continuar;
inputObjs[i].disabled=!e.checked;
}
}
</SCRIPT>
Obtenha o método de controle pai em HTML
Copie o código do código da seguinte forma:
valor de ajuste da função (v,o)
{
//var obj=document.getElementById(''batchRate'');
//Windows.
alerta(o.parentNode.innerHTML);
alert(o.parentNode); //parentNode também obtém o controle pai aqui
alert(o.parentElement); //parentElement também obtém o controle pai aqui
alert(o.parentElement.parentNode); //parentElement.parentNode também obtém o controle pai aqui
//o.parentNode.bgColor="vermelho";
o.parentElement.parentNode.bgColor="vermelho";
}
Exemplo:
Copie o código do código da seguinte forma:
<html>
<cabeça>
<meta http-equiv="Content-Language" c>
<meta http-equiv="Tipo de conteúdo" c>
<title>Nova página da web 1</title>
</head>
<roteiro>
valor de ajuste da função (v,o)
{
//var obj=document.getElementById(''batchRate'');
//Windows.
alerta(o.parentNode.innerHTML);
alerta(o.parentNode);
alerta(o.parentElement);
//o.parentNode.bgColor="vermelho";
o.parentElement.parentNode.bgColor="vermelho";
}
</script>
<corpo>
<tabela id="tabela1">
<tr>
<td><a >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>