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

(1)인터렉티브_자바스크립트_Java Script_맛보기, 요소노드를 변수,유사배열로 저장,호출하기

by 코잼민 2024. 11. 28.

● Default 상태 :

- index.html

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

<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
  <link rel="stylesheet" href="/Style/style1.css">
</head>

<body>
  <div id="myNumber">0</div>
  <div id="btns">
    <div>
      <button id="decrease">-</button>
      <button id="increase">+</button>
    </div>
    <div>
      <button class="color-btn red" data-color="#FF0000"></button>
      <button class="color-btn orange" data-color="#FFA500"></button>
      <button class="color-btn yellow" data-color="#FFFF00"></button>
      <button class="color-btn green" data-color="#008000"></button>
      <button class="color-btn blue" data-color="#0000FF"></button>
      <button class="color-btn indigo" data-color="#4B0082"></button>
      <button class="color-btn purple" data-color="#800080"></button>
      <button class="color-btn black" data-color="#000000"></button>
    </div>
  </div>
  <script src="index.js"></script>
</body>

</html>

- style1.css

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

<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
  <link rel="stylesheet" href="/Style/style1.css">
</head>

<body>
  <div id="myNumber">0</div>
  <div id="btns">
    <div>
      <button id="decrease">-</button>
      <button id="increase">+</button>
    </div>
    <div>
      <button class="color-btn red" data-color="#FF0000"></button>
      <button class="color-btn orange" data-color="#FFA500"></button>
      <button class="color-btn yellow" data-color="#FFFF00"></button>
      <button class="color-btn green" data-color="#008000"></button>
      <button class="color-btn blue" data-color="#0000FF"></button>
      <button class="color-btn indigo" data-color="#4B0082"></button>
      <button class="color-btn purple" data-color="#800080"></button>
      <button class="color-btn black" data-color="#000000"></button>
    </div>
  </div>
  <script src="index.js"></script>
</body>

</html>

- 출력장면

● 요구사항 :

  • "-" / "+" 버튼을 누를 시, 위에 출력된 숫자값 1값씩 증감, 감소되도록 한다.
  • color 버튼을 누를 시, 위에 출력된 숫자의 텍스트가 버튼 색깔로 변경되도록 한다.

● 답 :

- index1.js

//1) 위의 동작에 관련된 태그들을 변수로 저장

//출력된 숫자
const myNum = document.getElementById('myNumber');

//"-","+" 버튼 태그
const numDecrease = document.getElementById('decrease');//"-"
const numIncrease = document.getElementById('increase');//"+"

//◆color 버튼들 => class "color-btn"의 태그들을 배열로 담기
const colorBtns = document.getElementsByClassName('color-btn');//모든 버튼들이 저장된 배열

//2) 버튼을 누를시, myNum의 값 동작 구현 => 각 버튼 태그들의 onclick 속성값 + 핸들링, 핸들러 적용

//"-"
numDecrease.onclick = function () {
  myNum.textContent = parseInt(myNum.textContent)-1;
  //태그의 textContent는 "문자열"로 반환되므로, parseInt() 메소드로 숫자값 변환
}

//"+"
numIncrease.onclick = function () {
  myNum.textContent = parseInt(myNum.textContent)+1;
}

//"color버튼들"(배열) => for을 이용하여, 각 onclick 적용
for (let btn of colorBtns) {
  btn.onclick = function () {
    //각 태그의 data-color 속성값 호출 법 => 노드.dataset.color
    myNum.style.color = btn.dataset.color;
  }
}

● 이론1 : 특정 태그를 id명을 이용하여, 변수에 담아두는 메소드 => document.getElementById('id명')메소드

○ 개념 :

  • Id명의 태그를 변수에 태그노드 저장하기 => const 변수 = getElementById('id값');
  • console.log(html의 없는 태그의 변수) => "null"이 출력된다.

○ 연습 문제 :

다음 중 id 속성을 통해 태그를 선택하는 방법에 대해 잘못 이해한 사람을 모두 선택해 주세요.

1

형승: id 속성을 통해 태그를 선택할 땐 document 객체의 getElementById 메소드를 활용할 수 있어.

2

대희: HTML 태그의 속성 이름 자체가 id니깐 대소문자를 잘 구별해야 해. getElementByid 라고 작성하는게 맞아.

3

치웅: HTML 문서에 존재하지 않는 id 값으로 태그를 선택하면 그 값은 undefined 야.

4

재화: 존재하지 않는 id 값으로 태그를 선택하면 null 값이 될걸?

