자바스크립트 웹 페이지를 동적으로 조작하는 방법

자바스크립트를 사용하여 웹 페이지를 동적으로 조작하기 위한 요소 선택 및 조작하는 방법

 

1. 요소 선택

- getElementById : id 속성을  사용하여 특정 요소 선택

- getElementsByTagName : 태그의 이름으로 모든 요소 선택

- getElementsByClassName : class 속성으로 모든 요소 선택

- querySelector : css선택자를 사용하여 요소 선택

- querySelectorAll : css 선택자를 사용하여 모든 요소 선택

 

2. 요소 조작

- innerHTML : 요소의 HTML 내용 변경

- textContent : 요소의 텍스트 내용 변경

- style : 요소의 스타일 속성 변경

- setAttribute : 요소의 속성 설정

- removeAttribute : 요소의 속성 제거

- addClass : 요소의 클래스 제거

- appendChild : 요소에 자식 요소 추가

- removeChild : 요소에서 자식요소 제거

 

3. 예시

 

- 버튼 클릭시 배경색 변경

const button = document.getElementById("button");

button.addEventListener("click",()=>{
	document.body.style.backgroundColor = "pink";
});

 

 

- 텍스트 입력시 텍스트 내용 변경

const input = document.getElementById("input");

input.addEventListener("input", ()=>{
	document.getElementById("output").textContent = input.value;
});

 

 

- AJAX 를 사용하여 데이터 비동기 로드

const xhr = new XMLHttpRequest();

xhr.open("GET","data.json");

xhr.onload =  ()=>{
	const.data = JSON.parse(xhr.responseText);//데이터를 사용하여 웹 페이지 업데이트

};

xhr.send();

 

 

https://appmaster.io/ko/blog/jabaseukeuribteu-dongjeog-web-kontenceu

동적 웹 콘텐츠에 JavaScript 사용 | AppMaster

https://developer.mozilla.org/ko/docs/Web/API/Event

Event - Web API | MDN