https://lifeandit.tistory.com/70
읽어보기
🌈 DOM
💡 HTMLCollection과 NodeList
<article id="container">
<ul>
<li>탕수육</li>
<li class="item-second">유산슬</li>
<li>짜장면</li>
</ul>
</article>
// JS 코드
<script>
const cont = document.getElementById('container');
const item1 = cont.getElementsByTagName('li');
const item3 = cont.querySelectorAll('li');
//item1과 item3이 가리키는것은
<li>탕수육</li>
<li class="item-second">유산슬</li>
<li>짜장면</li>
-------------------------------
console.log(item1) // HTMLCollection
console.log(item3) // NodeList - forEach같은 배열메소드 사용가능
console.log(item3[0].innerHTML) // 탕수육
console.log(item1[1].innerHTML) // 유산슬
--------------------------------------------------
container.querySelector('.item-second').textContent = '짬뽕'; // 유산슬이 짬뽕으로바뀝니다
container.querySelector('.item-second').classList.add('new'); //짬뽕에 new라는 클래스가 생성됩니다
console.log(document.querySelectorAll('li')[2]) //짜장면
console.log(document.querySelector('li:last-child')) // 짜장면
</script>- HTMLCollection과 NodeList 는 모두 배열과 비슷한 객체(array-like object/유사배열객체)
- 안에 있는 데이터에 접근하기 위해서 배열처럼 원소의 인덱스로 접근한다
- NodeList는 forEach같은 배열메소드 사용가능합니다.
- How to loop through an HTMLCollection
https://dev.to/isabelxklee/how-to-loop-through-an-htmlcollection-379k
💡 .addEventListener
<body>
<button>HELLO!</button>
</body><script>
//이벤트삽입
const myBtn = document.querySelector("button");
myBtn.addEventListener('click', function(){
console.log("hello world"); //콜백함수입니다. 리슨함수라고도 불립니다.
})
</script>
💡 .classList
classList 객체를 통해 class속성을 제어할수있습니다.
<script>
myBtn.addEventListener('click', function(){
myBtn.classList.add("blue"); //// blue 클래스를 myBtn 에 붙일수잇습니다.
})
// myBtn.classList.remove("blue"); 클래스를 제거합니다.
// myBtn.classList.toggle("blue"); 클래스를 토글합니다. 없으면 넣어주고, 있으면 제거합니다.
// console.log(myBtn.classList.contains("blue")); 해당하는 클래스가 있는지 확인합니다. 중요해요!
</script>🌞 예제
코딩천재의 코드를 가져왔다
1
<style>
div.red{
background-color: red;
}
div.yellow{
background-color: yellow;
}
div.green{
background-color: green;
}
</style>
<body>
<div></div>
<ul>
<li><button type="button" class="red">빨강</button></li>
<li><button type="button" class="yellow">노랑</button></li>
<li><button type="button" class="green">초록</button></li>
</ul>
<script>
const box = document.querySelector("div");
const btn = document.querySelectorAll("button");
btn.forEach(a => a.addEventListener('click', function(){
box.className=''
box.classList.add(a.className)
}))
</script>
</body>
2
<body>
<div class="canvas"></div>
<ul>
<li><button type="button" class="btn-red">빨강</button></li>
<li><button type="button" class="btn-yellow">노랑</button></li>
<li><button type="button" class="btn-green">초록</button></li>
</ul>
<script>
const canvas = document.querySelector('.canvas'),
btnRed = document.querySelector('btn-red'),
btnYellow = document.querySelector('btn-yellow'),
btnGreen = document.querySelector('btn-green');
const btns = document.querySelectorAll("button[class^='btn']");
btns.forEach((item) => {
item.addEventListener('click', () => {
canvas.classList.remove('yellow', 'red', 'green');
if (item.classList.contains("btn-red")) {
canvas.classList.add('red');
} else if (item.classList.contains("btn-yellow")) {
canvas.classList.add('yellow');
} else {
canvas.classList.add('green');
}
});
})
</script>
</body>💡 요소 제어
DOM api를 이용하면 요소를 새롭게 생성하고, 위치하고, 제거할 수 있습니다.
document.createElement(target): target 요소를 생성합니다.document.createTextNode(target): target 텍스트를 생성합니다.element.appendChild(target): target 요소를 element의 자식으로 위치합니다.element.removeChild(target): element의 target 자식 요소를 제거합니다.element.append(target): target 요소를 element의 자식으로 위치합니다. appendChild 와 다른점은 노드 뿐만 아니라 여러개의 노드를 한번에, 그리고 텍스트도 자식 노드로 포함시킬 수 있다는것 입니다.target.remove(): target 요소를 제거합니다.
예제1
<ul></ul>
<button>Make me MORE!</button><script>
const myBtn = document.querySelector("button");
const myUl = document.querySelector("ul");
myBtn.addEventListener('click', function(){
for(let i=0; i < 5; i++){
const myLi = document.createElement('li');
const myText = document.createTextNode(i);
myLi.appendChild(myText); // li에 자식요소로 숫자i를 넣어줍니다
myUl.appendChild(myLi); // ul태그에 li를 자식으로 넣어줍니다.
}
}) //li가 다섯번 생성되고 ul의 자식으로 들어갑니다
</script>결과: Make me MORE!을 누르면 숫자가 포함된 li를 생성한다.
예제2
<ul></ul>
<button>Make me MORE!</button><script>
const myBtn = document.querySelector('button');
const myUl = document.querySelector('ul');
myBtn.addEventListener('click', function(){
for(let i=0; i < 5; i++){
const myLi = document.createElement('li'); //li만들게~!
const btnDel = document.createElement('button'); //버튼만들게~!
const btnTxt = document.createTextNode = '삭제'; //삭제 텍스트 생성
btnDel.append(btnTxt); //삭제 라는텍스트를 가진 버튼이 생깁니다
btnDel.addEventListener('click', ()=>{
myLi.remove(); //삭제버튼을 누르면 li가 삭제됩니다.
});
myLi.append('삭제하기: ', btnDel); //li를 만들고 텍스트와 삭제버튼을 넣어준다.
myUl.appendChild(myLi); //li를 ul의 자식으로 추가합니다
}
});
</script>결과:
nodeList 안의 모든 요소 지우기 - 반복문사용
<article id="container">
<ul>
<li>탕수육</li>
<li class="item-second">유산슬</li>
<li>짜장면</li>
</ul>
</article>
<article>
<ul>
<li>된장국</li>
<li class="item-second">김치찌개</li>
<li>해장국</li>
</ul>
</article>- item-second 클래스를 가진 요소를 모두 지우고싶다 ???
<script>
const itemsToDelete = document.querySelectorAll('.item-second');
console.log(itemsToDelete)
// item-second을 가진 모든 요소를 가져옵시다 - 유산슬, 김치찌개
itemsToDelete.forEach(function(item) {
item.remove();
});
//요소를 하나하나 순회하면서 다 지운다.
//유산슬과 김치찌개가 사라집니다.
</script>
👩💻안녕하세요🌞