본문 바로가기
CodeIt_Sprint/인터렉티브_자바스크립트

(4)인터렉티브_자바스크립트_요소노드의 프로퍼티인, innerHtml,outerHtml,textContent , Dom트리에서 특정 노드위치에 , 1_ 노드 생성 2_ 노드 제거 3_ 노드 옮기기

by 코잼민 2024. 11. 28.

● 개념1 : 요소노드.innerHtml , 요소노드.outerHtml , 요소노드.textContent 

  • 요소노드.innerHtml : 요소노드 포함 X , 내부 태그 + 들여쓰기 포함
  • 요소노드.outerHtml : 요소노드 포함 O , 내부 태그 + 들여쓰기 포함
  • 요소노드.textContent : 요소노드의 자손들의 모든 텍스트 노드들 + 들여쓰기 포함

//innerHtml, outerHtml, textContent 는 문제를 풀면서 익히는 게 더 낫다

//솔직히 여기서 제일 중요한 프로퍼티는 textContent임

○ 연습 문제 :

다음 HTML 코드를 보고 아래의 문제를 해결해 주세요. 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>새로운 코딩 교육의 시작</title>
</head>
<body>
  <h2>진행 중인 토픽</h2>
  <ul id="doing-list">
    <li>인터랙티브 자바스크립트</li>
    <li>프로그래밍 언어 이해하기</li>
    <li>프로그래머의 세계 이해하기</li>
    <li>소프트웨어 이해하기</li>
  </ul>
  <h2>완료 한 토픽</h2>
  <ul id="done-list">
    <li>프로그래밍 시작하기 in JavaScript</li>
    <li>프로그래밍 핵심 개념 in JavaScript</li>
    <li>프로그래밍과 데이터 in JavaScript</li>
    <li>HTML/CSS 시작하기</li>
    <li>HTML/CSS 핵심 개념</li>
    <li>반응형 웹 퍼블리싱</li>
  </ul>
  <script src="index.js"></script>
</body>
</html>

문제1_다음 코드를 실행했을 때 콘솔에 출력되는 결과로 올바른 것을 선택해 주세요. 

const doingList = document.querySelector('#doing-list');

console.log(doingList.innerHTML);

① _정답 

    <li>인터랙티브 자바스크립트</li>
    <li>프로그래밍 언어 이해하기</li>
    <li>프로그래머의 세계 이해하기</li>
    <li>소프트웨어 이해하기</li>

②

<li>인터랙티브 자바스크립트</li>
<li>프로그래밍 언어 이해하기</li>
<li>프로그래머의 세계 이해하기</li>
<li>소프트웨어 이해하기</li>

③

 <li>인터랙티브 자바스크립트</li>
<li>프로그래밍 언어 이해하기</li>
<li>프로그래머의 세계 이해하기</li>
<li>소프트웨어 이해하기</li>

④

 
    인터랙티브 자바스크립트
    프로그래밍 언어 이해하기
    프로그래머의 세계 이해하기
    소프트웨어 이해하기

 

문제2_다음 코드를 실행했을 때 콘솔에 출력되는 결과로 올바른 것을 선택해 주세요.

const doneList = document.querySelector('#done-list');

doneList.textContent = '<li>인터랙티브 자바스크립트</li>';

console.log(doneList.textContent);

①

    프로그래밍 시작하기 in JavaScript
    프로그래밍 핵심 개념 in JavaScript
    프로그래밍과 데이터 in JavaScript
    HTML/CSS 시작하기
    HTML/CSS 핵심 개념
    반응형 웹 퍼블리싱
    인터랙티브 자바스크립트

②

    
    <li>프로그래밍 시작하기 in JavaScript</li>
    <li>프로그래밍 핵심 개념 in JavaScript</li>
    <li>프로그래밍과 데이터 in JavaScript</li>
    <li>HTML/CSS 시작하기</li>
    <li>HTML/CSS 핵심 개념</li>
    <li>반응형 웹 퍼블리싱</li>
    <li>인터랙티브 자바스크립트</li>

③

인터랙티브 자바스크립트

④_정답

<li>인터랙티브 자바스크립트</li>

● 개념2 : 노드를 생성하여, Dom트리구조의 특정위치에 배치하기 

○ 필요한 준비물 :

- document의 객체 프로퍼티 메소드 createElement('TagName')

- 요소노드의 객체 프로퍼티 textContent

- 배치기준노드.prepend(세로운노드) || .append(새로운노드) || .before(새로운노드) || .after(새로운 노드)

○ 순서 : 

  • 순서1_ 배치할 노드를 변수에 저장 //const node = document.querySelector();
  • 순서2_ 새로운 노드 변수 <= 노드 생성 및 textContent 삽입

//const newNode = document.createElement('li');

//newNode.textContent = '자살하기'

 

  • 순서3_ 배치할 노드 기준

◆ 자식에서, //prepend || append

=> 맨 상위에 배치 : node.prepend(newNode);

=> 맨 마지막 하위에 배치 : node.append(newNode);

◆ 형제에서, //before || after

=> 앞에 배치 : node.before(newNode);

=> 뒤에 배치 : node.after(newNode);

○ 또 다른 기능 : // prepend() || append() || before() || after()

  • 기능1_ 매개인자의 newNode와 같은 요소노드 대신, "문자열"을 입력하면, 텍스트 노드로 추가 배치 된다.
  • 기능2_ 매개인자에 2개이상의 여러개 적용 가능 ★순서조심

ex_ Default상황

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>새로운 코딩 교육의 시작</title>
</head>

