Tutorial by Examples | RIP Tutorial

Retrieving existing html elements

One of the most common tasks is retrieving an existing element from the DOM to manipulate. Most commonly these methods are executed on document, because it is the root node, but all these methods work on any HTML element in the tree. They will only return children from the node it is executed on. R...

DOM • Getting started with DOM

Getting started

The DOM (Document Object Model) is the programming interface for HTML and XML documents, it defines the logical structure of documents and the way a document is accessed and manipulated. The main implementers of the DOM API are web browsers. Specifications are standardized by the W3C and the WHATW...

DOM • Getting started with DOM

Wait for DOM to be loaded

Use DOMContentLoaded when the <script> code interacting with DOM is included in the <head> section. If not wrapped inside the DOMContentLoaded callback, the code will throw errors like Cannot read something of null document.addEventListener('DOMContentLoaded', function(event) { ...

DOM • Getting started with DOM

Use innerHTML

HTML <div id="app"></div> JS document.getElementById('app').innerHTML = '<p>Some text</p>' and now HTML looks like this <div id="app"> <p>Some text</p> </div>

DOM • Getting started with DOM

HTML markup

example input: <html> <head> <title>the title</title> <link href='css/app.css' type='text/css' rel='stylesheet'> <script src='js/app.js'></script> </head> <body> <h1>header</h1> <div> &l...

DOM • Getting started with DOM