커리큘럼(12-30/변경)
01. Java
02. git
03. Database
04. Jsp [Server]
05. HTML,CSS
07. JS (v)
06. 미니프로젝트-2W (v)
08. SpringFramework , SrpingBoot
09. React JS [Front-end]
10. 중간프로젝트 (1M)
11. Linux 명령어
12. AWS 클라우드
13. DevOps - Docker
14. App - Android
15. 최종프로젝트 (1M)
JS(Java Script)
DOM & BOM
DOM(Document Object Model)
노드 삭제
| 함수 |
설명 |
| remove |
노드 삭제 |
| removeChild(삭제 할 자식 노드) |
자식노드 삭제 |
<body>
<button type = 'button' id="add">추가하기</button>
<button type = 'button' id="del">삭제하기</button>
<ul class="list">
</ul>
<script>
var add = document.getElementById('add');
var del = document.getElementById('del');
var list = document.querySelector('.list');
var index = 1;
add.onclick=function(){
var li = document.createElement('li');
li.innerHTML = index++ + '. 더블클릭시에 삭제됩니다.';
li.addEventListener('dblclick',function(){
li.remove();
})
list.appendChild(li);
}
del.onclick=function(){
// 자식 요소를 삭제하기
// list.removeChild(삭제할태그);
// console.log(list.children);
// console.log(list.children);
list.removeChild(list.children[0]);
}
</script>
</body>
부모노드, 자식노드 선택
| 함수 |
설명 |
| childNodes |
모든 자식 노드 선택(단, 노드에 생략된 text도 포함) |
| children |
모든 자식 노드 선택 |
| parentElement |
부모노드 선택 |
| nextElementSibling |
다음 형제 노드 선택 |
| previousElementSibling |
이전 형제 노드 선택 |
| firstChild |
첫번째 자식 노드 선택 |
| lastChild |
마지막 자식 노드 선택 |
<body>
<div class="name">
<input type="text" width="200" placeholder="이름을 입력하세요" class="input1">
<button type="button" class="btn1">확인</button>
</div>
<div class="todo">
<input type="text" width="200" placeholder="당신의 할일을 적으세요" class="input2">
<button type="button" class="btn2">확인</button>
</div>
<script>
var names = document.querySelector('.name');
var input1 = document.querySelector('.input1');
var btn1 = document.querySelector('.btn1');
var todo = document.querySelector('.todo');
var input2 = document.querySelector('.input2');
var btn2 = document.querySelector('.btn2');
btn1.addEventListener('click',function(){
if(input1.value==null|| input1.value==''){
alert('이름을 입력해주세요.');
}else{
input1.style.display='none';
btn1.style.display='none';
var h4 = document.createElement('h4');
h4.innerHTML=input1.value+'님 안녕하세요';
names.appendChild(h4);
ul = document.createElement('ul');
ul.className='nameList';
todo.appendChild(ul);
}
})
ul = document.querySelector('.nameList');
btn2.addEventListener('click',function(){
if(input1.value==''){
alert('이름 먼저 입력하세요.');
}
else if(input2.value==''){
alert('할일을 입력하세요');
}
else{
li = document.createElement('li');
li.innerHTML=input2.value;
ul.appendChild(li);
removeBtn = document.createElement('button');
removeBtn.type='button';
removeBtn.innerHTML='X';
removeBtn.className='removeBtn';
removeBtn.addEventListener('click',function(){
if(confirm('삭제하시겠습니까?')) this.parentElement.remove();
});
li.appendChild(removeBtn);
nextBtn = document.createElement('button');
nextBtn.type='button';
nextBtn.innerHTML= '↓';
nextBtn.className='nextBtn';
nextBtn.addEventListener('click',function(){
if(confirm('아래로 옮길까요?')){
var current = this.parentElement;
var next = current.nextElementSibling;
if(next==null){
alert('마지막행입니다.');
return;
}
ul.insertBefore(next,current);
}
});
li.appendChild(nextBtn);
prevBtn = document.createElement('button');
prevBtn.type='button';
prevBtn.innerHTML='↑';
prevBtn.className='prevBtn';
prevBtn.addEventListener('click',function(){
if(confirm('위로 옮길까요?')){
var current = this.parentElement;
var prev = current.previousElementSibling;
if(prev==null){
alert('첫행입니다.');
return;
}
ul.insertBefore(current,prev);
}
});
li.appendChild(prevBtn);
input2.value='';
input2.focus();
}
})
</script>
</body>
노드의 속성 추가 및 제거
| 메서드 |
설명 |
| getAttribute() |
요소의 속성 취득 |
| setAttribute() |
요소의 속성 저장 |
| removeAttribute() |
요소의 속성 제거 |