코딩 이야기
DOM에 요소 추가하기 본문
DOM에 새로운 노드를 추가하는 방법을 하기전에 DOM트렝 어떤 노드가 있었는지 다시 한 번 복습해 보겠습니다.
- 모든 HTML태그는 '요소(Element) 노드'로 표현합니다.
- HTML 태그에서 사용하는 텍스트 내용은 '텍스트(Text)'노드로 표현합니다.
- HTML 태그에 있는 속성은 모두 '속성(Attribute)'로 표현합니다.
- 주석은 '주석(Comment)'노드로 표현합니다.
웹 문서에 있는 요소는 단순히 태그만 있는 게 아니라 태그 속성과 내용을 함께 사용합니다. 그래서 <h1>이나 <p>태그를 추가하고 싶다면 단순히 <h1>이나 <p>태그에 해당하는 요소 노드뿐만 아니라 텍스트 내용과 속성도 노드로 추가해야 합니다.
| 속성 | 설명 | |
| 1 | createElement() | 새 요소 노드를 만듭니다. |
| 2-1 | createTextNode() | 텍스트 내용이 있을 경우 텍스트 노드를 만듭니다. |
| appendChild() | 텍스트노드를 요소 노드에 자식 노드로 추가합니다. | |
| 2-2 | createAttribute() | 요소에 속성이 있을 경우 속성노드를 만듭니다. |
| setAttributeNode() | 속성 노드를 요소 노드에 연결합니다. | |
| 3 | appendChild() | 새로 만든 요소 노드를 부모 노드에 추가합니다. |
웹 문서에 새로운 노드 추가하기
1. 추가할 소스 생각하기
<body>와 </body>태그 사이에 텍스트 단락을 추가할건데, 간단히 <p>태그와 class속성, 그리고' 주문이 완료되었습니다.'
라는 내용을 추가해보겠습니다.
<p class="accent">주문이 완료되었습니다.</p>
2. 요소 노드 만들기 - createElement() 함수
가장 먼저 할일은 요소 노드를 만드는 것입니다. 새로운 요소 노드를 만드는 함수는 createElement()인데, 괄호 안의 요소에 해당하는 요소 노드를 적습니다. 여기에서는 <p>태그에 해당하는 요소 노드를 만들어야됩니다. 새로운p요소를 만들골 newP변수에 저장합니다.
var newP = document.createElement("p")
3.텍스트 노드만들기 - createTextNode() 함수
새 요소 노드를 만든 후에는 요소에서 표시할 내용(주문이 완료되었습니다.)을 텍스트 노드로 만듭니다. 텍스트 노드를 만드는 함수는 createTextNode() 이고 괄호 안에 내용을 입력합니다.
콘솔 창에 다음 소스를 입력하세요 '주문이 완료되었습니다.'라는 내용을 담고 있는 텍스트 노드를 만들어 new Text변수에 저장합니다.
var new Text = document.createTextNode("주문이 완료 되었습니다")
"주문이 완료되었습니다"
4. 자식 노드로 추가하기 - appendChild()함수
앞에서 <p>노드와 거기에 사용할 텍스트 노드를 만들었습니다. 아직까지는 만들어지기만하고 서로 부모 자식 연결이 되지않았기에 연결해주어야 합니다. 그럴때 사용하는 함수가 appendChild()입니다. newText를 newP노드의 자식노드로 추가하는 소스를 작성합니다.
newP.appendChild(newText)
"주문이 완료되었습니다"
새로만든 <p>태그소스는 <body>안에 자식노드로 추가합시다.
document.appendChild(newP)
5. 속성 노드 만들기 - createAttribute() 함수
<p>태그에 class="accent" 속성을 추가해 보겠습니다. 먼저 추가할 속성 노드를 만듭니다. 이때 함수 createAttribute()를 사용하여 함수 괄호안에 추가할 속성 이름을 지정합니다. 여기에서는 새로운 class 속성 노드를 만들어 변수 attr 에 저장합니다 . 그리고 attr.value를 사용해 속성값을 "accent"로 지정합니다
var = attr document.createAttribute("class")
attr.value = "accent"
"accent"
6. 속성노드 연결하기 - setAttributeNode() 함수
속성 노드를 만들었으면 앞에서 선언해 놓은 p노드에 연결합니다. 위 함수를 사용하여 다음과 같이 입력합니다.
newP.setAttributeNode(attr)
null
<p>태그에 class="accent"속성이 추가됩니다.
*setAttribute()함수를 사용할 수도 있습니다.
앞에서 속성 노드를 추가할 때 먼저 createAttribute()함수로 속성 노드를 만들고 "Accent" 값을 넣은 뒤 setAttributeNode()함수를 사용해 p노드에 연결했습니다. 하지만 이렇게 텍스트 노드를 만들어 웹 문서에 추가해 놓은 경우 다음 소스와 같이
setAttribute()함수를 사용해서 더 간단히 속성을 추가할 수도 있습니다.
'JAVA스크립트' 카테고리의 다른 글
| for in (0) | 2023.01.18 |
|---|---|
| 참가신청명단만들기 (0) | 2023.01.17 |
| DOM에서 이벤트 처리하기 (0) | 2023.01.13 |
| 웹 요소에 태그 속성 가져와서 수정하기 (0) | 2023.01.13 |
| DOM 문서 객체 모델 (0) | 2023.01.13 |