[javascript] HTML DOM 조작해보자 (innerHTML, addEventListener)

배경설명

• 개발환경 내 html, json 과 같은 정적 자원은 wcms 솔루션을 활용하여 관리, 배포 (이관 프로세스 간단)
• 변경이 빈번한 화면의 경우 전체 html을 wcms 에서 개발 및 관리

문제인식

• html tag 마다 click event 추가할 경우 하드 코딩, html에 새로운 content 추가 시 web 자원 이관 필요
• script 에서 동적으로 DOM 을 조작하여 변경에 유연하게 대응할 수 있는 방법 고민
  ex) html text 변경, click event 추가

해결방법

1. document 내 DOM 조작 함수 활용
   ex) getElementById(), querySelectAll(), getAttribute()
2. <a> tag id 를 통해 tag node list 를 뽑아내 click event 등록

솔루션

1. innerHTML : html text 변경

document.getElementById('nm').innerHTML = nm;

2. addEventListener : <a> tag click event 추가
   (1) html click evnet template 정의

   <a href="javascript::void(0);" id="tagId" linkUrl="/path/.../srnId"></a>

   (2) <a> tag node 객체 click evnet 추가

   const aTagList = document.querySelectAll('a');
   aTagList.forEach(node => { // Array 예외처리 생략
   	const aTagId = node.getAttribute('id');
   	const aTagNode = document.getElementById(aTagId);
   	// node.addEventListener('click', () => { // error 발생!
   	aTagNode.addEventListener('click', () => {
   		const aTagLinkUrl = node.getAttribute('linkUrl');
   		moveSrn(aTagLinkUrl); // 화면 이동 로직 구현
   	});
   });

주의사항

• const 키워드를 통한 tag node 객체 할당 없이 forEach block 내에서 click event 추가 시 error 발생 => addEventListener 가 비동기/콜백 함수이기 때문으로 추정

결론

• html 내 정의된 <a> tag template content가 추가될 경우, 웹 자원 이관 없이 click event 동작 가능
• DOM 조작 함수를 잘 활용하면 변경에 유연한 코드를 작성할 수 있다.

참고

• wcms : web content management system