javascript 6. DOM Manipulation

javascript에서 DOM Manipulation은 상당히 중요한 것 같다.

 

DOM Manipulation이라 함은,

Document Object Model의 약자로써, 

javascript에서 HTML에 있는 요소에 접근해서 변경할 수 있게 해준다.

 

한마디로, 웹페이지를 자바스크립트로 제어한다.

 

예를들어,

document.querySelector("선택하고싶은 요소") 를 이용해보자.

"선택하고 싶은요소" 부분을 자바스크립트에서 바꿀 수 있다.

 

HTML

<h1 class="title">Hello!</h1>

javascript

const text = document.querySelector(".title");

text.style.color = "red";

HTML에 title이라는 클래스명을

querySelector의 요소 부분에 넣어주고

변수명.style.color를 이용해서 빨간색으로 바꿔보았다.

 

결과

 

 

클래스를 이용해서 바꿔줄 수도 있다.

CSS파일에서

.change
{
	color: lightblue;
	border: 1px solid black;
}

글자색을 옅은파랑색으로,

테두리를 1px 검정색으로 하는

change라는 클래스를 만들었다.

 

const text = document.querySelector(".title");

text.classList.add("change");

그리고 자바스크립트에서 클래스리스트를 추가하는

변수명.classList.add("클래스명")을 이용했다.

결과

 

 

 

클릭하면 동작하게끔 할 수는 없을까?

addEventListener를 사용하면 된다.

 

<h1 class="title">Hello!</h1>
<button class="changeColor">Click Me!</button>

const text = document.querySelector(".title");
const changeColor = document.querySelector(".changeColor");

changeColor.addEventListener("click", function() {
	text.classList.add("change");
})

changeColor.addEventListener("click", function() {}) 의 의미 :

 

changeColor라는 변수에 담긴 요소를, 클릭하면 function을 실행한다.

 

Click Me!를 클릭한 결과

add 대신에 toggle을 사용하면,

클릭했을 때 동작하고, 다시 클릭하면 원래대로 돌아온다.

 

toggle은 스위치 역할을 한다.

 

 

addEventListener의 큰 장점은 여러개의 이벤트를 다룰 수 있다는 점이다.

 

HTML

<ul class="laptop">
		<li>LG</li>
		<li>SAMSUNG</li>
		<li>HP</li>
		<li>DELL</li>
		<li>POOP</li>
</ul>

javascript

const userList = document.querySelectorAll(".laptop li");

console.log(userList);

 

querySelector 대신에 querySelectorAll을 써주었다.(여러개 한꺼번에 쓰기위해)

 

 

예시1.  클릭 인지

const userList = document.querySelectorAll(".laptop li");

for(user of userList){
	user.addEventListener('click', function(){
		console.log(this);
	})
}

this를 다루기엔 너무 길어지니 여기서는 이렇게도 활용하는구나 하고 넘어가자.

다음에 확실히 this 개념만 설명하는 글을 써보려고 한다.

 

LG를 클릭한 결과

LG를 클릭했을 때 console창에 LG가 뜨는 것을 볼 수 있다.

클릭이 잘 먹힌다는 소리다.

 

 

예시2.  클릭 시 색깔 변화

const userList = document.querySelectorAll(".laptop li");
const listInput = document.querySelector(".list-input");

for(user of userList){
	user.addEventListener('click', function(){
		this.style.color = "red";
	});
};

 

LG를 클릭한 결과

LG를 클릭한 결과 빨간색으로 변화하는 것을 볼 수 있다.

 

 

 

 

DOM Manipulation은 javascript에서 빼놓을 수 없는 존재로, 아주 중요하다.

아직 나도 부족하지만 이 부분을 중점적으로 더 공부해야한다는 필요성을 느낀다.