생성
DOM을 사용해서 원하는 태그의 HTML요소를 만들 수도 있고, 텍스트 노드를 생성해서 HTML 문서에 삽입할 수도 있다. 아래 예제의 경우 (1) <p>태그를 만들어서 .textContent로 문자열을 집어넣고, <div>에 삽입하고, (2) 텍스트노드를 생성해서, 원래 있던 <p>태그에 삽입했다.
| 속성 | 설명 |
| .createElement("태그네임") | 지정한 태그의 HTML요소를 만들어 반환한다. |
| .createTextNode() | 텍스트 노드를 생성한다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="p1"></p>
<div id="div1"></div>
<script>
let p = document.createElement('p');
p.textContent = "여기는 코딩쥐 티스토리입니다."
document.querySelector("#div1").append(p);
let text = document.createTextNode("안녕하세요. 반갑습니다.");
document.querySelector("#p1").append(text);
</script>
</body>
</html>
추가
위의 예제에서 보다시피 HTML태그에 추가할 수 있는 속성들을 DOM은 가지고 있다. 문자열을 삽입할 수도 있고, 생성된 요소를 위 혹은 아래부터 삽입할 것인지도 결정할 수 있다.
문자열 삽입
| 속성 | 설명 |
| .innerHTML | 해당 요소에 문자열을 HTML 형태로 가져오거나 넣는다. |
| .innerText | 해당 요소에 문자열을 Text 형태로 가져오거나 넣는다. |
| .textContent | 해당 요소에 문자열을 Text형태로 가져오거나 넣는다. |
innerHTML의 경우에는 태그도 적용이 가능하고, innerText와 textContent의 경우에는 태그를 사용하지 못한다는 차이점이 있다. 하지만 innerHTML의 경우 보안상의 문제가 있어 사용하는 것을 피하는 것이 좋다. 아래 예시처럼 innerHTML의 경우 div 안에 <h2>태그가 생긴 것을 볼 수 있고, innerText와 textContent의 경우에는 div안에 글자가 작성된 것을 볼 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
document.querySelector("#div1").innerHTML = "<h2>안녕하세요. 반갑습니다. -innerHTML </h2>";
document.querySelector("#div2").innerText = "<h2>안녕하세요. 반갑습니다. -innerText</h2>";
document.querySelector("#div3").textContent = "<h2>안녕하세요. 반갑습니다. -textContent</h2>";
</script>
</body>
</html>
요소 삽입
| 속성 | 설명 |
| .append() | 지정한 요소의 안쪽에서 아래쪽부터 차례대로 요소를 삽입한다. |
| .prepend() | 지정한 요소의 안쪽에서 위쪽부터 차례대로 요소를 삽입한다. |
| .before() | 해당 요소 앞에 엘리먼트를 삽입한다. |
| .after() | 해당 요소 뒤에 엘리먼트를 삽입한다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="center">-------------------기준선------------------</p>
<script>
let p1 = document.createElement('p');
p1.textContent = "append()를 사용해서 삽입됨"
let h1 = document.createElement('h1');
h1.textContent = "prepend()를 사용해서 삽입됨"
let h3 = document.createElement('h3');
h3.textContent = "before()을 사용해서 삽입됨"
let p2 = document.createElement('p');
p2.textContent = "after()을 사용해서 삽입됨"
center.append(p1);
center.prepend(h1);
center.before(h3);
center.after(p2);
</script>
</body>
</html>
복사
노드(DOM tree를 구성하고 있는 객체 하나)를 복사해서 새로운 객체로 만들 수 있다. 아래 예제처럼 <p>태그가 복사될 때 p태그에 포함된 id값도 같이 복사되는 것을 볼 수 있다.
| 속성 | 설명 |
| .cloneNode() | 기존의 노드를 복사한다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="p1">안녕하세요</p>
<script>
let p2 = document.querySelector("#p1").cloneNode();
p2.textContent = "복사한 p태그에 작성합니다."
document.body.append(p2.textContent);
</script>
</body>
</html>
대치
노드 자체를 다른 노드로 대치할 수 있는 DOM 속성도 있다. 아래의 예제는 <p>태그의 노드를 복사하고 내용을 새로 작성하여, 기존의 노드와 대치했다.
| 속성 | 설명 |
| .replaceWith | 해당 노드를 다른 노드로 교체한다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="p1">안녕하세요</p>
<script>
let p2 = document.querySelector("#p1").cloneNode();
p2.textContent = "복사해서 내용을 변경했습니다."
document.querySelector("#p1").replaceWith(p2.textContent);
</script>
</body>
</html>
제거
자기자신의 노드를 삭제할 수도 있다. 아래 예제는 클릭하면 삭제되는 코드를 작성해봤다.
| 속성 | 설명 |
| .remove() | 해당 요소 자기자신을 삭제한다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width:200px;
height: auto;
background-color: lightcoral;
text-align: center;
}
</style>
</head>
<body>
<div>누르면 없어집니다.</div>
<script>
document.querySelector("div").addEventListener("click", function(){
document.querySelector("div").remove();
})
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : DOM의 이벤트를 설정해보자 (0) | 2024.07.29 |
|---|---|
| JavaScript : DOM을 통해 input 값 받아오기 (0) | 2024.07.29 |
| JavaScript에서 this는 무엇을 가리키는걸까? (0) | 2024.07.29 |
| JavaScript : DOM을 통해 속성을 조작해보자 (0) | 2024.07.27 |
| JavaScript : DOM의 기본에 대하여 (0) | 2024.07.25 |
| JavaScript의 Spread 연산자에 대해 알아보자 (0) | 2024.07.24 |
| JavaScript 이벤트 버블링과 이벤트 캡쳐란? (0) | 2024.07.23 |
| JavaScript 기본형과 참조형의 차이에 대해 알아보자 (0) | 2024.07.23 |