[Front] DOM요소와 제이쿼리

1. DOM 요소란?

DOM은 Document Object Model의 줄임말로, HTML 태그 하나하나를 자바스크립트로 다룰 수 있도록 만든 문법이다.

 

<input id="memberId" type="text" value="abc123">

다음과 같은 코드가 있을 떄는, 

document.getElementById("memberId").value; // → "abc123"

를 통해 ab123이라는 값을 가져올 수 있다.

즉, HTML 태그 하나 == DOM 요소 하나이다.

---

2. $("  ")

: 제이쿼리 문법.

$("#memberId")

는 

document.getElementById("memberId")

와 동일한 의미이다.

---

즉, 

• DOM 요소 = HTML 태그를 자바스크립트로 다룰 수 있게 만든 객체
• $(“#id”) = jQuery로 특정 HTML 요소를 선택하는 방법

요소 선택	document.getElementById("id")	$("#id")
값 읽기	.value	.val()
텍스트 설정	.textContent	.text()
클래스 추가	.classList.add(...)	.addClass(...)

 

 

id가 붙은 HTML 요소는 jQuery로 자유롭게 조작 가능하고, $("#id") 형태로 연결해서 .text(), .show(), .hide() 등을 사용할 수 있다.