The document object has various methods available to find a particular element within the HTML page. Each of these methods has a parameter that could be used to find the required element. Some of the methods are:
- The getElementsByTagName() Method
- The getElementsByClassName() Method
- The getElementById() Method
- The getElementsByName() Method
- The querySelector() Method
- The querySelectorAll() Method
Step 2: Finding the position of the element: To get the location of any HTML element in the (x, y) coordinate format, there are two document properties which are used:
- offsetTop Property: It returns the top position in pixels, relative to the top of the parent element. It includes the top position, and margin of the element and the top padding, scrollbar, and border of its parent element.
- offsetLeft Property: It returns the left position in pixels, relative to the left of the parent element. It includes the left position, and margin of the element and the left padding, scrollbar, and border of its parent element.
Combining both these properties into one to get the code for calculating the coordinates for an HTML element is given as follows: