Foreword: This is the author's own understanding and arrangement after learning. If there are any mistakes or doubts, please correct them and I will keep updating them.

getBoundingClientRect()

The simple way to determine the size and location of an element is to use obj.getBoundingClientRect().

The obj.getBoundingClientRect() method returns an object that provides information about the size of the current element node and its position relative to the viewport.

However, the objects returned by each browser contain different attributes:

• firefox: top left right bottom width height x y (where x=left, y=top)
• chrome/safari/IE9 and above: top left right bottom width height
• IE8 and below: top left right bottom

The width and height returned by this method are offset Width and offset Height.

　　Element.getBoundingClientRect().height = border + padding + height ;

　　Element.getBoundingClientRect().width = border + padding + width ;

Top: The vertical coordinates of the top of the element relative to the viewport;

Left: The abscissa of the element's left boundary relative to the viewport;

Right: The abscissa of the element's right boundary relative to the viewport; right = left + width;

Bottom: The vertical coordinates of the bottom of the element relative to the viewport; bottom = top + height;

        <style type="text/css">
            *{padding: 0;margin: 0;}
            #test{
                width: 100px;
                height: 100px;
                padding: 10px;
                line-height: 200px;
                border:1px solid black;
                overflow:scroll;
            }
        </style>
        
        <div id="test">content</div>    
        
        <script>
            var oTest = document.getElementById('test');
            //chrome/safari: 220(10+200+10)
            //firefox/IE: 210(10+200)
            console.log(oTest.scrollHeight);//220
            //103(100+10+10-17)
            console.log(oTest.clientHeight);//103
            //122(100+10+10+1+1)
            
            //The width and height returned by this method are offset width and height. offsetWidth,offsetHeight ；
            console.log(oTest.offsetHeight);//122
            //122(100+10+10+1+1)
            console.log(oTest.getBoundingClientRect().height);//122
        </script>

getClientRects()

The getClientRects() method, unlike getBoundingClientRect(), is a class array object that returns several rectangular regions of an element. The parameters of each class array object are the same as the getBoundingClientRect() method. Each class array object has six attributes: bottom, height, left, right, top and width, representing their four coordinates relative to the viewport, as well as their own height and width.

If applied to block-level elements, the attributes of getClientRects()[0].attr and getBoundingClientRect().attr return the same value;

        <style type="text/css">
            *{padding: 0;margin: 0;}
            #test{
                width: 100px;
                height: 100px;
                padding: 10px;
                line-height: 200px;
                border:1px solid black;
                overflow:scroll;
            }
        </style>
        
        <div id="test">content</div>    
        
        <script type="text/javascript">
            var oTest = document.getElementById('test');
            console.log(oTest.getClientRects()[0].height);//122
            console.log(oTest.getBoundingClientRect().height);//122
        </script>

In fact, this method is mainly used for inline elements, how many rows the inline elements have, and how many members the object returned by this method has. This method is mainly used to judge whether the elements in the line are newline or not.

        <div class="wrapper">
            <span id="test" style="margin: 0;padding: 0;">
                hello world
                hello world
                hello world
            </span>
        </div>
        <script type="text/javascript">
            var oTest = document.getElementById('test');
            console.log(oTest.getClientRects().length);//3
        </script>

getBoundingClientRect(x,y)

Sometimes we want to determine what elements are in the designated position in the viewport. This can be determined by the document.elementFromPoint(x,y) method. By passing X and Y coordinates (relative to the viewport), the method selects Element objects at the top and bottom of the specified coordinates. If the specified point is outside the viewport, elementFromPoint() returns null;

The top layer refers to the largest element of z-index, and the bottom layer refers to the lowest sub-element.

This method can be used to detect whether elements overlap or collide.

        <style type="text/css">
            *{padding: 0;margin: 0;}
        </style>
        
        <div class="test" style="width: 100px;height: 100px;">
            <span id="span">hello world</span>
        </div>
        
        <script type="text/javascript">
            var oTest = document.getElementById('test');
            console.log(document.elementFromPoint(10,10).id);//3
        </script>