The DOM

Which sounds scary and overbearing but it probably isn’t maybe.

Mozilla Docs on the DOM

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Essentially, it connects web pages to scripts or programming languages.

(From the Mozzilla docs)

This is a really wordy way to say that, in general, the DOM is a way to access the stuff on your page. It comes in two pieces.

1. The document’s representation in computer memory. In essence, behind the scenes the DOM is all the visible (and invisible) stuff in your page stored in the computer’s memory so you can easily access it.
2. A way to find and modify the things inside the DOM

Getting a reference to something in the DOM

Several methods (all inside of havascript)

1. document.getElementsByTagName(“tagName”);
2. document.getElementById(“id”);
3. document.getElementsByClassName(“className”);
4. document.querySelector(“#css .selector”);

All of these return a DOM Element (or an array of DOM elements) reference.

References

• When you are programming, variables are not the actual thing they contain
• Instead, variables are pointers to the actual thing

• In other words, the variables you are working with are more like names than things

• I am a single entity
• But you might call me “Travis”, “Mr. Faas”, “Teacher”, “Teech”, or even “That guy”
• Those are all references to the entity that is me

References in Code

document.getElementById gets a reference to the DOM element. So, this is totally valid:

var refOne = document.getElementById("myDiv");
var refTwo = document.getElementById("myDiv");

Both are references to myDiv, though neither of them actually are myDiv

Get element by ID

//now I have a reference to myDiv element
var divRef = document.getElementById('myDiv');

<div id="myDiv">
	<p>Hi!</p>
</div>

Get element by class name

• Return an array

//now I an array of references to all the elements with clas 'sunny'
var divRefs = document.getElementsByClassName('sunny');

<ul>
	<li class="sunny">Hello</li>
	<li class="sunny">Goodbye</li>
</ul>

DOM Elements

DOM element have some useful properties

• innerHTML
• style
• className
• parent

Inner HTML

• Changes the html within the tag

//changes the stuff within the tag

myDivRef.innerHTML = "<a href='#'>Hello world!</a>";

BEFORE

<div></div>

AFTER

<div> <a href='#'>Hello world!</a></div>

Changing styles

Use the style property, and its sub properties

myDivRef.style.backgroundColor = "#00FF00";
myDivRef.style.width = 100;

Style Caveat

The properties use camel-casing where CSS uses the dash

CSS background-color

JS backgroundColor

Full list of properties.

Class

Sometimes you might want to have a prestyled class and just add it to the DOM element at runtime. You can change its class name.

myDivRef.className = "navitem"; //sets the mydivref's class to "navitem"

Creating new elements

document.createElement

• A way to create DOM elements before adding them to the DOM
• Takes one argument, a tag name
• Needs to be a valid tag

var madeDiv = document.createElement("div");
var madeUL = document.createElement("ul");

Styling newly created elements

var elm = document.createElement("DIV")
elm.style.height = 100;
elm.style.width = 100;
elm.style.backgroundColor = "#FF0000";
elm.style.float = "left";

Adding new elements

• domElementRef.appendChild

var elm = document.createElement("DIV")
elm.innerHTML= "Hello there!";

var divToAddTo = document.getElementById("myDiv");
divToAddTo.appendChild(elm);

Removing elements

domRef.removeChild()

myDivRef.remove()

Sidenote on parent, child

<div><!-- parent -->>
	<div></div> <!-- child -->
</div>

Some examples

Adding divs with a loop

for(var i = 0; i < 10; i++) {
	var elm = document.createElement("DIV")
	loopDivRef.appendChild(elm);
}

Random CSS color

function randomColor() {

	var randomRed = Math.floor(Math.random() * 255);
	var randomGreen = Math.floor(Math.random() * 255);
	var randomBlue = Math.floor(Math.random() * 255);
	//create the string that is the ‘random color’
	var randomColor = "rgb("+randomRed+","+randomGreen+","+randomBlue+")";

	return randomColor;
}