[JavaScript] 코딩 피드백 - 태그 추가/수정/특정 문자 변경하기 (firstChild, nodeValue)

어제는 javascript로 DOM을 제어하는 방법을 배웠다.

배운 것을 하나의 기능으로 구현해보았는데, [수정] 버튼 클릭시 item 1 /item 2  에서 item을 happy로 바꾸고 싶었다.

그래서 나는 DOM에 innerHTML로 item 1 의 문자를 가져와서 replace로 숫자만 남긴 다음

createTextNode에 happy글자에 방금 남긴 숫자를 더해서 구현했다.

사실, 글자를 바꾼다는 의미로는 많이 부족한 코드 같아서 선생님께 피드백을 요청드렸다.

 

🔽 내가 작성한 코드

changeBtn.addEventListener("click", function () {
	let div = document.getElementById('div'); //DOM객체
	if (div != null) {
	    let pEl = div.childElementCount; //DOM객체

	    if (pEl == 0) { //없을떄
	        alert("변경할 객체가 없습니다.");
	        return false;
	    }

	    for (const iterator of div.children) {
	        let pEl = document.createElement(`P`);

	        var txt = iterator.innerHTML;
	        var num = txt.replace(/[^0-9]/g, '');
	        let text = document.createTextNode(`happy ${num}`);

	        pEl.appendChild(text);
	        div.replaceChild(pEl, iterator);
	    }
}

---

 

🔽 선생님께서 피드백 주신 코드

changeBtn.addEventListener("click", function () {
	let div = document.getElementById('div'); //DOM객체
	if (div != null) {
	    let pEl = div.childElementCount; //DOM객체

	    if (pEl == 0) { //없을떄
	        alert("변경할 객체가 없습니다.");
	        return false;
	    }

	    for (const iterator of div.children) {
	        /*
	        let pEl = document.createElement(`P`);				
	        var txt = iterator.innerHTML;
	        var num = txt.replace(/[^0-9]/g, '');
	        let text = document.createTextNode(`happy ${num}`);
	        */

	        var txt = iterator.firstChild.nodeValue;
	        iterator.innerText = txt.replace(/^item/gi, 'happy');
	    }
}

선생님께서는 firstChild를 가져와서 nodeValue값을 사용하셨다.

이 구조에서 div.children은 <p>item 1</p>을 가르킨다.

✅ div.children의 firstChild를 가져오면 <p>태그 안에 첫번째 node를 가져온다.

첫번째 노드는 item 1이다.

해당 노드의 값을 가져오면 item 1를 문자열로 가져올수 있다.

 

가져온 문자열을 replace 정규식으로 변경하고, div.children에 innerHTML한다.

 

 

See the Pen DOM control (add/delete/modify tags) by hoyashu (@hoyashu) on CodePen.

 

아직은 DOM을 다루는 부분에서 미숙한거 같다.

제이쿼리에 의지하지 말고 자바스크립트도 많이 사용해야겠다!