10.1 – Introduction to the DOM. Learning to select, modify, and manipulate DOM elements
I am the first element with class="item"
10.1.1 Selectors with class='lista'
Replace the content of the selector with id=titulo
Modify the text of an element. Replace with...
Change the attribute of an element. Replace one image with another
10.2.4.1 Empty all content inside the div
First paragraph
Second paragraph
Third paragraph
Fourth paragraph
10.2.4.2 Partially empty the content inside the div. Remove the third paragraph
First paragraph
Second paragraph
Third paragraph
Fourth paragraph
10.6 Selection Methods
Example getElementsByTagName
10.6.1 – Changing the text color of the content
This is the 1st paragraph inside
|pre| tags
This paragraph with |pre| tags
is inside a division.
This is the 3rd paragraph inside
|pre| tags.
10.7 Modern Selection Methods
10.7.1 Methods querySelector and querySelectorAll
10.7.2 Advantages of querySelector and querySelectorAll
Example 1. Comparing both methods
This is a paragraph with class highlight
Another paragraph without the highlight class.
This is a span with class highlight.10.8 Content Modification.
Example 1. Using the textContent property
Original text
Example 2. Using the innerText property
Original text
Example 3. Using the innerHTML property
Original text
10.9 Create and add new elements (createElement, appendChild, insertBefore)
10.9.1 and 10.9.2 Use of createElement and appendChild
This is the first paragraph inside the div with id="miContenedor"
10.9.3 Use of insertBefore
First text inside a p tag
Reference text
10.9.4 Combined use of createElement, appendChild, and insertBefore.
This is the original paragraph for exercise 10.9.4
10.10 Attribute Manipulation. Methods getAttribute, setAttribute, removeAttribute.
10.10.1 Use of getAttribute
Example 1. Get the value of the "href" attribute from a link
Visit an_example.comExample 2. Get the value of a custom attribute.
Example 3. Form validation and data retrieval
10.10.2 Use of setAttribute
Example 1. Change the value of an existing attribute. Redirects the page
Visit example2.comExample 2. Add a custom attribute
Example 3. Change a CSS class
This is a paragraph with the class sencilla
Example 4. Create an element and assign attributes
10.10.3 Use of removeAttribute
Example 1. Remove Style attributes (style)
This is a red paragraph whose style will be removed
Example 2. Disable link functionality
This link will not go anywhereExample 3. Disable a button
Reload the page to restart the process and repeat the test
Example 4. Enable attributes in a previously disabled form field.
Example 5. Remove attributes. Clear custom data from an element
Example 6. Remove Accessibility Attributes (aria-attributes)