- 알아야 할 개념 :

  • html문서에 없는 태그를 변수에 저장하고, console.log() 출력 시, null이 출력된다.
  • id명은 대소문자 구분하지 않아도 된다.

● 이론2 : 특정 태그를 class명을 이용하여, 변수에 여러 태그들 담아두는 메소드 => document.getElementsByClassName('class명')메소드

○ 개념 :

  • Id명의 태그를 변수에 태그노드 저장하기 => const 변수 = getElementsByClassName('className');
  • 저장된 변수는 배열은 아니지만, 배열의 형태로 저장된다.
  • 그러므로, length, 인덱스,for문으로 호출은 가능
  • but, splice,push와 같은 배열의 프로퍼티 메소드 사용 불가능
  • 유사배열에 저장되는 태그들의 순서 => 상속관계 상관없이 class명에 속하는 태그들의 위에서 아래 순으로 인덱스 저장된다.
  • 클래스명에 속한 태그가 1개 뿐이여서, 변수에 하나만 저장되어도, 배열의 형태로 저장된다. //쉽게 말하면, 태그 하나만 저장해도, 유사배열 형태로 저장된다.
  • 그래서, class명에 속한 태그가 없을 시, console.log() 출력 => 빈 배열("[ ]")이 출력된다.

○ 연습 문제 :

- 문제1 :

const node = document.getElementsByClassName('Header'); //html문서에 없는 class명

console.log(node);//문제ⓐ. 출력결과는?

console.log(node===null);//문제ⓑ. 출력결과는?

console.log(node.length);//문제ⓒ. 출력결과는?

- 답 :

ⓐ : [] //빈 배열 출력

ⓑ : false 출력

ⓒ : 0 출력

- 문제2 :

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

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>풋살 동아리</title>
</head>
<body>
  <h2 id="title">회원 명단</h2>
  <ul id="members">
    <li class="member">강영혼</li>
    <li class="member">박민황</li>
    <li class="member">김효중</li>
    <li class="member">최지운</li>
    <li class="member">손서욱</li>
    <li class="member">이일준</li>
    <li class="member">김소위</li>
  </ul>
  <script src="index.js"></script>
</body>
</html>

다음 중 아래 코드의 결과로 올바른 것을 선택해 주세요.

const members = document.getElementsByClassName('member');

for (let i = 1; i < members.length; i++) {
  if (i % 2 == 0) {
    console.log(members[i]);
  }
}

선지1)

<li class="member">강영혼</li>
<li class="member">김효중</li>
<li class="member">손서욱</li>

선지2)

<li class="member">김효중</li>
<li class="member">손서욱</li>
<li class="member">김소위</li>

선지3)

<li class="member">박민황</li>
<li class="member">최지운</li>
<li class="member">이일준</li>

 

- 답&해설 :

①. 저장된 변수(members)는 유사배열 형태의 아래의 태그들이 저장될 것이다.

    <li class="member">강영혼</li> // idx : 0
    <li class="member">박민황</li> // idx : 1
    <li class="member">김효중</li> // idx : 2
    <li class="member">최지운</li> // idx : 3
    <li class="member">손서욱</li> // idx : 4
    <li class="member">이일준</li> // idx : 5
    <li class="member">김소위</li> // idx : 6

②. members를 인덱스 1부터 시작하여, 짝수만 출력 => 2, 4, 6의 태그 출력

    <li class="member">강영혼</li> // idx : 0
    <li class="member">박민황</li> // idx : 1 , 시작점 
    <li class="member">김효중</li> // idx : 2
    <li class="member">최지운</li> // idx : 3
    <li class="member">손서욱</li> // idx : 4
    <li class="member">이일준</li> // idx : 5
    <li class="member">김소위</li> // idx : 6

따라서, 답은 "선지3" 이다.

● 이론3 : 특정 태그를 태그이름을 이용하여, 변수에 담아두는 메소드 => document.getElementsByTagName('태그명') 메소드

○ 개념 :

  • document.getElementsByTagName('태그명')메소드으로 변수에 저장시, "s"가 붙어있으므로, 유사배열 형태로 저장될 것이다.
  • 활용 사례 : Html문서의 모든 태그를이 담긴 유사배열형태로 변수에 저장하기 => TagName + '*' 이용
const AllTags = document.getElementsByTagName('*');

 

 

● 이론4 : document.getElement...() 메소드 vs document.querySelector() || document.querySelectorAll() 메소드

