[포스코x코딩온] 웹 풀스택 과정 3주차 | DOM & jQuery

K1mhappy·2023년 11월 7일

포스코x코딩온

목록 보기

5/13

💡DOM

(Document Object Model)
HTML 문서는 각각의 node와 object 집합으로 문서를 표현하는데 dom은 각각의 node와 object에 접근하여 문서구조/스타일/내용 등을 변경 할 수 있도록 하는 것이다.

DOM TREE

Document : 웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 "객체"
dom의 능력
1.새로운 HTML 요소나 속성 추가
2.존재하는 HTML 요소나 속성 제거
3.HTML 문서의 모든 HTML 요소,속성 또는 CSS 스타일 변경
4.HTML 문서에 새로운 HTML 이벤트 추가
5.HTML 문서의 모든 HTML 이벤트에 반응
Dom API
API (Application Programming Interface) ; 어플리케이션이 돌아가는데 편리한기능들, 명령어들을 모아둔 집합체

🔻요소 선택

getElementById(아이디 속성값)
getElementsByClassName(클래스 속성값)
getElementsByTagName(태그 이름)
:특정 태그 이름을 가지는 모든 요소를 노드리스트의 형태로 반환함
getElementsByName(name 속성값)
querySelector(CSS 선택자)
: 문서에서 만나는 제일 첫번째 요소를 반환
querySelectorAll(CSS 선택자)
: 선택자로 선택되는 모든 요소를 가져와서 배열같은 데이터로 만듬

🔻요소 생성

document.createElement(HTML요소) : 지정된 요소 생성

🔻요소 다루기

🔹 태그 내에 들어갈 내용/속성값 변경

textContent
innerText
innerHTML

var str = document.getElementById("text");
str.textContent = "hi";

var link = document.getElementById("link");         
link.href = "/javascript/intro"; // 해당 요소의 href 속성값을 변경
link.innerHTML = "자바스크립트 수업 바로 가기!"; // 해당 요소의 내용을 변경

🔹 선택 요소에 class를 추가/삭제/존재여부 체크

classList.~
• 요소.classList.add() : 클래스 추가
• 요소.lassList.remove() : 클래스 제거
• 요소.classList.contains() : 클래스존재여부 체크
• 요소.classList.toggle() : 없음 생기고 있음 사라지게

🔗노드

DOM은 node라고 불리는 계층적 단위에 정보를 저장하고 있음.
html문서의 모든 것이 노드라고 하는데 문서를 구성하는 대표적 노트 종류는 1.문서노드 2.요소노드 3. 속성노드 4.텍스트노드 5.주석노드가 있음

노드는 서로 계층적 관계를 맺고 있는데,

노드 트리에 가장 상위는 단 하나의 "루트노드"가 존재하고
이것을 제외한 모든 노드는 단하나의 "부모노드"만 가진다.
모든 요소노드는 "자식노드"를 가질수 있으며,
"형제노드"란 같은 부모노드를 가지는 노드
"조상노드"란 부모노드+현재노드보다 상위에 존재하는 모든노드
"자손노드"란 자식노드 포함+현재노드보다 하위에 존재하는 모든노드를 말한다.

🔻노드 접근

🔹getElementsByTagName() 이용

getElementsByTagName()는 특정 태그이름을 가지는 모든 요소를 노드 리스트의 형태로 반환하기 때문에
노드 리스트를 이용하면 원하는 노드에 전급할 수 있다.

🔹특정 노드 선택 후 다른 노드에 접근

parentNode : 부모노드
childNodes : 자식 노드 리스트
firstChild : 첫째 자식 노드
lastChild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드

🔻노드 정보

nodeName : 고유의 이름을 저장하므로 수정할수없다.

// HTML 문서의 모든 자식 노드 중에서 두 번째 노드의 이름을 선택함.
document.getElementById("document").innerHTML = document.childNodes[1].nodeName; //html문서 첫번쨰에 있는 <!DOCTYPE html>

// html 노드의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택함.
document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName; //html에 첫번쨰있는 head

nodeValue : 노드의 값 저장

nodeType : 노드 고유의 타입 저장하므로 수정x

🔻노드 관리

🔹 노드 추가

append() : 맨 뒤의 자식 노드 추가
appendChild() :

function appendNode() {
    var parent = document.getElementById("list");  // 아이디가 "list"인 요소를 선택함.
    var newItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.
    parent.appendChild(newItem);                   // 해당 요소의 맨 마지막 자식 노드로 추가함.
}

prepend() : 맨 앞쪽인 자식요소로 추가
before() : 선택 요소의 앞으로 형제요소로 추가
after() : 선택 요소의 바로 뒤로 형제요소로 추가

🔹 노드 삭제

remove() : 선택 요소 제거
removeChild('요소의자식요소') : 자식요소가 제거
removeAttribute() : 특정 속성 노드 제거

🔹 노드 생성

createElement() : 요소 노드 생성
createAttribute() : 속성 노드 생성

