본문 바로가기
Java Script/공부 기록

[JavaScript] node/요소 가져오기, 변경, 생성, 삭제하기

sorom 2023. 8. 29. 16:44

자바스크립트는 DOM을 통해 요소(element)를 아래와 같이 조작하며 웹페이지 콘텐츠에 영향을 줄 수 있다.

  1. node/요소 내용 가져오기
  2. node/요소 내용 변경하기
  3. node/요소 내용 추가하기
  4. node/요소 내용 삭제하기

1. node/요소 내용 가져오기

자바스크립트에서 div element에 접근하여 내용을 가져올 때는 innerHTML, innerText, textContent 세 가지 속성을 사용할 수 있다. 코드로 확인해보자

- HTML

<div id='parent'>
  안녕하세요?               만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>
</div>
<input type='button'
       value='innerHTML'
       onclick='getInnerHTML()'/>
<input type='button'
       value='innerText'
       onclick='getInnerText()'/>
<input type='button'
       value='textContent'
       onclick='getTextContent()'/>

1-1. element.innerHTML

function getInnerHTML() {
  const element = document.getElementById('parent');
  alert(element.innerHTML);
}

/*값
안녕하세요?               만나서 반가워요.
  <span style='display:none'>숨겨진 텍스트</span>
</div>
*/

innerHTML은 element 안의 HTML, XML을 그대로 가져온다. 따라서 위 예시 코드에서 결과값으로 div안에 있는 HTML 전체 내용을 가져온 것을 확인할 수 있다.

1-2. element.innerText

function getInnerText() {
  const element = document.getElementById('my_div');
  alert(element.innerText);
} 

/*값
안녕하세요? 만나서 반가워요.
*/

innerText는 element 안의 텍스트를 사용자에게 "보여지는 대로" 가져온다. 따라서 위 예시 코드에서 원래 <div>안에는 안녕하세요?와 만나서 반가워요 사이에는 많은 공백들이 입력되어있지만, 브라우저가 사용자에게 내용을 보여줄 때는 연속된 공백을 무시하고 하나의 공백만 처리하여 보여주기 때문에 innerText 값도 마찬가지로 "안녕하세요? 만나서 반가워요."로 공백이 하나만 반영되어 나타나는 것을 확인할 수 있다.

1-3. node.textContent

function getTextContent() {
  const element = document.getElementById('parent');
  alert(element.textContent);
}

/* 값
안녕하세요?     만나서 반가워요.
숨겨진 텍스트
*/

textContent는 'Node'의 속성을 가진 것으로, innetText와는 달리 <script>나 <style> 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 가져온다. 따라서 위 예시 코드에서는 '숨겨진 텍스트'가 style에서 display-none으로 사용자에게 보여지지 않게 처리되었는데 textContent는 이와 상관없이 text 값을 모두 가져오기 때문에 '숨겨진 텍스트'까지 그대로 출력되는 것을 확인할 수 있다.

2. node/요소 내용 변경하기

자바스크립트에서 div element에 접근하여 내용을 가져올 때와 마찬가지로 div의 내용을 변경할 때도 innerHTML, innerText, textContent 속성을 사용해서 변경이 가능하다. 

- HTML

<div id='my_div'>
  <span style='color:red'>안녕하세요?</span>
</div>
<input type='button'
       value='innerHTML'
       onclick='setInnerHTML()'/>
<input type='button'
       value='innerText'
       onclick='setInnerText()'/>
<input type='button'
       value='textContent'
       onclick='setTextContent()'/>

- 자바스크립트

function setInnerHTML() {
  const element = document.getElementById('my_div');
  element.innerHTML 
    = '<div style="color:blue">InnerHTML<div>';} 
    
/*값
innerHTML 속성에 HTML을 적용하면, html element가 div 태그에 들어가서 style이 적용되어 파란색으로 글자 색 적용됨
*/

function setInnerText() {
  const element = document.getElementById('my_div');
  element.innerText 
    = '<div style="color:blue">InnerText<div>';} 

function setTextContent() {
  const element = document.getElementById('my_div');
  element.textContent 
    = '<div style="color:blue">TextContent<div>';}
    
/*값
innerText = '<div style="color:blue">InnerText<div>'
textContent = '<div style="color:blue">TextContent<div>'

innerText와 textContent는 할당된 문자열을 그대로 텍스트 형태로 div에 넣음
*/

3. node/요소 내용 추가하기

- HTML

<body>
  <input type='button'
         value='createDiv'
         onclick='createDiv()'/>
</body>

3-1. element.createElement()

새로운 element를 생성하는 함수이다.

const newDiv = document.createElement('div');}

위 예시 코드에서는 createElement()를 이용해서 document에 새로운 <div> element를 생성했다.

