JSFiddle - React, Tailwind, and code Playground

by Rui Leite

HTML

<div id="divPai">
    <div   id   = "divId1"     ></div>
    <div   name = "divName1"   ></div>
    <input id   = "inputId1"   />
    <input name = "inputName1" />
</div>
<form id="formPai">
    <div   id   = "divId2"     ></div>
    <div   name = "divName2"   ></div>
    <input id   = "inputId2"   />
    <input name = "inputName2" />
</form>

JavaScript

// Inicializando o teste...
var divPai = document.getElementById("divPai");
var formPai = document.getElementById("formPai");

// Vamos lá! Testando o acesso a cada categoria de filho dentro da #divPai:

console.log("\n--------------------------------------\n\nACESSANDO DIVs DA #divPai:\n");
console.log(divPai["divId1"]);
console.log(divPai["divName1"]);
console.log("CONCLUSÃO: não é possível acessarmos, por array associativo, uma DIV dentro de outra.");

console.log("\n--------------------------------------\n\nACESSANDO INPUTs DA #divPai:\n");
console.log(divPai["inputId1"]);
console.log(divPai["inputName1"]);
console.log("CONCLUSÃO: não é possível acessarmos, por array associativo, um INPUT dentro de uma DIV.");

/*
    CONCLUSÃO SOBRE DIVS:
    Não há como recuperar elementos, dentro delas, através de array associativo.
*/



// Agora, vamos fazer a mesma coisa no FORM:

console.log("\n--------------------------------------\n\nACESSANDO DIVs DO #formPai:\n");
console.log(formPai["divId2"]);
console.log(formPai["divName2"]);
console.log("CONCLUSÃO: não é possível acessarmos, por array associativo, uma DIV dentro de um FORM.");

console.log("\n--------------------------------------\n\nACESSANDO INPUTs DO #formPai:\n");
console.log(formPai["inputId2"]);
console.log(formPai["inputName2"]);
console.log("CONCLUSÃO: é possível acessarmos INPUTs, dentro de um FORMs, através de arrays associativos!!");

/*
    CONCLUSÃO SOBRE FORMS:
    Não há como recuperar elementos dentro de FORMS, através de array associativo, a menos que
    estes elementos sejam entradas de formulário (OK, não dá para concluir isto APENAS com estes
    testes que fizemos aqui, mas a verdade é essa! :D ).
*/



/*
    WHAT THE HELL IS HAPPENING????
    Divs são instâncias de objetos HTMLDivElement.
    Forms são instâncias de objetos HTMLFormElement.
    
    Enquanto ambos HTMLDivElement e HTMLFormElement são especializações de HTMLElement (que, por
    sua vez, herda atributos e métodos do...