- dom
- querySelector
- inner
- 속성 추가
- setAttribute / getAttribute
- 이벤트 종료 방식
- 증가/감소
1) dom
dom : html 안에 요소 객체를 자바스크립트로 제어
dom api : 제어할 수 있는 명령어 모음
let arr = ['1번', '2번','3번', '4번','5번'];
let dom = document.getElementById('box');
let ran = Math.floor(Math.random()*arr.length);
dom.innerHTML = arr[ran];
dom.style.width = '250px';
dom.style.backgroundColor = 'tan';
dom.style.height = '50px';
dom.style.textAlign = 'center';
dom.style.fontSize = '30px';
getElementById('아이디')
getElementsByClassName('클래스명') : 유사배열(배열 처리)
getElementsByTagName('태그명') : 유사배열(배열 처리)
IE 버전 때문에 많이 사용했다.
선택자.style.속성 = '값';
속성 : css의 모든 속성 지정 가능 css에서 하이픈(-)이 들어가는 속성은 붙여서 작성(두번째 첫글자는 대문자)
ex) 선택자.style.fontSize = '20px';
<body>
<div id="box">xxx</div>
<button onclick="make('스타일값 넣기')">확인</button>
<script>
'use strict';
const make=(x)=>{
let dom = document.getElementById('box');
dom.innerHTML = x;
dom.style.backgroundColor = 'tan';
dom.style.color = 'white';
}
</script>
button을 onclick하면 make함수가 실행되고 매개변수는 '스타일값 넣기'가 된다.
<body>
<p class="box1">test</p>
<p class="box1">test</p>
<p class="box1">test</p>
<p class="box1">test</p>
<script>
'use strict';
let p = document.getElementsByClassName('box1');
console.log(p);
for(let i=0; i<p.length; i++){
p[i].innerHTML = `.box1의 [${i}]번째`;
p[i].style.width = '100px';
p[i].style.height = '30px';
p[i].style.background = 'tan';
p[i].style.margin = '30px';
}
</script>
</body>
p가 배열로 인식되기 때문에 for문을 사용해 p의 인덱스 번호에 맞게 텍스느를 넣거나 style을 적용시킬 수 있다.
2) querySelector
Document.querySelector('css 선택자')
Document.querySelector('#아이디')
Document.querySelector('.클래스')
Document.querySelector('경로')
Document.querySelector('경로:nth-')
일치하는 첫 번째 요소를 반환 일치하는 요소가 없으면 null을 반환
Document.querySelectorAll()
일치하는 요소들을 반환
<body>
<h1 id="h1">xxx</h1>
<h2 class="h2">xxx</h2>
<h3 class="h2">xxx</h3>
<div class="box">
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
<script>
'use strict';
let h1 = document.querySelector('#h1');
h1.innerHTML = '제목1';
h1.style.background = 'tan';
h1.style.width = '100px';
let h2 = document.querySelectorAll('.h2');
console.dir(h2);
h2[0].innerHTML = '제목2';
h2[1].innerHTML = '제목3';
for(let i=0; i<h2.length; i++){
h2[i].innerHTML = '제목'
}
h2.forEach(function(item){
console.log(item);
item.innerHTML = '클래스';
item.style.color = 'blue';
item.style.background = 'gray';
item.style.width = '100px';
})
let box = document.querySelector('.box');
let ul = document.querySelector('.box ul');
let li = document.querySelectorAll('.box ul li'); // 모든 li 적용시 All
box.style.margin = '20px';
box.style.padding = '20px';
box.style.border = '2px solid black';
ul.style.padding = '15px';
ul.style.background = 'pink';
</script>
</body>
태그, id, class 등으로 선택해 효과를 줄 때 사용한다.
* Selector를 사용하면 first-child처럼 첫 번째 해당하는 요소만 적용하기 때문에 위 li처럼 모든 요소에 적용하고 싶으면 SelectorAll를 사용해야한다.
3) inner
.innerHTML : 텍스트 + html
.innerText : 텍스트
.innerContent : 텍스트
<style>
.box span {
color: white;
background: tan;
}
</style>
<body>
<div class="box">
xxx
</div>
<p>
<button onclick="make1()">innerHTML</button>
<button onclick="make2()">innerText</button>
<button onclick="make3()">innerContent</button>
</p>
<script>
'use strict';
let dom = document.querySelector('.box');
let btn1 = document.querySelector('button:nth-child(1)');
let btn2 = document.querySelector('button:nth-child(2)');
let btn3 = document.querySelector('button:nth-child(3)');
const make1=()=>{
dom.innerHTML = '안녕하세요 <span> 만나서 반갑습니다. </span>';
}
const make2=()=>{
dom.innerText = '안녕하세요 <span> 만나서 반갑습니다. </span>';
}
const make3=()=>{
dom.innerContent = '안녕하세요 <span> 만나서 반갑습니다. </span>'
}
</script>
</body>
inner들의 특성이 다르기 때문에 위와 같은 결과가 나오게 된다.
innerHTML은 html 특성도 있기 때문에 span이 문자로 처리되지 않고 태그로 작용하여 style의 css도 적용되었다.
4) 속성 추가
<a href="">xx</a>
<script>
'use strict';
let a = document.querySelector('a');
a.href = 'http://www.google.com';
a.target = '_blank';
a.title = '설명입니다';
a.textContent = '구글입니다';
a.class = 'test'; // 클래스는 추가 안됨
a.id = 'testid'; // 아이디 추가 가능
</script>
html에서 a링크의 속성을 넣지 않고 script에서 속성을 추가했다.
id는 추가가 가능하지만 위 방식으로 class는 추가가 불가능하다.
<a href="http://www.google.com" target="_blank" title="설명" id="testid" class="test">xx</a>
<script>
'use strict';
let a = document.querySelector('a');
console.log(a);
console.log(a.target);
console.log(a.title);
console.log(a.id);
console.log(a.class); // undefined
</script>
html에서 속성을 넣은것을 console로 확인할 수 있다.
마찬가지로 class는 확인이 불가능하다.
5) setAttribute / getAttribute
Element.setAttribute() : 속성 지정
Element.setAttribute('속성')
Element.getAttribute() : 속성 꺼냄
Element.getAttribute('속성', '값')
위의 방식보다 일반적으로 많이 사용한다. 속성을 추가한다.
<body>
<a href="">xx</a>
<img src="" alt="">
<script>
'use strict';
let a = document.querySelector('a');
a.textContent = '구글';
a.setAttribute('href','http://www.google.com');
a.setAttribute('target', '_blank');
a.setAttribute('title', '설명');
a.setAttribute('id', 'idName');
a.setAttribute('class', 'className'); // 클래스 추가 가능
let img = document.querySelector('img');
img.setAttribute('src', './images/lf.png')
img.setAttribute('alt', '루피');
</script>
</body>
html속 a링크와 img는 링크와 불러올 이미지가 없지만 setAttribute를 사용해 추가해 주었다.
<body>
<a href="http://www.google.com" target="_blank">구글</a>
<div class="box">
</div>
<script>
'use strict';
let a = document.querySelector('a');
let dom = document.querySelector('div');
let txt = '';
txt += a.getAttribute('href') + '<br>';
txt += a.getAttribute('target') + '<br>';
txt += dom.getAttribute('class') + '<br>';
dom.innerHTML = txt;
</script>
</body>
getAttribute로 속성을 뽑아낸 후 화면상 출력되게 해 보았다.
6) 이벤트 종료 방식
<script>
'use strict';
const make1=()=>{
alert('과거 방식');
}
let btn1 = document.querySelector('.btn1')
btn1.onclick = function(){
alert('두번째 방식');
}
let btn2 = document.querySelector('.btn2')
btn2.addEventListener('click', function(){
alert('최근 방식');
})
let btn3 = document.querySelector('.btn3')
btn3.addEventListener('click', ()=>{
alert('최근 방식 화살표');
})
const make2=()=>{
alert('함수 호출 방식')
}
let btn4 = document.querySelector('.btn4')
btn4.addEventListener('click', make2)
</script>
버튼을 클릭했을때 이벤트를 발생하는 방식들이다.
7-1) 증가/감소 버튼
<body>
<div class="box">xxx</div>
<p>
<button class="prev">-</button>
<button class="next">+</button>
</p>
<script>
'use strict';
let dom = document.querySelector('.box');
let prev = document.querySelector('.prev');
let next = document.querySelector('.next');
let cnt = 0;
dom.innerHTML = cnt;
next.addEventListener('click', ()=>{
cnt++;
dom.innerHTML = cnt;
})
prev.addEventListener('click', ()=>{
cnt--;
dom.innerHTML = cnt;
})
</script>
</body>
증가 버튼을 누르면 cnt가 1씩 증가하며 증가할 때 마다 innerHTML로 dom에 출력되게 구현해 보았다.
감소 버튼도 마찬가지로 cnt가 1씩 감소하며 출력된다.
7-2) 증가/감소 버튼 (0부터 10까지)
// 10이 안넘게
next.addEventListener('click', ()=>{
if(cnt<10){
cnt++;
dom.innerHTML = cnt;
}
})
// 0보다 안작게
prev.addEventListener('click', ()=>{
if(cnt>0){
cnt--;
dom.innerHTML = cnt;
}
})
if문을 추가하여 0, 10에서 감소, 증가 버튼을 눌러도 증가/감소가 되지 않게 했다.
7-3) 증가/감소 버튼 (0부터 5까지 롤링)
// 5가 넘으면 0부터 롤링
next.addEventListener('click', ()=>{
if(cnt<5){
cnt++;
dom.innerHTML = cnt;
} else if(cnt===5){
cnt = 0;
dom.innerHTML = cnt;
}
})
// 0보다 작으면 5부터 롤링
prev.addEventListener('click', ()=>{
if(cnt>0){
cnt--;
dom.innerHTML = cnt;
} else if(cnt===0){
cnt = 5;
dom.innerHTML = cnt;
}
})
위의 if문에 else if를 추가하여 0 또는 5가 되면 cnt를 5와 0가 되도로 해 보았다.
7-4) 증가/감소 버튼 (0부터 10까지 자동 롤링)
let dom = document.querySelector('.box');
let cnt = 0;
setInterval(function(){
cnt++;
if(cnt>10){
cnt=0;
}
dom.innerHTML = cnt;
},1000)
setInterval을 사용하면 설정한 시간마다 자동으로 출력되게 할 수 있다.
1000은 1초이므로 1초마다 1씩 증가하고 10이 넘어가면 다시 0이 된다.
7-5) 증가/감소 버튼 (0부터 10까지 자동 롤링 정지 시작 버튼)
<body>
<div class="box">xxx</div>
<p>
<button class="prev">정지</button>
<button class="next">시작</button>
</p>
<script>
'use strict';
let dom = document.querySelector('.box');
let prev = document.querySelector('.prev');
let next = document.querySelector('.next');
let cnt = 0;
let timerId = null;
let interval = 1000;
let isplay = true;
/*
현재 상태를 true, false
진행, 오픈, 동작 : true
멈춤, 닫기, 숨김 : false
*/
timerId = setInterval(make ,1000);
function make(){
cnt++;
if(cnt>10){
cnt=0;
}
dom.innerHTML = cnt;
}
next.addEventListener('click', ()=>{
// if(isplay === false){
if(!isplay){
timerId = setInterval(make ,1000);
isplay=true;
}
});
prev.addEventListener('click', ()=>{
// if(isplay === true){
if(isplay){
clearInterval(timerId);
isplay=false;
}
});
</script>
</body>
* isplay를 사용하지 않으면 멈춤 버튼과 시작 버튼을 여러번 눌렀을때 제대로 작동하지 않는다.
7-6) 사진 변경 버튼
<body>
<div class="gallery">
<img src="images/베티.jpg" alt="">
<p>
<button>사진0</button>
<button>사진1</button>
<button>사진2</button>
<button>사진3</button>
</p>
</div>
<script>
'use strict';
let img = document.querySelector('.gallery img');
let btn1 = document.querySelector('.gallery button:nth-child(1)')
let btn2 = document.querySelector('.gallery button:nth-child(2)')
let btn3 = document.querySelector('.gallery button:nth-child(3)')
let btn4 = document.querySelector('.gallery button:nth-child(4)')
btn1.addEventListener('click', ()=>{
img.setAttribute('src', 'images/뽀로로.jpg')
})
btn2.addEventListener('click', ()=>{
img.setAttribute('src', 'images/루피.jpg')
})
btn3.addEventListener('click', ()=>{
img.setAttribute('src', 'images/크롱.jpg')
})
btn4.addEventListener('click', ()=>{
img.setAttribute('src', 'images/에디.jpg')
})
</script>
</body>
버튼에 addEventListener를 추가해 img의 src 요소가 바뀌도록 했다.
버튼을 누르지 않은 첫번째 화면은 html에 작성한 베티가 나오게 된다.
7-7) 사진 변경 자동
<body>
<div class="gallery">
<img src="images/베티.jpg" alt="">
</div>
<script>
'use strict';
let img = document.querySelector('.gallery img');
let cnt = 0;
setInterval(function(){
cnt++
if(cnt===5){
cnt=0;
img.setAttribute('src', 'images/베티.jpg')
}
if(cnt===1){
img.setAttribute('src', 'images/뽀로로.jpg')
} else if(cnt===2){
img.setAttribute('src', 'images/루피.jpg')
} else if(cnt===3){
img.setAttribute('src', 'images/크롱.jpg')
} else if(cnt===4){
img.setAttribute('src', 'images/에디.jpg')
}
},1000)
</script>
</body>
1초마다 0부터 1씩 증가하는 cnt를 활용해 cnt값에 따라 다른 이미지가 나오게 했다.