🔹 노드 값 변경

setAttribute('속성명','지정할 속성')

🔗Event

발생한 이벤트에 반응해서 특정 동작을 수행할 수 있다.

<p onclick="changeText(this)">이 문자열을 클릭해 보세요!</p>
<script>
function changeText(element) {
    element.innerHTML = "문자열의 내용이 바뀌었습니다!";
}
</script>

🔻EventListener

이벤트가 발생했을 때 처리하는 함수

🔹addEventListener

: 객체나 요소의 메소드에 이벤트 리스너 전달하는 방법
객체.addEventListener(이벤트,명령)

 let div2 = document.querySelector('.div2');
 div2.addEventListener('mouseover', function(){	
   console.log('div2에 mouseover 이벤트 발생');
        })

이벤트리스너 종류
click
Mouseover
Mouseout
Mousedown/Mouseup
Focus
keypress
keydown/keyup
Scroll

💡jQuery

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

라이브러리란 ?
자주 사용하는 기능들을 모아두었다가 필요할 때 가져다 쓸 수 있도록 한 자원들의 묶음

🔹장점 :

HTML DOM을 손쉽게 조작 가능
CSS스타일도 간단히 적용 가능
같은 동작을 하더라도 더욱 짧게 구현 가능
오픈 라이선스를 적용해 누구나 자유롭게 이용 가능

🔹사용 방법 :

https://releases.jquery.com/
1. 파일을 다운 받거나
2. CDN(Content Delivery Network)을 사용하여 head태그 안에 첨부한다
CDN을 사용하면 온라인 상에 있는 대용량의 컨텐츠를 빠르고 안전하게 전송이 가능하다.

🔹jQuery 문법

$ ( 선택자 ) . 동작함수( ) ;
$는 제이쿼리를 의미= 제이쿼리에 접근하게 하는 식별자
원하는 html요소를 선택자에 넣고
동작함수를 정의해서 원하는 동작을 설정한다.

🔗메소드

🔻변경 메소드

값 설정하기
$(선택자).val('설정할 값');

값 가져오기
$(선택자).val();

function setValue(){
  $('#input').val('setting');}
  // input의 값 설정
function getValue(){
 $('#input').val(); }
  // 설정한 값 가져오기
//document.getElementById('input1').value= 'setting'; 와 동일

style 변경하기
$(선택자).css('속성','속성값');

function changeStyle(){
  $('span').css('font-size','28px');} 
//span요소.style = "font-size: 28px" 와 동일

속성 변경하기
$(선택자).attr('속성','속성값');

function changeAttribute(){
  $('#input').attr('placeholder','input1');}
//input요소.setAttribute('placeholder','input')와 동일

text 변경하기
$(선택자).text('내용/글자');

function changeText(){
  $('span').text('text!');}
//span요소.innerText = "~~" 와 동일

HTML 변경하기
$(선택자).html('내용/글자');

function changeHTML(){
  $('p').html('<h3>jQuery html</h3>');}
//p요소.innerHTML = "~~" 와 동일

🔻요소 메소드

요소 추가
$( 선택자 ).append( 요소 );
: 선택된 요소의 자식 요소 중 마지막으로 추가
```
$('ul').append('<li>jQuery append</li>');
// 부모 요소 앞에 잘 선택해주고, 추가할 태그or 내용 넣어주기
```
$( 선택자 ).prepend( 요소 );
: 선택된 요소의 자식 요소 중 첫번째로 추가
```
$('ul').prepend('<li>jQuery prepend</li>');
```
$( 선택자 ).before( 요소 );
: 선택된 요소의 형제 요소로 이전 형제로 추가
```
$('.green').before('<li>jQuery before</li>');
// class = green일 때
```
$( 선택자 ).after( 요소 );
: 선택된 요소의 형제 요소로 다음 형제로 추가
```
$('.green').after('<li>jQuery after</li>');
// class = green일 때
```
요소 삭제
$( 선택자 ).remove();
: 선택한 요소를 DOM트리에서 삭제
: 인자로 선택자를 넘겨주면 , 선택한 요소 중 조건을 만족하는 요소만 삭제
```
$('#li2').remove();
// id = li2일때
```
$( 선택자 ).empty();
: 선택한 요소의 자식 요소를 모두! 삭제
: 선택된 요소는 남아 있고 그 안이 다 비워짐
```
$('.nums').empty();
//dom으로 쓸 때 
  // let nums = document.querySelector('.nums');
  //nums.innerHTML = ''; 와 동일 
//nums.removeChild(); 쓸 경우 매개변수로 자식 요소를 넣어줘야 함.
```
요소 탐색
$( 선택자 ).parent().함수()
: 바로 위에 존재하는 하나의 부모 요소 반환
```
console.log($('#li2').parent());
//id가 li2인 선택자 위에 부모 요소가 콘솔로 찍힘
```
$( 선택자 ).parents().함수()
: 바로 위 부모와 모든 조상을 반환
```
console.log($('#li2').parents());
//id가 li2인 선택자 위에 부모 요소가 콘솔로 찍힘
```
$( 선택자 ).next().함수()
: 선택된 요소 바로 다음 위치한 형제 요소 선택. nextSibling과 같음
```
console.log($('#li2').next()); 
console.log($('#li2').next()[0]); 
//태그의 요소에 직접 들어가고  싶어서 인덱스를 사용하여 [0] 을 써줌 .
```
$( 선택자 ).prev().함수()
: 선택된 요소 바로 이전 위치한 형제 요소 선택. previousSibling과 같음
```
console.log($('#li2').prev());
```
$( 선택자 ).children().함수()
: 선택된 요소의 자식 요소 모두 반환 . children과 같음
```
console.log($('.nums').children());
```

