자바스크립트를 이용한 HTML 조작 방법

자바스크립트를 이용한 HTML 조작 방법

1. 조작대상이 되는 엘리먼트를 선정한다.
2. 조작대상이 되는 엘리먼트를 조회하기 위해 id 혹은 class를 선언한다.
   (ex. getElementById(‘#XXX’));
3. 사용자와 상호작용하는 엘리먼트를 선정한다.
   (ex. button, a, input, select 등)
4. 사용자와 상호작용하는 이벤트를 선정한다.
   (ex. onclick, onchange, onkeyup, onsubmit 등)
5. 이벤트 발생 시 실행될 이벤트 핸들러 함수를 정의한다.
   (function functionName() { ... })
6. 사용자와 상호작용하는 엘리먼트에 이벤트이름=”이벤트핸들러함수();”를 정의한다.
   (<button onclick="functionName();“>버튼</button>)
7. 이벤트 핸들러 함수를 구현한다.

---

a. 조작대상이 되는 엘리먼트를 조회하는 방법

• let el = document.getElementById(“아이디”); // element 객체
• let el = document.querySelector(“선택자 표현식”); // element 객체
• let leList = document.querySelectorAll(“선택자 표현식”); // element 객체가 담긴 HTML collection

---

b. 엘리먼트의 컨텐츠, 속성, 스타일 등 값을 조회하는 방법

• let 변수 = el.textContent; // 텍스트 컨텐츠 조회
• let 변수 = el.innerHTML; // 태그가 포함된 html 컨텐츠 조회
• let 변수 = el.getAttribute(“속성명”); // 태그의 속성값 조회
• let 변수 = el.value; // input, select, textarea, checkbox, radio의 값을 조회
• let 변수 = el.checked; // checkbox, radio의 체크여부 조회
• let 변수 = el.disabled; // input, select, testarea, checkbox, radio, button의 비활성화 여부를 조회
• let 변수 = el.readOnly; // input, select, testarea, checkbox, radio의 읽기 전용여부 조회
• let 변수 = el.style.display; // 스타일(표시여부) 조회

---

c. 엘리먼트의 컨텐츠, 속성, 스타일 등 값을 변경하는 방법

• el.textContent = “변경내용”;
• el.innerHTML = “<태그>컨텐츠”
• el.setAttribute(“속성명”, “값”);
• el.value = “값”;
• el.checked = true; 혹은 el.checked = false;
• el.disabled = true; 혹은 el.disabled = false;
• el.readOnly = true; 혹은 el.readOnly = false;
• el.style.display = ‘none’ 혹은 el.style.display = ‘’;