JavaScript DOM
12 lessonsAbout 72 minutesIntermediate
This part of the JavaScript Tutorial runs from JavaScript DOM through to JavaScript Forms and Inputs. There are 12 lessons here, and working through them takes about 72 minutes at a steady pace.
It follows on from JavaScript Objects, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1JavaScript DOMThe DOM is the browser's model of a page, and JavaScript uses it to read and change the page.
- 2JavaScript DOM SelectorsJavaScript finds elements on a page with getElementById, querySelector and querySelectorAll.
- 3JavaScript DOM ContenttextContent and innerHTML read and change what is inside an element.
- 4JavaScript DOM AttributesJavaScript reads and changes HTML attributes with getAttribute, setAttribute and dataset.
- 5JavaScript DOM StylesThe style property changes an element's appearance directly from JavaScript.
- 6JavaScript classListclassList adds, removes and toggles CSS classes on an element.
- 7JavaScript Creating ElementscreateElement builds a new element that can then be added to the page.
- 8JavaScript Inserting Elementsappend, prepend, before and after decide exactly where a new element lands.
- 9JavaScript Removing Elementsremove takes an element off the page, and removeChild does the same from the parent.
- 10JavaScript DOM TraversalDOM traversal moves from one element to its parent, children or siblings.
- 11JavaScript DOM CollectionsquerySelectorAll returns a NodeList, which looks like an array but is not one.
- 12JavaScript Forms and InputsJavaScript reads and sets form values through the value and checked properties.