#
1.DOM
#
목차
1. jQuery와 jS 1.1. jQuery란? 1.2. 특징 1.3. 사용법 1.4. 기본문법
2. DOM 조작 2.1. text 콘텐츠 다루기 2.2. HTML 을 다루기 2.2.1. 하위요소를 다루기 2.2.2. 위치를 특정해서 다루기 2.2.3. 속성 다루기 2.2.4. 예제
2.3. 클래스조작 2.3.1. 예제
#
1. jQuery와 jS
#
1.1. jQuery란?
jQuery 는 자바스크립트를 쉽게 활용할수 있도록 개발된 라이브러리(DOM 조작에 특화) 이다. 제이쿼리코어 와 애니메이션과 인터렉션 등을 분리한 UI 가 있다
#
1.2. 특징
제이쿼리 버전 1.12 까지 IE 를 지원한다. 제이쿼리는 버전별로 사용할수 있는 메서드가 다르다.
#
1.3. 사용법
- 제이쿼리 코어를 로드한다
- 스크립트를 작성한다.
#
1.4. 기본문법
Code
Code
JS
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded',()=>{
document.querySelector('p').style.color='green';
document.querySelector('.blue').style.color='blue';
})
</script>
</head>
<body>
<p>나를 초록색으로 만들어 주세요</p>
<p class="blue">나를 파란색으로 만들어 주세요</p>
</body>
</html>
JQ
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(function(){
$('p').css('color','green');
$('.blue').css('color','blue');
});
</script>
</head>
<body>
<p>나를 초록색으로 만들어 주세요</p>
<p class="blue">나를 파란색으로 만들어 주세요</p>
</body>
</html>
#
2. DOM 조작
DocumentObjectModel 을 탐색하고 조작하는 명령어를 알아보자
#
2.1. text 콘텐츠 다루기
JS
JQ
//숨긴글씨 제외
el.innerText;
//숨긴글씨 포함
el.textContent;// el 의 text 값이 뭐야?
$('el').text();
// el 의 text 값을 바꿔!
$('el').text('');
#
2.2. HTML 을 다루기
#
2.2.1. 하위요소를 다루기
JS
JQ
//요소내 포함 된 HTML 을 가져오거나 설정
el.innerHTML;// el 의 html 값이 뭐야?
$('el').html();
// el 의 html 값을 바꿔!
$('el').html('');
#
2.2.2. 위치를 특정해서 다루기
JS
JQ
el.insertAdjacentHTML();
// el 안에 가장 첫번째 child
el.insertAdjacentHTML('afterbegin', 'text');
//el 안에 가장 마지막 child
el.insertAdjacentHTML('beforeend', 'text');
// el 앞에
el.insertAdjacentHTML('beforebegin', 'text');
// el 뒤에
el.insertAdjacentHTML('afterend', 'text');// el 안에 가장 첫번째 child
$('el').prepend('');
// el 안에 가장 마지막 child
$('el').append('');
// el 앞에
$('el').before('');
// el 뒤에
$('el').after('');
#
2.2.3. 속성 다루기
JS
JQ
//el의 속성취득
el.getAttribute();
//el의 속성설정
el.setAttribute();//el의 속성 취득
$('el').attr();
//el의 속성 설정
$('el').attr('');
#
2.2.4. 예제
html 코드를 복사하여 준비합니다
<div id="wrap">
<h1>탐색 선택자 및 html조작</h1>
<h2>탐색 선택자</h2>
<ul id="list1">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
<ul id="list2">
<li>리스트8</li>
<li class="theObj">리스트9</li>
<li><span>리스트10</span></li>
<li>리스트11</li>
<li><a href="#">리스트12</a></li>
<li>리스트13</li>
<li>리스트14</li>
</ul>
<h2 class="theTitle">html 조작</h2>
<ul id="list3">
<li class="obj1">list_2</li>
<li>list_3</li>
<li>list_4</li>
<li>list_5</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
/* dom */
let list1 = document.querySelectorAll('#list1>li');
list1.forEach((el, idx) => {
el.textContent += idx + 'textContent로 추가';
el.classList.add('a' + idx);
});
let list2 = document.querySelector('.theObj');
list2.innerHTML = '<span>' + Math.random() + '<span>';
/* 속성 */
list2.setAttribute('data-set', 'accessbillity');
console.log(list2.getAttribute('class'));
document.querySelector('.theTitle').setAttribute('class', 'default');
/* 조작*/
var list3 = document.querySelector('#list3');
list3.innerHTML += '<li>🎨추가한list_6</li>';
list3.insertAdjacentHTML('afterbegin', '<li>🎨첫째자식 afterbegin!!!</li>'); //el 안에 가장 첫번째 child
list3.insertAdjacentHTML('beforeend', '<li>막둥이 beforeend!!!</li>'); //el 안에 가장 마지막 child
var list3Li = document.querySelectorAll('#list3 li');
list3Li[4].insertAdjacentHTML('beforebegin', '<li>🎨니앞에 beforebegin</li>'); // el 앞에
list3Li[4].insertAdjacentHTML('afterend', '<li>🎨니뒤에 insertAfter</li>');
let list1 = $('#list1>li');
list1.each(function (idx, el) {
let oriText = $(el).text();
const newText = oriText + idx + 'text()로 추가';
console.log($(el).text());
$(el).text(`${newText}`);
});
let list3 = $('#list3');
list3.prepend('<li>🎨첫째</li>');
list3.append('<li>막둥이</li>');
list3.before('<div>니앞에</div>');
list3.after('<div>니뒤에</div>');
list3.children('li').eq(2).after('<li>니뒤에</li>');
#
2.3. 클래스조작
제이쿼리와 자바스크립트로 클래스를 조작하는 학습을 해보자
Code
Code
jQuery
//클래스추가-한개
$('el').addClass('class');
//클래스추가-여러개
$('el').addClass('class1 class2');
//클래스삭제
$('el').removeClass('class');
//토글 클래스
$('el').toggleClass('class');
//클래스 있니?
$('el').hasClass('class');javascript
// 클래스 추가 - 한개
document.querySelector('el').classList.add('class');
// 클래스 추가 - 여러개
document.querySelector('el').classList.add('class1', 'class2');
// 클래스 삭제
document.querySelector('el').classList.remove('class');
// 토글 클래스
document.querySelector('el').classList.toggle('class');
// 클래스 있니?
document.querySelector('el').classList.contains('class');
#
2.3.1. 예제
Code
Code
<div>addClass</div>
<div>removeClass</div>
<div>toggleClass</div>
<div>hasClass</div>.addClass {
background: red;
}
.cls1 {
color: blue;
}
.cls2 {
margin-left: 20px;
}
#
1. 제이쿼리
- 변수초기화
- 클래스추가
$(() => {
let divs = $('div');
divs.addClass('addClass');
divs.eq(1).addClass('cls1 cls2').removeClass('addClass');
});- 클래스 여러개 추가후 삭제
divs.eq(1).addClass('cls1 cls2').removeClass('addClass');- 토글클래스
divs.eq(2).on({
'click': function () {
$(this).toggleClass('addClass')
}
}- 클래스 확인
divs.eq(3).on({
click: function () {
if ($(this).hasClass('addClass')) {
console.log(true);
$(this).animate({ fontSize: '200%' }, 500);
$(this).removeClass('addClass');
} else if (!$(this).hasClass('addClass')) {
console.log(false);
$(this).animate({ fontSize: '100%' }, 500);
$(this).addClass('addClass');
}
},
});- 변수초기화
- 클래스추가
document.addEventListener('DOMContentLoaded', () => {
const divs = document.querySelectorAll('div');
divs.forEach((el, idx) => {
el.classList.add('addClass');
});
});- 클래스 여러개 추가후 삭제
divs[1].classList.add('cls1', 'cls2');
divs[1].classList.remove('addClass');- 토글클래스
divs[2].addEventListener('click', function () {
this.classList.toggle('addClass');
});- 클래스 확인
divs[3].addEventListener('click', function () {
if (this.classList.contains('addClass')) {
this.style.transition = 'all 0.5s';
this.style.fontSize = '200%';
this.classList.remove('addClass');
} else {
this.style.transition = 'all 0.5s';
this.style.fontSize = '100%';
this.classList.add('addClass');
}
});