🔻클래스 조작 메소드

클래스 추가
$( 선택자 ).addClass(“클래스명”)

<style>
   .fs-50{
	  font-size: 50px;
    }
</style>
<script>
$('#hi').addClass('fs-50');

클래스 삭제
$( 선택자 ).removeClass(“클래스명”)

<style>
   .fs-50{
	  font-size: 50px;
    }
</style>
<script>
$('#hi').removeClass('fs-50');
  // $('#hi').removeClass(); 빈칸으로 두면 클래스 모두 제거됨.

클래스 여부 확인
$( 선택자 ).hasClass(“클래스명”)
: Return 값은 true or false로 나옴
```
console.log($('#hi').hasClass('fs-50'));
  //.fs-50 이있다면 true, 없다면 false로 나온다.
```

있으면 추가, 없으면 삭제
$( 선택자 ).toggleClass(“클래스명”)
: 선택된 요소에 클래스가 있으면 추가, 없으면 삭제

<style>
   .bg-pink{
	  background-color: pink;
    }
</style>
<script>
$('#hi').toggleClass('bg-pink');
// 버튼을 누를때 배경 핑크로 바뀜!

클래스 조작
🔹제이쿼리 UI 소스 링크를 적어야 사용가능
$( 선택자 ).switchClass(“클래스명1”, “클래스명2”, 시간)
: 클래스1을 클래스2로 바꾼다.
: 이때, 시간은 클래스1을 클래스2로 바꿀 때 걸리는 시간을 의미한다. (생략 가능)
```
<style>
   .color-blue{
            color: blue;
    }
  .color-orange{
            color: orange;
    }
</style>
<script>
$('#hi').switchClass('color-blue','color-orange', 2);
// 클래스 컬러블루를 컬러오렌지로 스위치!
```

🔻이벤트 리스너

이벤트가 발생했을 때 그 처리를 담당하는 함수

로딩 이벤트
$().ready() = $()
: 돔 트리 생성 완료된 후 실행한다.

$(document).ready(function(){
   $('.container').append('<h2>ready</h2>');
 })
$(function(){
            // ready 와 동일
   $('.container').append('<h2>ready2</h2>');
 })

문서가 모두 로드된 뒤 코드가 실행되도록 설정 비교
- 자바스크립트 onload 사용

		window.onload = function() {
    	자바스크립트 코드;
		};

- 제이쿼리 ready 사용

	$(document).ready(function() {
  		제이쿼리 코드;
	});
	$(function() { //더 짧은 문법도 제공함
    제이쿼리 코드;
	});

$().on('load')
: 돔 트리 생성 전 실행. 그래서 ready멘트보다 더 먼저 나옴

$(window).on('load',function(){
    $('.container').append('<h2>load</h2>');
})

마우스 이벤트
click()

  $('button').click(function(){
    alert('클릭!');
   })
  $('button').on('cllick', function(){
    alert('클릭! on');
   }) //on은 이벤트전체를 여기에 넣는다라는 뜻

mouseover()

  $('button').mouseover(function(){
     alert('mouse over');
   })

hover()

scroll()

키보드 이벤트
keydown()
```
  $('input').keydown(function(e){
     console.log(e.target);
  	//console.log('keydown');
     console.log(this);
   })
```
** 여기서 이벤트 객체 e / e.target는 해당하는 객체가 뭔지 가져올 수 있는 이벤트 리스너
keyup()

📋 다짐

dom을 배우다가 제이쿼리를 배우니 속이 시원하다. dom실습하면서 막막했는데... 어떨 때 무슨 명령어를 써야할지 아직 헷갈리는거 보면 머리에 다 안들어왔나보다.
리더님 추천으로 손코딩 작성해봐야지 이번주도 화이팅~~

<출처 및 레퍼런스>
포스코X코딩온
TCP school https://www.tcpschool.com/jquery/intro

K1mhappy

킴코린의 개발일지😗

이전 포스트

[포스코x코딩온] 웹 풀스택 과정 2주차 | JS

다음 포스트

[포스코x코딩온] 웹 풀스택 과정 3주차 | DOM & jQuery