Para utilizar comandos Jquery com maior eficiência e qualidade é importante entender alguns conceitos básicos de herança entre os elementos do DOM.
- Filho: Descendente imediatamente posterior ao elemento.
- Pai: Ancestral imediatamente anterior ao elemento.
- Irmãos(siblings): Elementos que são filhos do mesmo pai.
- Ancestral: Todos os elementos presentes anteriormente ao elemento em si.
- Descendente: Todos os elementos presentes posteriormente ao elemento em si.
Por exemplo, observando o código da página abaixo:
Com base nesse modelo podemos desenhar o seguinte diagrama:
Assim, observe que:
- ‘A’ é pai de ‘B’, ‘C’ e ‘D’;
- ‘B’ é pai de ‘B1’, ‘B2’ e ‘B3’;
- C é pai de ‘C1’ e ‘C2’;
- D não tem filhos!
- ‘C12’ é filho de ‘C1’;
- Todos os elementos (com exceção de ‘A’), são descendentes de ‘A’;
- ‘B1’, ‘B2’ e ‘B3’ são descendentes de ‘B’, ou ‘B’ é ancentral de ‘B1’, ‘B2’ e ‘B3’;
- ‘B’ NÃO é ancentral de ‘C12’
E assim por diante!