3-2. element.createTextNode()

element에 붙일 텍스트 노드를 생성하는 함수이다.

const newText = document.createTextNode('안녕하세요');

위 예시 코드에서는 createTextNode()를 이용해서 생성한 <div> element에 붙일 텍스트 노드를 생성했다.

3-3. element.appendChild()

새로운 element를 자식 요소로 추가할 수 있는 함수이다.

newDiv.appendChild(newText);

위 예시 코드에서는 appendChild()를 이용해서 생성한 텍스트 노드를 <div>에 element로 추가했다.

4. node/요소 내용 삭제하기

4-1. element.remove()

element를 삭제하기 위해서는 삭제하려는 element를 선택하고, element.remove() 함수를 호출한다.

- HTML

<div id='my_div'>
  안녕하세요.
</div>
  const div = document.getElementById('my_div');
  div.remove();
}

 

 

🚨 퀴즈
아래 두 가지 예제 코드의 차이점을 분별해보세요.
const something = document.createElement("p");

for (let i = 0; i < 5; i++) {
  something.textContent = i;
  document.body.appendChild(something);
}
for (let i = 0; i < 5; i++) {
  const something = document.createElement("p");
  something.textContent = i;
  document.body.appendChild(something);
}

첫 번째 코드는 <p> 요소를 처음에 생성한 다음 for 구문에서 <p> 요소의 내용을 textContent를 통해 반복적으로 변경하고 <body>에 계속 추가된다. <body>는 반복이 진행될 때 마다 새로운 <p>요소로 덮어쓰여지게된다. 따라서 for 반복문을 통해 텍스트 변경이 5회 진행되었지만 최종적으로 화면에 표시되는 것은 마지막에 변경된 텍스트만 나타난다. 

 

두 번째 코드는 반복이 진행될 때 마다 <p> 요소가 생성되고 <p> 요소의 내용이 textContent에 따라 반복될 때 마다 새로 설정 후 요소를 <body>에 추가한다. 따라서 화면에는 0부터 4까지의 다섯 개의 <p> 요소가 표시된다.

Creating Element Practice

/*

  < Creating Elements basic 1 >

  빈 화면에 "I am a paragraph"라는 텍스트가 나타날 수 있도록

  <p> 태그 생성 및 텍스트 추가 후 <body> 태그의 자식으로 추가해주세요!
  
  🚨 HTML, CSS는 건드리지 않고 JS만 수정해주세요.
  
*/

const bodyElement = document.querySelector("body");

A :

const newP = document.createElement("p");
newP.textContent = "I am a Paragraph";
bodyElement.appendChild(newP);

/*

  < Creating Elements basic 2 >

  <li> 태그를 생성하여 화면에 • second 가 나타날 수 있도록
  
  <ul> 태그의 자식으로 추가해주세요!

  🚨 HTML, CSS는 건드리지 않고 JS만 수정해주세요.

*/

const ulElement = document.querySelector("ul");

A:

const ulElement = document.querySelector("ul");
const newLi = document.createElement("li");
const secondLi = document.createTextNode("second");

newLi.appendChild(secondLi);
ulElement.appendChild(newLi);

/*

  < Making todo list >

  할일 목록을 만드려고 합니다. task를 for문으로 순회하며 각각의 요소를
  
  <li> 태그의 텍스트로 만들어 <ul> 태그의 자식으로 추가해주려고 합니다.
  
  최종적으로 Code, Run, Eat, Sleep이 핑크색 화면 안에 나타나도록
  
  코드를 작성해주세요!
  
  🚨 HTML, CSS는 건드리지 않고 JS만 수정해주세요.
  
  
  +-------------------+
  |  <ul>             |
  |    <li>Code</li>  |
  |    <li>Run</li>   |
  |    <li>Eat</li>   |
  |    <li>Sleep</li> |
  |  </ul>            |
  +-------------------+

*/

const task = ["Code", "Run", "Eat", "Sleep"];
const ulElement = document.querySelector("ul");

A :

for (let i = 0; i < task.length ; i++){
  const newLi = document.createElement("li");
  newLi.textContent = task[i];
  ulElement.appendChild(newLi);
}

 

 

'Java Script > 공부 기록' 카테고리의 다른 글

[JavaScript] 부모, 자식, 형제와 요소 찾기  (0) 2023.08.29
[JavaScript] 선택자  (0) 2023.08.28
[JavaScript] 특정 값의 배열 위치(index) 찾기  (0) 2023.08.27
[JavaScript] DOM이란? Node와 Element의 차이점  (0) 2023.08.25
[JavaScript] 문자열 공백 제거  (0) 2023.08.23

'Java Script/공부 기록' Related Articles

티스토리툴바