[DOM] - 노드 다루기

Donggu(oo)·2022년 11월 12일

목록 보기

38/49

1. HTML 요소 추가(삽입)

1) append()

append() 메서드는 추가된 요소를 자식 객체로 인식하여 자신에게 포함시키고 선택한 요소의 끝에 삽입한다.
생성한 요소를 append() 메서드를 사용하여 HTML Element를 부모 노드에 포함시킨다.
요소 생성 이후 트리 구조와 연결(append) 해줘야 생성한 요소가 html에 적용된다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Document</title>
    </head>
    <body>
        <div id="container">
            <h2>Tweet List</h2>
            <div class="tweet">hello</div>
            <div class="tweet">world</div>
            <div class="tweet">code</div>
            <div class="tweet">states</div>
          	<p></p> <!-- createElement로 생성된 div 태그-->
        </div>
        <div></div> <!-- createElement로 생성된 div 태그-->
    </body>
</html>

let create = document.createElement('div')
//  변수 create에 담긴 새로운 <div> 요소를 <body> 요소 내부 제일 하단에 넣음
document.body.append(create)

const container = document.querySelector('#container')
const tweetDiv = document.createElement('p')
// 변수 tweetDiv에 담긴 새로운 <p> 요소를 container의 마지막 자식 요소로 추가
container.append(tweetDiv)

append와 appendChild의 차이점

append 메서드는 요소에 노드 객체 또는 DOM문자열을 자식 요소로 추가할 수 있지만, appendChild는 노드 객체만을 추가할 수 있다.
append한번에 여러 개의 자식 요소를 설정할 수 있지만, appendChild 하나의 노드만 추가할 수 있다.

2) prepend()

선택한 요소의 맨 앞에 삽입한다.

3) before()

선택한 요소의 이전에 삽입한다.

4) after()

선택한 요소의 다음에 삽입한다.

5) replaceWith()

선택한 요소를 새로운 노드로 대체한다.

2. HTML 요소 내용 변경

1) textContent

2) innerHTML

innerHTML은 HTML 요소의 내용을 추가하거나 변경하고 싶은 경우 사용하는 프로퍼티이다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>JavaScript DOM Element</title>
</head>
<body>
	<h1>innerHTML을 이용한 요소의 내용 변경</h1>
	<p id="text">이 문장을 바꿀 것입니다!</p>
  </body>
</html>

let str = document.getElementById("text");
// id가 text인 요소의 내용을 변경
str.innerHTML = "이 문장으로 바뀌었습니다!";

textContent와 innerHTML의 차이점

textContent : 선택한 요소에서 HTML 요소를 제거한 순수한 텍스트 데이터의 값
innerHTML : 선택한 요소의 HTML 태그를 그대로 제공, 따라서 보안에 취약하다. 사용자로부터 전달받은 콘텐츠를 추가할때는 사용하지 않는 것이 좋다.

const content = document.getElementsByTagName('p')[0];

/* 조회 */
content.textContent;  // Simple HTML Text
content.innerHTML;    // Simple <b>HTML</b> Text

3. HTML 요소 삭제

1) remove()

삭제하려고 하는 요소의 위치를 알고 있는 경우 사용한다.

node.remove()

2) removeChild()

자식 요소를 지정해서 삭제하려고 할 때 사용한다.
모든 자식 요소를 삭제하기 위해 반복문을 활용할 수 있다.

// 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제한다.
// container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거한다.
const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

// 제목(H2)인 'Tweet List' 삭제를 방지하기 위해 자식 요소를 1개만 남기도록 하는 while문
const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

// 제목(H2)인 'Tweet List' 삭제를 방지하기 위해 직접 class 이름이 tweet인 요소만 찾아서 제거
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}