Creating dynamic pages involves direct access to existing elements, creating new ones and changing their properties. Using the document.getElementById JavaScript method allows you to find a page element with the specified identifier and change its properties.
The method is applicable to all HTML tags that have a unique identifier "id". It is mainly used to change the properties and content of div tags.
Page Elements
The HTML hypertext format allows you to describe unique elements and class elements. By definition, a unique element is always one on a page, and there can be many class elements.
When the page loads, it is converted to a DOM tree, in which each element takes its own place. There are many ways to move around the element tree, but when filling a page with information and changing the properties of its elements, it is often enough to access a unique element by its identifier.
An example of a description of unique elements
In the CSS table, descriptions of three divs were made: page headers, page content and its footer (footer). Accordingly, the names of identifiers: scHeader, scContent and scFooter.
A description of JavaScript variables is inserted in the body section: iLoadHeight, iLoadWidth, and for each div of its coordinates along the Y axis and vertical dimensions. The coordinates on the X axis are zero, and the size on this axis is equal to the width of the browser window.
Additionally described are variables for accessing elements: dHeader, dContent and dFooter.
Using the JavaScript getElementById method, the dHeader, dContent, and dFooter variables got the values of real divs and were used to position in the format of the current browser window size.
In the context of this example, the presence of header, content, and footer variables allows you to change their properties so that they are always in the right place and have the correct dimensions when resizing the browser window.
Basic Element Properties
The main purpose of the getElementById JavaScript method is to change the content and properties of an element. Typically, the first is performed by an assignment expression:
- dHeader.innerHTML = 'Start: Y =' + iHeaderCooY + '; H = '+ iHeaderSizeY;
- dContent.innerHTML = 'Start: Y =' + iContentCooY + '; H = '+ iContentSizeY;
- dFooter.innerHTML = 'Start: Y =' + iFooterCooY + '; H = '+ iFooterSizeY;
These three expressions fill the contents of the tags with information about which coordinate they received along the Y axis and what their vertical height is.
The innerHTML property allows you to put any other tags in the tag, that is, you can create arbitrarily complex internal formatting of any unique page element.
In particular, at any time, you can format the header, page content and footer as needed. By inserting other tags inside these tags, you can refer to classes and other identifiers described in CSS rules.
A frequent use of the getElementById JavaScript method is to change the properties of elements. In this context, the dynamic change of CSS rules is understood. These rules are accessible through the general “style” property, which includes almost all CSS properties (rules). In the above example, the rules “style.top”, “style.left” were used. Similarly, you can change other rules for page elements.
The third point is when the JavaScript getElementById method greatly simplifies the work of the developer: grouping and disassembling tags in a specific unique element. For example, in the section of the page content is placed a table of information made in the form of tags, named in rows and columns in a specific way. It is necessary to read and process everything, preserving the original position and design.