○ 개념1 : getElement...() 메소드로 id명, class명 , TagName명 으로 요소노드 저장시

  • Id : getElementById(' Id명 '); , 반환값 : 태그 1개
  • class명 : getElementsByClassName(' class명 '); , 반환값 : 유사배열
  • 태그명 : getElementsByTagName(' 태그이름 ||  *  '); , 반환값 : 유사배열

○ 개념2 : querySelector() 메소드 || querySelectorAll() 로 id명, class명 , TagName명 으로 요소노드 저장시

  • 반환값 : 노드 1개 => querySelector() 메소드

▶. Id명 => 메개인자에 "#" 연산자 사용(CSS문법)

const myNum = document.querySelector('#myNumber');

▶ class명 => 메개인자에 "." 연산자 사용(CSS문법)

const myBtn = document.querySelector('.color-btn'); //color-btn에 속한 태그들 중 맨위에 있는 태그가 저장된다.

▶ TagName명 => 메개인자에  연산자 사용 X (CSS문법)

const divNode = document.querySelector('div'); //div태그들 중 맨위에 있는 태그가 저장된다.

  • 반환값 : 유사배열 => querySelectorAll() 메소드

▶. Id명 => 메개인자에 "#" 연산자 사용(CSS문법)

const myNums = document.querySelectorAll('#myNumber'); //근데 잘 사용X

▶ class명 => 메개인자에 "." 연산자 사용(CSS문법)

const colorBtns = document.querySelectorAll('.color-btn'); //많이 사용됨!

▶ TagName명 => 메개인자에  연산자 사용 X (CSS문법)

const divNodes = document.querySelectorAll('div');

○ 연습 문제 :

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

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>내 맘대로 프로그래밍 언어 순위</title>
</head>
<body>
  <h2 id="title">내 맘대로 프로그래밍 언어 순위!</h2>
  <ol id="list">
    <li id="javascript" class="language">JavaScript</li>
    <li id="python" class="language">Python</li>
    <li id="java" class="language">Java</li>
    <li id="c" class="language">C</li>
    <li id="ruby" class="language">Ruby</li>
  </ol>
  <script src="index.js"></script>
</body>
</html>

다음 중 콘솔에 아래와 같은 결과를 출력하는 코드를 모두 선택해 주세요.

 

<li id="javascript" class="language">JavaScript</li>

선지1)

console.log(document.querySelectorAll('.language')[0]);

선지2)

console.log(document.querySelectorAll('#javascript'));

선지3)

console.log(document.querySelector('#list li'));

선지4)

console.log(document.querySelector('.language'));

- 답&해설 :

① [선지1]

: ,language class의 태그들 중 맨 상위 노드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>내 맘대로 프로그래밍 언어 순위</title>
</head>
<body>
  <h2 id="title">내 맘대로 프로그래밍 언어 순위!</h2>
  <ol id="list">
    <li id="javascript" class="language">JavaScript</li>
    <li id="python" class="language">Python</li>
    <li id="java" class="language">Java</li>
    <li id="c" class="language">C</li>
    <li id="ruby" class="language">Ruby</li>
  </ol>
  <script src="index.js"></script>
</body>
</html>

② [선지2]

: id가 "javascript"인 노드를 유사배열 형태(querySelectorAll)로 저장 => 애초에 태그로 출력 X

③ [선지3]

: id가 "list"의 li 중 맨위의 태그

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>내 맘대로 프로그래밍 언어 순위</title>
</head>
<body>
  <h2 id="title">내 맘대로 프로그래밍 언어 순위!</h2>
  <ol id="list">
    <li id="javascript" class="language">JavaScript</li>
    <li id="python" class="language">Python</li>
    <li id="java" class="language">Java</li>
    <li id="c" class="language">C</li>
    <li id="ruby" class="language">Ruby</li>
  </ol>
  <script src="index.js"></script>
</body>
</html>

④ [선지4]

: class가 "language" 중 맨위의 상위 노드 1개 반환 => [선지1]과 같다.

답 : [선지1], [선지3], [선지4]

 

 

저작자표시

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

(6)인터렉티브_자바스크립트_dataset속성  (0) 2024.11.29
(5)인터렉티브_자바스크립트_JavaScript로 해당 태그의 속성값 조정, 특정 태그에 어떤 동작을 하면, css의 클래스 스타일 적용 및 해제=>add(),remove(),toggle()  (0) 2024.11.28
(4)인터렉티브_자바스크립트_요소노드의 프로퍼티인, innerHtml,outerHtml,textContent , Dom트리에서 특정 노드위치에 , 1_ 노드 생성 2_ 노드 제거 3_ 노드 옮기기  (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

관련글

티스토리툴바