<body>
  <h2 id="today-title">오늘 할일</h2>
  <ul id = "today">
    <li>1</li>
    <li>2</li>
      <li>3</li>
      <li>4</li>
  </ul>
  <script>
    const today = document.querySelector('#today');

    const newNode1 = document.createElement('li');
    const newNode2 = document.createElement('li');
    const newNode3 = document.createElement('li');

    newNode1.textContent = "자살하기";
    newNode2.textContent = "살자하기";
    newNode3.textContent = "둘다하기";

    today.prepend(newNode1,newNode2,newNode3);

    
  </script>
</body>

</html>

출력장면

● 개념3 : Dom트리의 특정 노드를 삭제하기 //개쉬움 => 요소노드의 프로퍼티 메소드 remove()

  • 순서1_ 삭제하고 싶은 노드를 변수에 저장
  • 순서2_ node.remove() 조지셈

● 개념4 : 특정 노드를 Dom트리의 특정 위치에 옮기기  => prepend() || append() || before() || after() 

  • ★순서1_ 출발지와 목적지의 상위 부모 노드를 변수에 저장
  • 순서2_ prepend() || append() || before() || after() 이용하여 , 목적지.append(출발지.children[..]); 로 응용한다.

 

○ 연습 문제 :

▶Default 출력 장면 :

▶Default html :

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>새로운 코딩 교육의 시작</title>
</head>

<body>
  <h2 id="yesterday-title">어제 할일</h2>
  <ul id="yesterday">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <h2 id="today-title">오늘 할일</h2>
  <ul id="today">
    <li>자살하기</li>
    <li>살자하기</li>
    <li>둘다하기</li>
  </ul>
  <script>
  </script>
</body>

</html>

 

▶요구사항 : 

어제할일의 4를 삭제하고, 오늘 할일의 "살자하기" 항목을 어제 할일을 옮기는 JavaScript코드를 <script></script> 내에 작성하시오.

-답 :

  const yesterday = document.querySelector('#yesterday');//목적지의 부모 태그 변수에 저장
    const today = document.querySelector('#today');//출발지의 부모태그 변수에 저장
    
    //오늘 할일의 4삭제
    yesterday.lastElementChild.remove();

    //오늘 할일의 "살자하기" 를 어제 할일의 "3"앞으로 로 옮기기
    
    yesterday.children[2].before(today.children[1]);

 

○ 연습 문제 :

- 문제조건 :

언제나 시간을 계획적으로 관리하는 부지런한 지용이는 매일 아침마다 오늘 꼭 해야할 일들을 기록하는 습관이 있습니다. 최근 자바스크립트를 배운 지용이는 할 일을 기록하는 프로그램을 만들어 보려 하는데요.

가장 기본적으로 HTML 코드는 의도한 대로 작성한 것 같은데, 자바스크립트로 할 일을 추가하는 기능은 어떻게 구현해야 할지 갈피를 못 잡고 있습니다.

지용이는 본인이 작성한 <ul id="to-do-list"></ul> 태그 안에 li 태그로 오늘 할 일들을 추가하고 싶어합니다.

어려워하는 지용이를 위해서 아래 내용을 만족하는addNewTodo함수를 완성해 주세요.

  1. ○ li 태그이름을 가진 요소 노드를 만든다.
  2. ○ 그 요소 노드에 파라미터로 전달받은 오늘 할 일(text)을 담는다.
  3. ○ <ul id="to-do-list"></ul>태그의 마지막 자식 요소 노드로 추가한다.

코드를 잘 작성하셨다면 아래와 같은 결과가 웹 페이지에 나타나야 합니다.

- Default 코드 :

＃index,html :

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>오늘 할 일</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="main">
    <h2 class="title">오늘 할 일</h2>
    <ul id="to-do-list"></ul>
  </div>
  <script src="index.js"></script>
</body>
</html>

 

# style.css

body {
  margin: 0;
  padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main {
	width: 350px;
	margin: 40px;
  padding: 30px 0;
  background-color: #fcfcfc;
  box-shadow: -5px -5px 20px #FFFFFF,  5px 5px 20px #BABECC;
  border-radius: 8px;
  text-align: center;
}

.title {
	margin: 15px auto;
	font-size: 30px;
	font-weight: 600;
	color: #9600ff;
}

#to-do-list {
  width: 280px;
	margin: 0 auto 15px;
	padding: 0;
	list-style: none;
}

#to-do-list li {
	display: flex;
	align-items: center;
	justify-content: center;
  width: 90%;
  height: 40px;
	margin: 8px auto 15px;
	border-bottom: 1px solid #9600ff;
}

- 답 :

    const node = document.querySelector('#to-do-list');
    
    function addtoDoList(text){
      const newNode = document.createElement('li');
      newNode.textContent = text;
      node.append(newNode);
    }
    
    addtoDoList('자바스크립트 공부하기');
    addtoDoList('고양이 화장실 청소하기');
    addtoDoList('고양이랑 냥코대전쟁하기기');

 

저작자표시

'CodeIt_Sprint > 인터렉티브_자바스크립트' 카테고리의 다른 글

(6)인터렉티브_자바스크립트_dataset속성  (0) 2024.11.29
(5)인터렉티브_자바스크립트_JavaScript로 해당 태그의 속성값 조정, 특정 태그에 어떤 동작을 하면, css의 클래스 스타일 적용 및 해제=>add(),remove(),toggle()  (0) 2024.11.28
(3)인터렉티브_자바스크립트_Dom트리구조에서 원하는 요소노드 접근  (0) 2024.11.28
(2)인터렉티브_자바스크립트_특정 태그에 핸들러 적용하기(요소노드.onclick프로퍼티), Window객체,document객체(Dom모델), console.log() VS console.dir(), DOM 트리 구조  (0) 2024.11.28
(1)인터렉티브_자바스크립트_Java Script_맛보기, 요소노드를 변수,유사배열로 저장,호출하기  (2) 2024.11.28

관련글

티스토리툴바