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

(5)인터렉티브_자바스크립트_JavaScript로 해당 태그의 속성값 조정, 특정 태그에 어떤 동작을 하면, css의 클래스 스타일 적용 및 해제=>add(),remove(),toggle()

by 코잼민 2024. 11. 28.

● 개념1 : 해당 태그의 속성 출력, 설정 , 제거 => 요소노드의 프로퍼티메소드 get||set||remove()

○ 종류 :

  • 출력 : console.log(요소노드.getAttribute('속성명')) => 속성명에 해당하는 속성값이 출력된다. 
  • 설정 : 요소노드.setAttribute('속성명', 설정할 값);
  • 속성 제거 : 요소노드.removeAttribute('속성명');

○ 부수적인 기능 : 속성명을 매개인자로 할 때, 대소문자 구분할 필요 없다.

● 연습문제1

○ 문제조건 :

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>
<body>
  <div>
    <h1>오늘 할 일</h1>
		<ol id="today">
      <li class="item">자바스크립트 공부</li>
			<li class="item">고양이 화장실 청소</li>
			<li class="item">고양이 장난감 쇼핑</li>
		</ol>
		<h1>내일 할 일</h1>
    <ol id="tomorrow" href="https://www.codeit.kr">
      <li class="item"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript">자바스크립트 공부</a></li>
			<li class="item">뮤지컬 공연 예매</li>
			<li class="item">유튜브 시청</li>
		</ol>
  </div>
  <script>
  </script>
</body>
</html>

○ 요구사항 :

  • <a> 태그에 직접 접근 하여, link라는 변수에 <a> 태그를 요소노드로 저장
  • <a> 태그의 href 속성값 출력해보기 => console.log(<a>.getAttribute('href'))
  • <a> 태그의 href 속성값을 네이버링크로 수정하기 => <a>.setAttribute('href', '네이버링크');
  • <a> 태그의 href 속성 삭제 하기 => <a>.removeAttribute('href');

○ 답 :

    //<a> 태그에 접근근
    const tomorrow_node = document.querySelector('#tomorrow');
    const link = tomorrow_node.firstElementChild.firstElementChild;
    
    //<a> 태그의 href 속성값 출력하기
    console.log(link.getAttribute('href'));
    
    //<a>태그의 href 속성값 수정하기
    link.setAttribute('href','https://www.naver.com');
    
    //<a>태그에서 target 속성 생성하기
    link.setAttribute('target', '_blank');
    
    //<a>태그에서 href 속성 삭제
    link.removeAttribute('href');

● 연습문제2

다음 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" class="to-do-list">
      <li>자바스크립트 공부하기</li>
      <li>고양이 화장실 청소하기</li>
      <li>고양이 장난감 쇼핑하기</li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>

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

const toDoList = document.querySelector('#to-do-list');
const item = toDoList.firstElementChild;
 
const el = document.createElement('a');
el.setAttribute('href', 'https://www.codeit.kr/');
el.textContent = item.textContent;
item.innerHTML = el.outerHTML;
  
console.log(item);

①

<a href="https://www.codeit.kr/">자바스크립트 공부하기</a>

②

<li>
  <a href="https://www.codeit.kr/">자바스크립트 공부하기</a>
</li>

③

<li>
  <a href="https://www.codeit.kr/">
    <li>자바스크립트 공부하기</li>
  </a>
</li>

④

<a href="https://www.codeit.kr/">
  <li>자바스크립트 공부하기</li>
</a>

○ 해설 :

◆ 순서1_ toDoList , item 노드 파악

toDoList :

    <ul id="to-do-list" class="to-do-list">
      <li>자바스크립트 공부하기</li>
      <li>고양이 화장실 청소하기</li>
      <li>고양이 장난감 쇼핑하기</li>
    </ul>

item :

    <ul id="to-do-list" class="to-do-list">
      <li>자바스크립트 공부하기</li>
      <li>고양이 화장실 청소하기</li>
      <li>고양이 장난감 쇼핑하기</li>
    </ul>

