Document Object Model Sandbox

Summary

Playing around with html document object model (dom) and changing elements using javascript.

There are so many to demonstrate I will just list a few to demonstrate my understanding.

Lets add a couple of fiddles.

classList

addEventListener

Next, I will add some dynamic astro components into the page.

The astro component is a .mdx file located in the components directory which I import into the mdx blog post file.

import DomSandbox from '../../components/mdx/DomSandbox.astro';

The appendChild() Method

• Coffee
• Tea

Click "Append" to append an item to the end of the list:

DOM Attributes

The attributes of the image are:

Click "try it" to display the numer of button attributes:

The getAttribute() Method

Learn more about Link To My Website

Get Element By Tag Name

Get Elements By Class Name

Click the button to add a background color to all the elements with class="child" inside the div element.

Try it

Inner HTML

Click the button to change the HTML content, attributes and values of the a element.

My Data Analyst Website

Try it

insertAdjacentHTML() Method

A Heading on the page

Click the button to insert a paragraph after the heading and before the heading:

Try it

innerText

I am a paragraph.

Click the button get the inner text of the p element above.

Try it

outerHTML

This heading will change!

Click the button to change the header from a h1 to a h3.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam maxime quasi ea dolorum. Et aliquid quo nulla omnis, unde inventore corrupti impedit explicabo voluptatibus, obcaecati suscipit architecto. Nam, aspernatur cum.

Change Outer HTML

Query Selector All

Try it