many ways to access forms and elements in the DOM

forms-elements-access-patterns.js

// 15 February 2024
// many ways to access forms and elements in the DOM

var input = document.createElement("input");
input.name = "E";
var form = document.createElement("form");
form.name = "F";
form.appendChild(input);
document.body.appendChild(form);

console.warn(document.forms.F.elements.E.outerHTML);
console.log(document.forms["F"].elements.E.outerHTML);
console.warn(document.forms.F["E"].outerHTML);
console.log(document.forms["F"]["E"].outerHTML);
console.warn(document.forms[0].elements[0].outerHTML);
console.log(document.querySelector("form").elements.E.outerHTML);
console.warn(document.querySelector("form[name=F]").querySelector("input").outerHTML);
console.log(document.querySelector("input[name=E]").outerHTML);

// should see this and only this output several times
// <input name="E">