- 01. 요소 메서드 : 선택자 : Document.querySelector() : 요소 선택자
- 02. 요소 메서드 : 선택자 : Document.querySelectorAll() : 모든 요소 선택자
- 03. 요소 메서드 : 선택자 : Document.getElementById() : 아이디 요소 선택자
- 04. 요소 메서드 : 선택자 : Document.getElementByIdClassName() : 클래스 요소 선택자
- 05. 요소 메서드 : 요소 : Document.createElement() : 요소 만들기
- 06. 요소 속성 : 선택자 : Element.firstElementChild : 첫 번째자식 요소 선택자
- 07. 요소 속성 : 선택자 : Element.lastElementChild : 마지막 번째 자식 요소 선택자
- 08. 요소 속성 : 선택자 : Element.nextElementSibling : 형제 다음 요소 선택자
- 09. 요소 속성 : 선택자 : Element.previousElementSibling : 형제 이전 요소 선택자
- 10. 요소 속성 : Element.clientWidth : 요소의 가로값
- 11. 요소 속성 : Element.clientHeight : 요소의 세로값
- 12. 요소 속성 : Element.offsetWidth : 요소의 가로값
- 13. 요소 속성 : Element.offsetHeight : 요소의 세로값
- 14. 요소 메서드 : Element.getBoundingClientRect() : 요소의 정보값
- 15. 요소 메서드 : Node.cloneNode() : 요소 복사
- 16. 요소 메서드 : Node.appendChild() : 자식 요소 추가
- 17. 요소 메서드 : Node.insertBefore() : 요소 추가
- 09. 요소 메서드 : Node.removeChild() : 자식 요소 삭제
- 09. 요소 메서드 : Node.hasChild() : 자식 요소 존재 여부 확인
- 09. 요소 메서드 : Node.replaceChild() : 자식 요소 교체
- 09. 요소 속성 : Node.parentElement : 무모 요소 선택
- 09. 요소 메서드 : Element.insertAdjacentHTML() : 요소 추가
- 09. 요소 메서드 : Element.before() : 요소 앞에 추가
- 09. 요소 메서드 : Element.after() : 요소 뒤에 추가
- 09. 요소 메서드 : Element.remove() : 요소 삭제
- 09. 요소 메서드 : Element.replaceWith() : 요소 교체
- 01. 요소 메서드 : 클래스 : .classList.add() : 클래스 추가하기
- 02. 요소 메서드 : 클래스 : .classList.remove() : 클래스 삭제하기
- 03. 요소 메서드 : 클래스 : .classList.toggle() : 클래스 추가/삭제하기
- 04. 요소 메서드 : 클래스 : .classList.contains() : 클래스 존재여부 확인하기
- 01. 요소 메서드 : 속성 : .setAttribute() : 요소 속성 설정하기
- 02. 요소 메서드 : 속성 : .getAttribute() : 요소 속성 가져오기
- 03. 요소 메서드 : 속성 : .hasAttribute() : 요소 속성 존재 여부 확인하기
- 01. 요소 메서드 : 텍스트 : .textContent() : 요소에 텍스트 설정하기
- 01. 요소 메서드 : 텍스트 : .innerText() : 요소에 텍스트 설정하기
- 01. 요소 메서드 : 텍스트 : .innerHTML() : 요소에 HTML 텍스트 설정하기
- 01. 요소 메서드 : 텍스트 : .outerHTML() : 요소에 HTML 텍스트 설정하기
01. 요소 메서드 : .classList.add(), .classList.remove()






이 버튼을 클릭(selected)하면 두번째 이미지가 선택됩니다.
이 버튼을 클릭(selected)하면 두번째 이미지가 해제됩니다.
이 버튼을 클릭(selected)하면 모든 이미지가 선택됩니다.
이 버튼을 클릭(selected)하면 모든 이미지가 해제됩니다.
{
//두번째 이미지 선택
document.querySelector("#sample1 .btn1").addEventListener("click", function(){
document.querySelector("#sample1 .view2").classList.add("selected");
});
document.querySelector("#sample1 .btn2").addEventListener("click", function(){
document.querySelector("#sample1 .view2").classList.remove("selected");
});
//모든 이미지 선택
document.querySelector("#sample1 .btn3").addEventListener("click", function(){
document.querySelectorAll("#sample1 .view > div").forEach(function(el){
el.classList.add("selected");
});
});
document.querySelector("#sample1 .btn4").addEventListener("click", function(){
document.querySelectorAll("#sample1 .view > div").forEach(function(el){
el.classList.remove("selected");
});
});
}
03. 요소 메서드 : .classList.toggle()






{
//리셋
document.querySelector("#sample2. btn0").addEventListener("click", function(){
document.querySelectorAll("#sample2 .view > div").forEach(function(el){
el.classList.remove("selected")
});
});
//두번째 이미지 선택
document.querySelector("#sample2 .btn1").addEventListener("click", function(){
document.querySelector("#sample2 .view2").classList.toggle("selected");
});
//모든 이미지 선택
document.querySelector("#sample2 .btn2").addEventListener("click", function(){
document.querySelectorAll("#sample2 .view > div").forEach(function(el){
el.classList.toggle("selected");
});
});
//각각의 이미지를 클릭하면 각각의 이미지를 선택 / 해제
document.querySelectorAll("#sample2 .view > div").forEach(function(el){
el.addEventListener("click", function(){
el.classList.toggle("selected");
});
});
}
04. 요소 메서드 : .classList.contains()






리셋
이 버튼을 클릭(selected)하면 선택된 클래스(selected)를 찾은 후 삭제합니다.
이 버튼을 클릭(selected)하면 선택된 클래스(selected)를 찾은 후 색을 변경합니다.
{
//리셋
document.querySelector("#sample3 .btn0").addEventListener("click", function(){
document.querySelector("#sample3 .view2").classList.add("selected");
document.querySelector("#sample3 .view4").classList.add("selected");
document.querySelector("#sample3 .view6").classList.add("selected");
})
//이 버튼을 클릭(selected)하면 선택된 클래스(selected)를 찾은 후 삭제합니다.
document.querySelector("#sample3 .btn1").addEventListener("click", function(){
document.querySelectorAll("#sample3 .view > div").forEach(function(el){
if(el.classList.contains("selected")){
el.classList.remove("selected");
}
});
});
//이 버튼을 클릭하면 선택된 클래스(selected)를 찾은 후 색을 파란색으로 나오게 합니다.
document.querySelector("#sample3 .btn2").addEventListener("click", function(){
document.querySelectorAll("#sample3 .view > div").forEach(function(el){
if(el.classList.contains("selected")){
el.classList.toggle("selected1");
}
});
});
}