Acessando elemento na página :
<table>
<thead>
<tr>
<th>Salada</th>
<th>Prato Principal</th>
<th>Acompanhamento</th>
</tr>
</thead>
<tbody>
<tr class="prato-do-dia" id="sexta">
<td class='salada'>Alface e Tomate</td>
<td class='principal'>Frango Grelhado</td>
<td class='acompanhamento'>Arroz e Feijão preto</td>
</tr>
...Outros dias da semana
<tr class="prato-do-dia" id="segunda">
<td class='salada'>Salada de Batata</td>
<td class='principal'>Macarrão com molho branco</td>
<td class='acompanhamento'>Milho, ervilha e brócolis</td>
</tr>
</tbody>
</table>
1 - MÉTODO
var pratoDoDia = document.querySelector("#sexta");
var salada = pratoDoDia.querySelector(".salada").textContent;
var principal = pratoDoDia.querySelector(".principal").textContent;
var acompanhamento = pratoDoDia.querySelector(".acompanhamento").textContent;
console.log("Prato do dia!");
console.log(salada);
console.log(principal);
console.log(acompanhamento);
2- MÉTODO
var pratoDoDia = document.querySelector("#sexta");
var salada = pratoDoDia.querySelector(".salada");
var principal = pratoDoDia.querySelector(".principal");
var acompanhamento = pratoDoDia.querySelector(".acompanhamento");
var saladaA = salada.textContent;
var principalL = principal.textContent;
var acompanhamentoO = acompanhamento.textContent;
console.log("Prato do dia!");
console.log(saladaA);
console.log(principalL);
console.log(acompanhamentoO);
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta
resposta
DOM - pra acessar o valor do conteúdo , posso acessar tanto com o 1 método e também com o 2 ??
solução!
Olá Wellington, tudo bem com você?
As duas maneiras são válidas, a única diferença é que na segunda maneira você está separando em mais uma variável a parte do texto, então normalmente o que fazemos é pensar em como será estruturado o código
Por exemplo, se eu quero sempre pegar o valor textual, a primeira maneira é mais simplificada dado que eu não utilizarei as variáveis que guardam os elementos, então podemos dizer que são "desnecessárias" :)
Agora por exemplo, se além de pegar o texto eu quero criar um evento de clique, ai a segunda maneira é mais eficiente pois eu já tenho separado o elemento e não preciso procurar novamente na DOM :)
Conseguiu Compreender? Então vai mais do que iremos fazer no código!
E normalmente no segundo método podemos indicar que se trata de um elemento html para não precisar criar variáveis com nome parecido, então poderiamos trocar salada por:
var saladaTr = pratoDoDia.querySelector(".salada");
var saladaHtml = pratoDoDia.querySelector(".salada");E ai poderíamos deixar salada para ser o valor do .textContent
Abraços e Bons Estudos!