본문 바로가기
개발 공부 일지/JavaScript

자바스크립트 - 요소 노드 Element node

by yelimu 2024. 7. 16.
  • 요소 노드에 접근하기
  • 요소 노드를 추가하기
  • 요소 노드를 삭제/이동하기

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>
<body>
  <div id="content">
    <h2 id="title-1">Cat-1</h1>
    <ul id="list-1">
      <li>Ragdoll</li>
      <li>British Shorthair</li>
      <li>Scottish Fold</li>
      <li>Bengal</li>
      <li>Siamese</li>
      <li>Maine Coon</li>
      <li>American Shorthair</li>
      <li>Russian Blue</li>
    </ul>
    <h2 id="title-2">Cat-2</h1>
    <ul id="list-2">
      <li>Sphynx</li>
      <li>Munchkin</li>
      <li>Persian</li>
      <li>Norwegian Forset</li>
      <li>Turkish Angora</li>
      <li>Bombay</li>
      <li>Selkirk Rex</li>
      <li>Munchkin</li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>

 

const myTag = document.querySelector(#list-1) 

 

myTag의 부모/자식/형제 요소 노드(Element node) 접근하기

 

//형제 요소 노드

console.log(myTag.previousElementSibling);

console.log(myTag.nextElementSibling);

 

//부모 요소 노드

console.log(myTag.parentElement);

 

//자식 요소 노드

console.log(myTag.children[1]);

console.log(myTag.firstElementChild);

console.log(myTag.lastElementChild);

 

대상 노드가 없으면 null 반환

요소 노드가 아닌 다른 노드로 이동하고 싶을 때 사용하는 프로퍼티

node.childNodes -> NodeList 로 출력

node.firstChild

node.lastChild

 

node.parentNode

 

node.previousNode

node.previousSibling

node.nextSibling

 

예상치 못한 텍스트 노드가 선택되어 의도치않은 결과를 만들 수 있기때문에 잘 사용하지 않는다.

(줄바꿈, 띄어쓰기 등도 텍스트 노드에 포함이 됨)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>
<body>
  <div id="content">
    <h2 id="title-1">Cat-1</h1>
    <ul id="list-1">
      <li>Ragdoll</li>
      <li>British Shorthair</li>
      <li>Scottish Fold</li>
      <li>Bengal</li>
      <li>Siamese</li>
      <li>Maine Coon</li>
      <li>American Shorthair</li>
      <li>Russian Blue</li>
    </ul>
    <h2 id="title-2">Cat-2</h1>
    <ul id="list-2">
      <li>Sphynx</li>
      <li>Munchkin</li>
      <li>Persian</li>
      <li>Norwegian Forset</li>
      <li>Turkish Angora</li>
      <li>Bombay</li>
      <li>Selkirk Rex</li>
      <li>Munchkin</li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>

const myTag = document.querySelector('#list-1');

 

console.log(myTag.innerHTML);

요소 안에 있는 html코드를 문자열로 리턴한다 (태그와 태그 사이의 줄바꿈, 들여쓰기 모두 포함)

  
    

      <li>Ragdoll</li>
      <li>British Shorthair</li>
      <li>Scottish Fold</li>
      <li>Bengal</li>
      <li>Siamese</li>
      <li>Maine Coon</li>
      <li>American Shorthair</li>
      <li>Russian Blue</li>
    

 

-> 요소 안의 html 코드를 수정할 때 활용 가능 

 

myag.innerHTML = '<li>Exotic</li>' 

-> 요소 안의 내용을 바꿔버림

 

myag.innerHTML += '<li>Exotic</li>' 

 

-> 덧셈할당 연산자로 맨 끝에 더해줄 수 있음 

console.log(myTag.outerHTML);

해당 요소를 포함한 전체 html 코드가 출력 됨 

 

<ul id="list-1">
      <li>Ragdoll</li>
      <li>British Shorthair</li>
      <li>Scottish Fold</li>
      <li>Bengal</li>
      <li>Siamese</li>
      <li>Maine Coon</li>
      <li>American Shorthair</li>
      <li>Russian Blue</li>
      </ul>

 

자기 자신을 포함한 코드를 가리키므로

내용 수정이 아니라 아예 그 자체 코드가 교체될 수 있음

myTag.outerHTML = '<ul id="new-list"><li>Exotic</li></ul> ;

list-1 요소가 -> new-list 요소로 바꿈

console.log(myTag. textcontent ); 

요소 안에 있는 내용 중 html 코드를 제외한 내용만 가져옴


  

      Ragdoll
      British Shorthair
      Scottish Fold
      Bengal
      Siamese
      Maine Coon
      American Shorthair
      Russian Blue
    

 

myTag.textcontent = 'new text!' ;

요소 내부의 값을 완전히 교체함 (innerHTML과 동일)

특수문자 <li> </li> 도 문자열로 그대로 출력함

요소 노드 추가하기 

 

innerHTML, outerHTML 을 사용하면 내용을 덮어쓰기 때문에 자기 자신을 반복해서 적어주어야 하고

특히 outerHTML 은 자기 자신을 DOM 트리로부터 제거하고 & 새로운 노드를 만들어 대체하게 된다 

-> 태그를 다시 찾아서 변수에 할당해주어야 함

 

1. 새로운 요소 노드를 생성해서 2. 꾸며주고(= 내용을 넣는다) 3. 원하는 위치에 생성하기 

1. const first = document.createElement('태그이름');         <- li, h1~6, p등등 

2. first.textContent = '내용';  (또는 inner HTML를 사용해서 코드를 함께 작성할 수 있다)

3. tomorrow.prepend(first); 또는 .append(first);     

<- 메소드를 호출한 노드의 첫번째 / 마지막 자식 노드로 파라미터로 전달한 값을 추가할 수 있다 

     .before 또는 .after > 형제 노드로 추가

파라미터로 변수 뿐 아니라 문자열을 받아 텍스트 노드로 추가 할 수 있음 

여러개 파라미터를 넣으면 넣은 순서대로 추가됨 (prepend, before의 경우에도 넣은 순서 그대로 추가됨)

 

const toDoList = document.querySelector('#to-do-list');

function addNewTodo(text) {
	// 여기에 코드를 작성하세요
	const li = document.createElement('li');
	li.textContent = text;
	toDoList.append(li);
}

// 테스트 코드
addNewTodo('자바스크립트 공부하기');
addNewTodo('고양이 화장실 청소하기');
addNewTodo('고양이 장난감 쇼핑하기');

태그를 만든다 document.createElement('태그이름') -> 변수li에 할당한다

태그의 내용을 넣는다 li.textContent = 함수 파라미터로 받은 text ;

원하는 위치 태그에 접근한 변수에 추가한다

요소 노드 삭제/이동하기 

 

tomorrow.remove();                   tomorrow 노드가 삭제됨

today.children[2].remove();       today의 2번 인덱스 (3번째) 자식 노드가 삭제됨

today.append(tomorrow.children[1]);   tomorrow 마지막 요소를 today의 마지막으로 이동

 

tomorrow.children[1].after(today.children[1]);  중간으로 옮길때는 자식 노드 의 형제 노드로 삽입하기 

tomorrow.children[2].before(today.children[1]); 

tomorrow.lastElementChild.before(today.children[1]); 

'개발 공부 일지 > JavaScript' 카테고리의 다른 글

자바스크립트 - 스타일 다루기  (0) 2024.07.16
자바스크립트 - HTML 속성 다루기  (0) 2024.07.16
자바스크립트 - 문서 객체 모델 (DOM)  (1) 2024.07.16
자바스크립트 - window  (0) 2024.07.15
자바스크립트 - 이벤트  (0) 2024.07.15

관련글

티스토리툴바