js_ex_dom

JavaScript and HTML Document Object Model (DOM) Examples

This section lists examples of how JavaScript can be used to interact with and manipulate HTML elements through the DOM.

Anchor (<a>) Element

Common tasks with link elements:

• Retrieve the href (URL) of a link.
• Get or set the hreflang attribute (language of the linked resource).
• Access the id of a link.
• Determine the rel attribute (relationship to the current document).
• Find or change the target attribute (where to open the link).
• Inspect the type attribute (MIME type of the linked resource).

These are typically done by selecting the element (e.g., using document.getElementById or document.querySelector) and then accessing its properties (e.g., linkElement.href).

Area (<area>) Element (within Image Maps)

Interacting with clickable regions in an image map:

• Get the alt text for an area.
• Retrieve the coords (coordinates) defining the area.
• Find the shape of the area (e.g., ‘rect’, ‘circle’).
• Access the href (URL) of an area.
• Parse components of the href: protocol, hostname, port, pathname, search (query string), hash.
• Get or set the target attribute for the area’s link.

Base (<base>) Element

Managing base URLs for relative links:

• Retrieve the href attribute to find the base URL for all relative URLs on a page.
• Get the target attribute to find the default target for all links on a page.

IFrame (<iframe>) Element

Manipulating embedded inline frames:

• Access the contentDocument or contentWindow to interact with the iframe’s content (subject to same-origin policy).
• Change the style.backgroundColor of the iframe element itself (not its content directly without access).
• Get or set the height and width attributes of the iframe.
• Retrieve the name attribute of an iframe.
• Get or change the src (source URL) attribute of an iframe, effectively loading new content.

Modern practice might also involve postMessage for cross-origin communication with iframes.

Image (<img>) Element

Working with images:

• Get or set the alt text for an image.
• Retrieve the height and width of an image (actual or specified).
• Implement dynamic image loading, e.g., display a high-resolution version on click.
• Get or change the src (source URL) of an image.
• Dynamically change an image based on user interaction (e.g., toggle a lightbulb image).
• Access the usemap attribute if the image is part of an image map.

Table (<table>, <tr>, <td>, etc.) Elements

Manipulating HTML tables:

• Change table appearance, e.g., table.style.borderWidth or CSS classes for border-spacing and padding.
• Get or set the innerHTML or textContent of a table cell (<td> or <th>).
• Create and append a <caption> element to a table using table.createCaption().
• Add or delete rows using table.insertRow() and table.deleteRow().
• Add or delete cells within a row using row.insertCell() and row.deleteCell().
• Modify the content of existing table cells.

Modern applications might use JavaScript frameworks or libraries for complex table manipulations and data binding, but understanding core DOM methods is essential.