DOM review

dom-review.markdown

DOM review

A Pen by Rodrigo Pombo on CodePen.

License.

index.html

<div id="root">
</div>

script.js

// Get an element by id
const domRoot = document.getElementById("root");
// Create a new element given a tag name
const domInput = document.createElement("input");
// Set a property value
domInput["value"] = "Hi world";
// Handle events
domInput.addEventListener("change", e => alert(e.target.value));
// Create a text node
const domText = document.createTextNode("");
// Set text node content
domText["nodeValue"] = "Foo";
// Append an element
domRoot.appendChild(domInput);
// Append a text node (same as previous)
domRoot.appendChild(domText);