◆ 순서2_ "el" 요소노드 조립 과정 :

1_ const el = document.createElement('a'); 

// el : <a> </a>

2_ el.setAttribute('href', 'https://www.codeit.kr/');

//el : <a href = " https://www.codeit.kr/ "></a>

3_ el.textContent = item.textContent;

//el :  <a href = " https://www.codeit.kr/ "> 자바스크립트 공부하기 </a>

◆ 순서3. innerHtml, outerHtml 개지랄한거 분석

item.innerHtml = el.outerHtml;

//item노드의 자식노드에 el자체를 통채로 쳐 넣기

=> 결과

    <ul id="to-do-list" class="to-do-list">
      <li>//item 태그

            <a href = " https://www.codeit.kr/ "> 자바스크립트 공부하기 </a>

      </li>
      <li>고양이 화장실 청소하기</li>
      <li>고양이 장난감 쇼핑하기</li>
    </ul>

따라서, console.log(item); 를 하면, 답 : ②

 

● 개념2 : JavaScript로 해당 태그 요소노드에 CSS 스타일 시트 적용하기

 

○ 알아야 될 것들 :

  • 요소노드.style프로퍼티로 직접 속성값 대입시, JavaScript는 css프로퍼티 속성명을 카멜Case로 해야한다.
  • 예시로, text-decoration => textDecoration
  • 근데 위의 방법으로 요소노드.style프로퍼티 방법은 아예 안사용함 ㅄ
  • ★보편적인 방법 => Css에 이미 작성된 자식의 class의 css시트가 있다면, => javaScript로 해당 동작에 대한 핸들러가 구현시, => 해당 요소노드에 class를 추가시켜, css 적용

○ 보편적인 방법으로 CSS 시트 입히는 코드 작성 과정 :

예를들어, .done{..} 에 대한 클래스 시트가 작성되었을 때,

  • 잘못된 방법 : 요소노드.className = "done" //기존의 class값이 사라짐
  • ★옳은 방법 : 요소노드.classList.toggle('추가할 class명');

○ toggle을 add()나 remove로 사용하기 => 요소노드.classList.toggle('클래스명', true) || 요소노드.classList.toggle('클래스명', false)

○ toggle과 add || remove 차이점

1_ 문법적 차이

  • toggle : 여러매게인자 사용 X ,
  • add || remove ('class명1', 'class명2' , 'class명3' , 'class명4' ,...) => 해당 요소노드의 상속관계로 

'class명1' > 'class명2' > .... > 'class명4' > ... 로 추가된다. //▲한 매개인자로 띄어쓰기로 적용 X

2_ 용도적 차이

  • 만약에, 어떠한 동작을 하게되면, 적용되는 css 스타일  클래스 시트가 여러개라면, 

=> add("class1", "class2"...) && remove("class1", "class2",...)

  • 스타일 클래스 시트 딱 하나만, 적용되고 싶다면,

=> toggle("class");

● 연습문제3 :

다음 HTML 코드를 보고, 동작이 되도록 JavaScript를 작성해 주세요

- index.html

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

<head>
  <meta charset="UTF-8">
  <title>오늘 할 일</title>
  <link rel="stylesheet" href="/Style/style2.css">
</head>

<body>
  <div class="main">
    <h2 class="title">오늘 할 일</h2>
    <ul id="to-do-list" class="to-do-list">
      <li>자바스크립트 공부하기</li>
      <li>고양이 화장실 청소하기</li>
      <li>고양이 장난감 쇼핑하기</li>
    </ul>
  </div>
  <script>
  </script>
</body>

</html>

- style2.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 #DFDFDF,  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;
}

.done :focus {
  opacity: 0.5;
  text-decoration: line-through;
}

- 요구조건 :

※조건1_ 각 list 항목에 a 태그를 삽입.

※조건2_ 클릭 시, .done 스타일이 적용되고, 한번 더 클릭시, .done 스타일 적용 해제

- 풀이과정 :

