<form id="productForm">
  <input id="productOne" class="product" type="text" value="Product 1" />
  <input id="productTwo" class="product" type="text" value="Product 2" />
  <input id="productThree" class="product" type="text" value="Product 3" />
</form>

element 반환

일반 태그를 반환 해준다.

getElementById

태그 자체를 반환

const item1 = documentElementById(productOne);
console.log(item1);// <input id="productOne" class="product" type="text" value="Product 1">
item1.addEventListener('click', alert("haha"); 처럼 add가능

querySelector

태그 자체를 반환

const item2 = document.querySelector("#produceOne");
console.log(item2); // <input id="productOne" class="product" type="text" value="Product 1">
// item2.addEventListener('click', alert("haha"); 처럼 add가능

HTMLCollection 반환

NodeList와 마찬가지로 Array like처럼 동작한다.
index로 접근할 수 있다.

getElementsByClassName

const item7 = document.getElementsByClassName("product");
console.log(item7); // HTMLCollection(3) [input#productOne.product, input#productTwo.product, input#productThree.product, productOne: input#productOne.product, productTwo: input#productTwo.product, productThree: input#productThree.product]
item7.forEach 같은 내장 배열함수 사용 가능.

getElementsByTagName

const item8 = document.getElementsByTagName("input");
console.log(item8); // HTMLCollection(3) [input#productOne.product, input#productTwo.product, input#productThree.product, productOne: input#productOne.product, productTwo: input#productTwo.product, productThree: input#productThree.product]
item8.forEach 같은 내장 배열함수 사용 가능.

NodeList 반환

querySelectorAll

HTMLCollection과 마찬가지로 Array like처럼 동작한다.
index, name, id 로 접근할 수 있다.

const item4 = document.querySelectorAll("#productOne");
console.log(item4); //NodeList [input#productOne.product]