요소 객체

​
  1. 요소 객체 : 선택자 : querySelector(): 요소 선택하기
  2. 요소 객체 : 선택자 : querySelectorAll(): 모든 요소 선택하기
  3. 요소 객체 : 선택자 : doucument.getElementById(): 아이디 요소 선택하기
  4. 요소 객체 : 선택자 : doucument.getElementByClassName(): 클래스 요소 선택하기

  5. 요소 객체 : classList 속성 : classList.add() : 클래스 추가하기
  6. 요소 객체 : classList 속성 : classList.remove() : 클래스 삭제하기
  7. 요소 객체 : classList 속성 : classList.toggle() : 클래스 추가/ 삭제하기
  8. 요소 객체 : classList 속성 : classList.contains() : 클래스 존재 여부 확인하기

  9. 요소 객체 : element 속성 : element. clientWidth : 요소의 가로 값 가져오기 (패딩 포함)
  10. 요소 객체 : element 속성 : element. clientHeight : 요소의 세로 값 가져오기 (패딩 포함)
  11. 요소 객체 : element 속성 : element. offsetWidth : 요소의 가로 값 가져오기 (패딩/보더 포함)
  12. 요소 객체 : element 속성 : element. offsetHeight : 요소의 세로 값 가져오기 (패딩/보더 포함)
  13. 요소 객체 : element 속성 : element. getBoundingClientRect() : 요소의 정보 값 가져오기
​
​ ​

01. 요소 객체 : 클래스 메서드 : classList.add() / classList.remove()

이미지1
이미지2
이미지3
이미지4
이미지5
클릭하면 모든 이미지에 클래스(active)를 추가합니다. 클릭하면 모든 이미지에 클래스(active)를 삭제합니다. 
{
    // $(".btn1-1").click(function(){
    //     $(".ex1 div").addClass("active");
    // });

    document.querySelector(".btn1-1").addEventListener("click",function(){
        document.querySelectorAll(".ex1 div").forEach((el)=>{
            el.classList.add("active")
        })
    });

    // $(".btn1-2").click(function(){
    //     $(".ex1 div").removeClass("active");
    // });

    document.querySelector(".btn1-2").addEventListener("click",function(){
        document.querySelectorAll(".ex1 div").forEach((el)=>{
            el.classList.remove("active")
        })
    });
}
​ ​ ​

02. 요소 객체 : 클래스 메서드 : classList.toggle()

이미지1
이미지2
이미지3
이미지4
이미지5
이미지를 클릭하면 클래스(active)를 추가/삭제합니다. 
{
    //모든 이미지 선택
    // document.querySelectorAll(".ex2 div").forEach((el) => {
    //     el.addEventListener("click", function(){
    //         document.querySelectorAll(".ex2 div").forEach((el) => {
    //             el.classList.toggle("active");
    //         })
    //     });
    // });

​
    //클릭한 이미지만 선택
    document.querySelectorAll(".ex2 div").forEach((el) => {
        el.addEventListener("click", function(){
            this.classList.toggle("active");
        });
    });
}

03. 요소 객체 : 클래스 메서드 : classList.contains()

이미지1
이미지2
이미지3
이미지4
이미지5
리셋 클릭하면 .active 클래스를 찾은 후에 클래스를 제거합니다. 
{
    document.querySelector(".btn3-0").addEventListener("click", () => {
        document.querySelector(".ex3 > div:nth-child(2)").classList.add("active");
        document.querySelector(".ex3 > div:nth-child(4)").classList.add("active");
    });

    document.querySelector(".btn3-1").addEventListener("click", () => {
        document.querySelectorAll(".ex3 > div").forEach(el => {
            if(el.classList.contains("active")){
               el.classList.remove("active");
            };
        });
    });
}

04. 요소 객체 : 클래스 메서드 : clientWidth(), clientWidth(), offsetWidth(), offsetHeight(), getBoundingClientRect()

여기는 텍스트 영역입니다.

클릭하면 원의 가로값(clientWidth)을 구합니다. 클릭하면 원의 세로값(clientHeight)을 구합니다. 클릭하면 원의 가로값(offsetWidth)을 구합니다. 클릭하면 원의 세로값(offsetWidth을 구합니다. 클릭하면 원의 정보값(getBoundingClientRect)을 구합니다. 
{
    const cw = document.querySelector(".circle4").clientWidth;
    const ch = document.querySelector(".circle4").clientHeight;
    const ow = document.querySelector(".circle4").offsetWidth;
    const oh = document.querySelector(".circle4").offsetHeight;
    const rect = document.querySelector(".circle4").getBoundingClientRect();

    document.querySelector(".btn4-1").addEventListener("click", function(){
        document.querySelector(".text4").innerHTML = "이 원의 가로 값은" + cw + "px 입니다.";
    });
    document.querySelector(".btn4-2").addEventListener("click", function(){
        document.querySelector(".text4").innerHTML = "이 원의 세로 값은" + ch + "px 입니다.";
    });
    document.querySelector(".btn4-3").addEventListener("click", function(){
        document.querySelector(".text4").innerHTML = "이 원의 가로 값은" + ow + "px 입니다.";
    });
    document.querySelector(".btn4-4").addEventListener("click", function(){
        document.querySelector(".text4").innerHTML = "이 원의 세로 값은" + oh + "px 입니다.";
    });
    document.querySelector(".btn4-5").addEventListener("click", function(){
        document.querySelector(".text4").innerHTML = 
        `
        이 원의 x값은 ${parseInt(rect.x)}px 입니다.
        이 원의 y값은 ${parseInt(rect.y)}px 입니다.
        이 원의 top값은 ${parseInt(rect.top)}px 입니다.
        이 원의 left값은 ${parseInt(rect.left)}px 입니다.
        이 원의 bottom값은 ${parseInt(rect.bottom)}px 입니다.
        이 원의 right값은 ${parseInt(rect.right)}px 입니다.
        이 원의 width값은 ${parseInt(rect.width)}px 입니다.
        이 원의 height값은 ${parseInt(rect.height)}px 입니다.
        `;
    });
}
​