[JS] DOM 관리, 접근

1. DOM이란

 DOM(Document Object Model)은 웹 페이지에 대한 인터페이스로서 쉽게말해 html의 태그들을 관리하기 위해 알아야하는 모델이다.

 

 

위와 같은 것을  DOM트리라고 하는데 참고만 해도 괜찮을 것 같다.

 

 

2. DOM요소 불러오기

대표적인 방법은 2가지가 있다. querySelector는 클래스, 태그, ID 등을 기준으로 부르는 것이고 getElementById는 Id를 기준으로 부르는 법이다.

 -  querySelector("")

 querySelector를 사용하면 해당 요소 중에 가장 먼저 나오는 것을 반환하는데 대표적으로는 class와 id를 사용한다.

 <div id='id' class='class></div>

형식의 html 태그가 있을 때.

const id = document.querySelector("#id");

 const class =  document.querySelector(".class");

형식으로 부르면 된다.

 - getElementById("")

 getElementById는 오직 Id만을 대상으로 dom객체를 부르는데 

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

형식으로 부르면 된다. 

둘의 차이는 정확하게는 잘 모르겠지만 querySelector보다 getElementById가 더 빠른 속력을 가진다고 한다.

 

 - 복수개 부르기

const classList = document.querySelectorAll(".class");

를 사용하면 "class"라는 클래스를 가진 태그를 모두 부를 수 있다.

const classList = document.getElementsByClassName(".class");
// = document.getElementsByTagName(".tagName");
// = document.getElementsByName(".name");

등을 사용해서도 여러개의 태그들을 가져올 수 있다(배열).

 

 

 

3. DOM 만들기

DOM의 요소는 동적으로도 추가할 수 있다.

 다음은 li요소를 만들어서 ul태그에 집어 넣는 예제이다.

const toDos =[];	// li 내용을 저장할 배열(관리용);
function paintTodo(text){
	const ul = document.getElementById("ulTag");
	const li = document.createElement("li");
	const delBtn = document.createElement("button");
	const span = document.createElement("span");
	const newId = toDos.length+1;
	delBtn.innerText = "X";
	delBtn.addEventListener("click", deleteTodo);
	span.innerHTML = text;
	li.id = newId;
    
	li.appendChild(delBtn);
	li.appendChild(span);
	ul.appendChild(li);
    
	const toDoObj={
		text:text,
		id:newId,
	};
	toDos.push(toDoObj);
}

getElement로 태그를 추가할 요소를 가져온다(ul)

<li id=${newId}><button>X</button><span>${text}</span></li>

위와같은 요소를 만들 것인 차례대로

1. document.createElement("tagName")을 통해서 li, delBtn, span등 필요한 태그를 만들어 준다.

2-1. delBtn.innerText='X'를 통해 태그 사이에 들어갈 내용을 입력해 주고,  addEventListener를 통해 버튼을 클릭했을 시에 실행될 함수를 지정해 준다.

2-2. 마찬가지로 span에 내용을 넣어주고 li.id=newId로 li의 아이디를 설정해준다.

3. 마지막으로 li에 delBtn과 span을 넣어주기 위해서 li.appendChild(-)를 해준다. li의 자식요소로 매개변수를 추가한다는 것이다.

 

이런 방법을 통해 DOM객체를 직접 만들고 요소를 추가할 수 있다.

 

 

4. DOM 삭제

 DOM 삭제라고 해놨지만 DOM객체의 자식요소를 지우는 방법인다.

 

<ul id="ulTag">
	<li id='1'><button>X</button><span>1번째 요소</span></li>
	<li id='2'><button>X</button><span>2번째 요소</span></li>
	<li id='3'><button>X</button><span>3번째 요소</span></li>
	<li id='4'><button>X</button><span>4번째 요소</span></li>
	<li id='5'><button>X</button><span>5번째 요소</span></li>
	<li id='6'><button>X</button><span>6번째 요소</span></li>
</ul>

위와 같은 html문서가 있다고 가정해보자. 그런데 해당 ul태그 내에 li태그를 모두 지워야 하는 상황이 생겼다면

// 1. 실패
const ul = document.getElementById("ulTag");

const childs = ul.childNodes

childs.forEach(function(element){
	childs.removeChild(element);
}

로 해결할 수 있을 줄 알았다. 하지만 이 경우에는 배열의 요소가 계속하여 바뀌기 때문인지 제대로 동작하지 않았다.

따라서

// 2. 성공
const ul = document.getElementById("ulTag");

while(ul.hasChildNodes()){
	ul.removeChild(ul.firstChild);
}

를 통해 삭제하면 될 것 같다.

만일 1번과 같은 방법을 사용하고 싶으면

// 1. 실패
const ul = document.getElementById("ulTag");

const childs = ul.childNodes
const removeList = [];
childs.forEach(function(element){
	removeList.push(element);
}
removeList.forEach(function(element){
	childs.removeChild(element);
}

와 같은 방법을 사용하면 될것 같다.

 특히 특정 조건을 충족하는 요소만을 제거할 때도 이 방법을 사용하면 될 것 같다.

 

5. 후기..

 오늘 웹페이지 구현 과제 코팅테스트를 보고 난 후 너무 피곤했지만 1일 1커밋을 계속 하기 위해 블로그를 켰다..

 

엊그제도 포스팅만 하고 TIL 커밋을 안눌러서 너무 억울했는데..ㅠㅠ

 

무튼 어제 공부한 내용을 가지고 급하게 포스팅을 해본다..