▶ 순서1_ <a>태그의 노드 생성, <a>태그의 style적용(밑줄 제거, 텍스트 색깔 검은색)

const newNode = document.createElement('a');

newNode.style.textDecoration = 'none';
newNode.style.color = 'black';

▶ 순서2_ <a>태그의 href 속성 활성화, <a>의 textContent <= li 노드의 textContent

newNode.href = '#';

newNode.textContent = li.textContent;

▶ 순서3_ <li>태그의 textContent를 비우고, 생성된 <a>태그의 노드를 li태그에 append 

li.textContent='';

li.append(newNode);

▶ 순서4_ 최종적으로 ul.to-do-List의 모든 li에 삽입하기 => li노드.append(newNode); 

const lists = document.querySelectorAll('.to-do-List');

function addLink(element)
{
	//순서1
	const newLink = document.createElement('a');
    newLink.style.textDecoration = 'none';
    newLink.style.color = 'black';
    
    //순서2
    newLink.href = '#';
    newLink.textContent = element.textContent;
    
    //순서3
    element.textContent ="";
    element.append(newLink);

}

//순서4
for(let li of lists)
{
	addLink(li);
}

▶ 순서5_ li노드에 클릭을 할시, .done 클래스 스타일 시트 적용되도록 한다,

=> addEventListener('click' function) + event.preventDefault()//버블링 안되도록 하는 메소드 뒤에 배움 +li.classList.toggle('done'); //클릭하면, done적용 , 한번 더 클릭,done 해제

const lists = document.querySelectorAll('.to-do-list li');
//class "to-do-list" 내의 li태그들로만 정확하게 찝어줘야함

function addLink(element)
{
	//순서1
	const newLink = document.createElement('a');
    newLink.style.textDecoration = 'none';
    newLink.style.color = 'black';
    
    //순서2
    newLink.href = '#';
    newLink.textContent = element.textContent;
    
    //순서3
    element.textContent ="";
    element.append(newLink);

}

//순서4
for(let li of lists)
{
	addLink(li);
    //순서5
    li.addEventListener('click',function(event){
		event.preventDefault();
        
        li.classList.toggle('done');
    });
}

- 답 :

const lists = document.querySelectorAll('#to-do-list li');

// 각 <li>에 a 태그 삽입 및 클릭 이벤트 추가
for (let li of lists) {
  // a 태그 생성
  const newLink = document.createElement('a');

  newLink.style.textDecoration = "none";
  newLink.style.color = "black";

  newLink.textContent = li.textContent; // 기존 텍스트를 a 태그로 옮김
  newLink.href = '#'; // 링크를 활성화 (기본 동작 차단 가능)

  // 기존 li의 텍스트 삭제하고 a 태그 삽입
  li.textContent = '';
  li.append(newLink);

  // 클릭 이벤트 추가
  newLink.addEventListener('click', function (event) {
    event.preventDefault(); // 기본 동작 차단
    li.classList.toggle('done'); // .done 클래스 추가/제거
  });
}

● 연습문제3

○ 문제조건 :

다음 중 아래 변수를 활용해서 <li>고양이 화장실 청소하기</li>에 opacity: 0.5, text-decoration: line-through;스타일을 입하는 코드를 모두 선택해 주세요.

const toDoList = document.querySelector('#to-do-list');
const item = toDoList.children[1];

①

item.style.opacity = '0.5';
item.style.textDecoration = 'line-through';

②

item.className = 'done';

③

item.classList.add('done');

④

item.setAttribute('class', 'done');

 

○ 답 : ①, ②, ③, ④

 

저작자표시

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

(7)인터렉티브_자바스크립트_태그에 이벤트 핸들러 등록,제거하기, 이벤트객체 => 동작에 대하여, 어떤 event동작, 태그항목이 관련되어있는지의 정보 객체  (0) 2024.11.29
(6)인터렉티브_자바스크립트_dataset속성  (0) 2024.11.29
(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

관련글

티스토리툴바