Javascript 레퍼런스

요소 객체

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

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

  9. 요소 객체 : element 속성 : element.clientWidth : 요소의 가로 값 가져오기(padding 포함)
  10. 요소 객체 : element 속성 : element.clientHeight : 요소의 세로 값 가져오기(padding 포함)
  11. 요소 객체 : element 속성 : element.offsetWidth : 요소의 가로 값 가져오기(padding/border 포함)
  12. 요소 객체 : element 속성 : element.offsetHeight : 요소의 세로 값 가져오기(padding/border 포함)
  13. 요소 객체 : element 메서드 : element.getBoundingClientRect() : 요소의 정보 값 가져오기

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

이미지1
이미지2
이미지3
이미지4
이미지5
이미지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()

이미지6
이미지7
이미지8
이미지9
이미지10
이미지1
이미지를 클릭하면 클래스(active)를 추가/삭제합니다. 
{
    // 모든 이미지가 선택이 되는것.
    // $(".ex2 div").click(function(){
    //     $(".ex2 div").toggleClass("active");
    // });

    document.querySelectorAll(".ex2 div").forEach((el) => {
        el.addEventListener("click", function(){
            document.querySelectorAll(".ex2 div").forEach((el) => {
                el.classList.toggle("active");
            })
        });
    })

    // 내가 클릭한 이미지만 선택이 되는것.(this사용)
    // $(".ex2 div").click(function(){
    //     $(this).toggleClass("active");
    // });
    
    document.querySelectorAll(".ex2 div").forEach((el) => {
        el.addEventListener("click", function(){
            this.classList.toggle("active");
        });
    })
}

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

이미지11
이미지12
이미지13
이미지14
이미지15
이미지16
리셋 클릭하면 active 클래스를 찾은 후에 클래스를 제거합니다. 
{
    //리셋버튼을 클릭하면 첫번째, 네번째 클래스 추가
    // $(".btn3-0").click(function(){
    //     $(".ex3 > div:nth-child(1), .ex3 > div:nth-child(4)").addClass("active")
    // })
    // $(".btn3-1").click(function(){
    //     if( $(".ex3 > div").hasClass("active") ){
    //         $(".ex3 > div").removeClass("active");
    //     }
    // });

    document.querySelector(".btn3-0").addEventListener("click", () => {
        document.querySelector(".ex3 div:nth-child(1)").classList.add("active")
        document.querySelector(".ex3 div:nth-child(4)").classList.add("active")
    });

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

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

04. 요소 객체 : element 속성 : element.clientWidth/clientHeight/offsetWidth/offsetHeight/
getBoundingClientRect()

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

클릭하면 원의 가로 값(clientWidth)을 구합니다. 클릭하면 원의 세로 값(clientHeight)을 구합니다. 클릭하면 원의 가로 값(offsetWidth)을 구합니다. 클릭하면 원의 세로 값(offsetHeight)을 구합니다. 클릭하면 원의 정보 값(getBoundingClientRect())을 구합니다. 
{
    // clientWidth/Height => padding 포함, border/margin 불포함 === innerWidth/Height
    // offsetWidth/Height => padding/border 포함, margin 불포함 === outerWidth/Height

    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 입니다.
            ` ;
    });
}