Skip to content
Practice working with the DOM in JavaScript
JavaScript HTML
Branch: master
Clone or download
Pull request Compare This branch is even with dc-wdi-fundamentals:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CONTRIBUTING.md
LICENSE
STYLE.md
classlist.js
data-attribute.js
dom_content.js
getelements.js
index.html
queryselector.js
readme.md

readme.md

General Assembly Logo

JS DOM Practice

Instructions

  1. Fork and clone this repository.
  2. Change into the new directory.

JS DOM Practice

Practice getting elements from the DOM using the common methods for interacting with the DOM!

For each of these you should store the result in a variable and console.log it see if you got it right.

1. getElement(s)By

The first set of DOM getters we'll talk about are the getElement(s)By methods, like getElementById. Open up getelements.js and work through the prompts.

2. querySelector

The second set of DOM getters we'll talk about are querySelector and querySelectorAll. Comment out getelements.js in index.html and uncomment queryselector.js. Then open up queryselector.js and work through the prompts.

3. Updating DOM Content

Use the following methods of DOM nodes to update the content of the DOM:

  • innerHTML
  • outerHTML
  • innerText
  • outerText
  • textContent

4. Working with the classList API

The following are the three methods we can use to work with classes on a DOM node:

  1. .addClass()
  2. .removeClass()
  3. .toggleClass()

5. Working with data-* Attributes

Use the data-* attribute to add data to a DOM node. You can get that data in JavaScript with a node's dataset property.

License

  1. All content is licensed under a CC­BY­NC­SA 4.0 license.
  2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.
You can’t perform that action at this time.