DOM을 깨우치다 정리 (5)

dongwon·2021년 4월 27일

DOM

DOM을 깨우치다

목록 보기

6/9

5장. Element 노드 지오메트리와 스크롤링 지오메트리

5-1. Element 노드 크기, 오프셋, 스크롤링 개요

노드의 시각적인 형태와 지오메트리를 프로그래밍을 통해 살펴보고 조작하기 위한 일련의 API가 존재한다.

5-2. offsetParent를 기준으로 element의 offsetTop 및 offsetLeft 값을 가져오기

offsetTop과 offsetLeft 속성을 이용하면 offsetParent로부터 element 노드의 오프셋 픽셀 값을 가져올 수 있다. 즉 elemenet의 좌상단 경계로부터 안쪽 좌상단 경계 까지의 거리를 픽셀로 제공해준다.

offsetParent는 가장 가까운 부모 element를 검색하게 된다.

<body>
    #blue{
        height: 100px;
        width: 100px;
        border: 10px solid gray;
    }
    #red{
        height: 50px;
        width: 50px;
        border: 10px solid gray;
    }
</body>

var div = document.querySelector('#red');

div.offsetTop       // 60
div.offsetLeft;     // 60
div.offsetParent;   // <body>

5-3. getBoundingClientRect()를 사용하겨 뷰포트를 기준으로 element의 Top, Right, Bottom, Left 테두리 오프셋을 얻기

getBoundingClientRect()를 이용하면 뷰포트의 좌상단 끝을 기준으로 elememt의 바깥쪽 테두리 위치를 얻을 수 있다.

<body>
    div{
        height: 50px;
        width: 50px;
        border: 10px solid gray;
    }
</body>

var divEdges = document.querySelector('div').getBoundingClientRect();

divEdges.top    // 100
divEdges.right  // 170
divEdges.bottom // 170
divEdges.left   // 100

5-4. 뷰포트에서 element의 크기(테두리 + 패딩 + 내용) 얻기

getBoundingClientRect()는 top, bottom, left, right 뿐 만 아니라 height, width 값도 반환한다. 이는 테두리 + 패딩 + 내용을 모두 더한 값이다.

<body>
    div{
        height: 25px;
        width: 25px;
        border: 25px solid gray
    }
</body>

var div = document.querySelector('div').getBoundingClientRect();

div.height  // 125
div.width   // 125

offsetHeight와 offsetWidht를 이용해 쉽게 얻을 수 있다.

var div = document.querySelector("div");
div.offsetHeight; // 125
div.offsetWidht; // 125

5-5. 뷰퐅에서 테두리를 제외한 element의 크기 (패딩 + 내용) 얻기

clientHight와 clientWidht를 이용해 패딩 + 내용을 얻을 수 있다.

<body>
    div{
        height: 25px;
        width: 25px;
        border: 25px solid gray
    }
</body>

var div = document.querySelector('div')
div.clientHight     // 75 ( 테두리 제외 )
div.clientWidth     // 75 ( 테두리 제외 )

5-6. elementFromPoint()를 사용하여 뷰포트의 특정 지점에서 최상단 element 얻기

elementFromPoint()를 사용하여 최상단 element에 대한 참조를 얻을 수 있다. 즉 dom 에 접근 가능

<body>
  <div id="bottom"></div>
  <div id="top"></div>
</body>;

console.log(document.elementFromPoint(50, 50)); // top

5-7. scrollHeight와 scrollWidth를 사용하여 스크롤될 element의 크기를 얻기

scrollHeight와 scrollWidth를 이용해 스크롤될 노드의 높이와 너비를 알 수 있다. 즉 스크롤 막대의 길이를 알 수 있다.

<body>
    div{
        height: 100px;
        width: 100px;
        overflow: auto;
    }
    p{
        hight: 1000px;
        width: 1000px;
    }
</bidy>

var div = document.querySelector('div');

div.scrollHeight    // 1000
div.scrollWidht     // 1000