DOM 트리에 새로운 노드를 생성하고, 생성한 노드를 기존 DOM 트리에 연결하면 동적으로 새로운 요소를 화면에 추가 가능
노드 추가하기
노드 추가 메서드
노드 생성
createElement(): 요소 노드를 생성createTextNode(): 텍스트 노드 생성createAttribute(): 속성 노드 생성
노드 연결
<기준 노드>.appendChild(< 자식 노드 >): 기준 노드에 자식 노드 연결<기준 노드>.setAttributeNode(< 속성 노드>): 기준 노드에 속성 노드 연결
<!DOCTYPE html>
<html>
<head>
<title>Create Node</title>
</head>
<body>
<script></script>
</body>
</html>위 코드 DOM 트리 형태
일반적으로 DOM 트리에 새로운 요소를 연결할때는 주축이 되는 요소 노드를 먼저 생성
<script>
// 요소 노드 생성하기
const aE1 = document.createElement("a");
document.appendchild(aE1);
</script>
위처럼 단순하게 요소 노드만 연결했을 때는 웹 브라우저에는 아무것도 보이지 않음
-> 보통은 텍스트 노드도 함께 연결
<script>
(중략)
// 텍스트 노드 추가하기
const txtE1 = document.createTextNode("길 벗");
document.querySelector("a").appendChild(txtE1);
</script>
hn,p,span,i 태그 처럼 일반적으로 텍스트가 필요한 요소들은 이렇게 텍스트 노드만 생성하고 연결
-> a태그나 img 태그처럼 별도의 속성이 필요한 요소들은 텍스트 노드만으로 충분 X
-> 속성 노드를 생성해서 연결해주어야 함
<script>
...
const hrefAttr = document.createAttribute("href");
hrefAttr.value = "https://www.gilbut.co.kr";
document.querySelector("a").setAttributeNode(hrefAttr);
</script>
</script>
속성 노드는 자식 노드로 추가하는것이 아님!
노드 삭제하기
removeChild() 메서드는 부모 노드에 연결된 자식 노드를 삭제
-> 이는 항상 부모 노드에 접근해서 삭제 해야 함
<부모 노드>.removeChild(<자식 노드>);<body>
<p> text 1</p>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.google.com">구글</a>
<script>
const pE1 = document.querySelector("p");
pE1.parentNode.removeChild(pE1);
</script>
</body>DOM 트리를 순회하면서 a 태그에 해당하는 요소 모두 삭제
<body>
<p> text 1</p>
<a href="https://www.naver.com">네이버</a>
<a href="https://www.google.com">구글</a>
<script>
const childNodes = document.body.childNodes;
childNodes.forEach((node) =>{
if(node.nodeName === "a")
node.parentNode.removeChild(node);
})
</script>
</body>
Journey for Backend Developer