- cloneNode
- querySelector 함수 작성
- 이벤트 연결 / 해제
- form input txt value
- form input checkbox value
- form input select value
1) cloneNode
<script >
'use strict';
const ul = document.querySelector('ul');
const li = document.querySelector('ul li');
for (let i = 0; i < 5; i++) {
const clone = li.cloneNode(true);
ul.append(clone);
}
</script>
cloneNode를 사용하면 대상 노드를 복사한다. true 값을 넣었으므로 자식도 복사되어 '복사'까지 clone되었다.
<script >
'use strict';
const ul = document.querySelector('ul');
const li = document.querySelector('ul li');
for (let i = 0; i < 5; i++) {
const clone = li.cloneNode(false);
ul.append(clone);
}
</script>
2) querySelector 함수 작성
let item1 = document.querySelector('.item1')
let item2 = document.querySelector('.item2')
let item3 = document.querySelector('.item3')
매번 document.querySelector를 사용하기 번거롭다면 함수로 정의해 간편하게 쓸 수 있다.
const get = (target) =>{
return document.querySelector(target)
}
const getAll = (target) =>{
return document.querySelectorAll(target)
}
let $item1 = get('item1')
let $item2 = get('item2')
let $item3 = get('item3')
$는 경로와 값을 구별하기 위해 사용했다.
3) 이벤트 연결 / 해제
<body>
<h1>클릭 수 : 0</h1>
<p>
<button class="btn1">이벤트</button>
<button class="btn2">제거</button>
</p>
<span>xxx</span>
<script>
'use strict';
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let h1 = document.querySelector('h1');
let span = document.querySelector('span');
let cnt = 0;
let isplay = false;
function increment(){
h1.textContent = `클릭 수 : ${cnt++}`;
}
btn1.addEventListener('click', e=>{
if(!isplay){
h1.addEventListener('click', increment);
span.textContent = `이벤트 연결`;}
})
btn2.addEventListener('click', e=>{
h1.removeEventListener('click', increment);
span.textContent = `이벤트 해제`;
isplay = true;
});
</script>
</body>
btn1 click 이벤트 안에 h1 click 이벤트를 넣어 btn1을 먼저 click한 뒤 h1을 click해야 원하는 값이 결괏값이 나오게 했다.
그리고 isplay를 사용해 btn2를 클릭하게 되면 더 이상 이벤트가 발생하지 않도록 했다.
4) form input txt value
form에서 input으로 txt를 받을 때 입력값인 value를 추출할 수 있다.
keydown, keyup
input : 값이 바뀔 때
change : 변경했을 때
focus : 초점(선택)
blur : 밖으로 벗어났을 때
<body>
<input type="text" value="값">
<h1>xxx</h1>
<script>
'use strict';
let h1 = document.querySelector('h1');
let inp = document.querySelector('input');
let txt = '';
txt = inp.value;
h1.textContent=txt;
inp.addEventListener('keydown', e=>{
txt = inp.value;
h1.textContent = txt;
})
</script>
</body>
5) form input checkbox value
같은 방법으로 chekcbox의 value를 가져올 수 있다.
<body>
<p>
<input type="checkbox" name="chk1" value="1번">1번
<input type="checkbox" name="chk2" value="2번">2번
</p>
<h1>xx</h1>
<script>
'use strict';
let inp = document.querySelectorAll('input');
let h1 = document.querySelector('h1');
let txt = '';
inp.forEach( chk =>{
chk.addEventListener('change', e=>{
if(e.currentTarget.checked){
txt=e.currentTarget.value;
} else {
txt = ''
}
h1.textContent = txt;
})
})
</script>
</body>
6) form input select value
<body>
<h1>xxx</h1>
<select name="" id="">
<option value="1등">1등</option>
<option value="2등">2등</option>
<option value="3등">3등</option>
<option value="4등">4등</option>
</select>
<script>
'use strict';
let inp = document.querySelector('select');
let h1 = document.querySelector('h1');
let txt = '';
inp.addEventListener('change', e=>{
let num = e.currentTarget.selectedIndex;
h1.textContent = num;
})
</script>
</body>
select의 경우 option에 index번호가 매겨지기 때문에 이를 이용할 수 있다.
<body>
<h1>xxx</h1>
<select>
<option value="">사이트</option>
<option value="http://www.google.com">구글</option>
<option value="http://www.naver.com">네이버</option>
<option value="http://www.daum.net">다음</option>
</select>
<script>
'use strict';
let inp = document.querySelector('select');
let h1 = document.querySelector('h1');
let txt = '';
inp.addEventListener('change', e=>{
let link = e.currentTarget.value;
h1.textContent = link;
window.open(link)
})
</script>
</body>
window.open을 사용해 option을 선택하면 각각 value에 적힌 링크가 열리게 구현할 수 있다.