JavaScript - elementsFromPoint() method

revision:

Category : document

The elementsFromPoint() method of the Document interface returns an array of all elements at the specified coordinates (relative to the viewport). The elements are ordered from the topmost to the bottommost box of the viewport.

It operates in a similar way to the elementFromPoint() method.

This is an experimental technology.

Syntax : 

        elementsFromPoint(x, y)

Parameters:

x : the horizontal coordinate of a point.

y : the vertical coordinate of a point.

Examples: 

            <div>
                <p>Some text</p>
              </div>
              <p>Elements at point 30, 20:</p>
              <div id="output"></div>
              <script>
                let output = document.getElementById("output");
                if (document.elementsFromPoint) {
                let elements = document.elementsFromPoint(30, 20);
                elements.forEach((elt, i) => {
                    output.textContent += elt.localName;
                    if (i < elements.length - 1) {
                    output.textContent += " < ";
                    }
                });
                } else {
                output.innerHTML =
                    '<span style="color: red;">' +
                    "Browser does not support <code>document.elementsFromPoint()</code>" +
                    "</span>";
                }
              </script>

Practical examples

example: retrieve elements from a specific point until the end of the viewport.

code: 
                    <div>
                        <p id="el-1"></p>
                        <p id="el-2"></p>
                        <p id="el-3"></p>
                    </div>
                    <script>
                        const elms = document.elementsFromPoint(100, 10);
                        console.log(elms[0]);
                        document.getElementById("el-1").innerHTML = elms[0];
                        document.getElementById("el-2").innerHTML = elms[1];
                        document.getElementById("el-3").innerHTML = elms[2];
                    </script>

example: return an array of all elements at the specified coordinates.

Some text

Elements at point 30, 20:

code: 
                    <div>
                        <div>
                            <p>Some text</p>
                        </div>
                        <p>Elements at point 30, 20:</p>
                        <div id="output"></div>
                    </div>
                    <script>
                        var output = document.getElementById("output");
                        if (document.elementsFromPoint) {
                            var elements = document.elementsFromPoint(30, 20);
                            for(var i = 0; i < elements.length; i++) {
                                output.textContent += elements[i].localName;
                                if (i < elements.length - 1) {
                                    output.textContent += " < ";
                                }
                            }
                        } else {
                            output.innerHTML = "<span style=\"color: red;\">" +
                            "Browser does not support <code>document.elementsFromPoint()</code>" +
                            "</span>";
                        }
                    </script>