DOM & BOM Revisited

Federico Knüssel
Aug 6, 2017 · 9 min read

DOM

http://www.w3schools.com/js/pic_htmltree.gif

Node types

The Node interface

Accessing nodes

const wrapper = document.querySelector('#wrapper');wrapper.getElementsByTagName('p');
wrapper.getElementsByClassName('active');
wrapper.getElementsByName('something');
document.documentElement.lastChild;
document.documentElement.childNodes[0];
document.documentElement.firstChild.nextSibling;
document.body.previousSibling;
document.body.parentNode;
// both return the html element
document.body.parentNode === document.body.parentElement; // true
document.documentElement.parentNode; // returns the document node
document.documentElement.parentElement; // returns null
document.nodeType; // 9 = DOCUMENT_NODE
document.documentElement.nodeType; // 1 = ELEMENT_NODE

Attributes

const element = document.querySelector('#title');
const className = element.attributes.class; // dot notation
const firstAttribute = element.attributes[0]; // array notation
element.attributes.class.nodeType; // returns 2 = ATTRIBUTE_NODE
<img src="image.jpg" alt="This is an image" class="logo logo-sm" />// -----const image = document.querySelector('.logo');image.src; // returns "image.jpg"image.alt = "This is an AWESOME image"; // updates the alt text
image.className; // returns "logo logo-sm"
image.class; // returns undefined
image.classList; // returns ["logo", "logo-sm"]image.classList.add('logo-awesome');
image.classList.remove('logo-sm');
image.classList.toggle('active');
image.classList.contains('this-class-doesnt-exist');
image.classList; // now returns ["logo", "logo-awesome", "active"]
getComputedStyle(image).width; // returns the actual image width

Creating, removing and replacing Nodes

const p = document.createElement('p');
const blurb = document.createTextNode('sup mate');
const attr = document.createAttributeNode('class');
p.appendChild(blurb);attr.value = 'my-custom-class';
p.setAttributeNode(attr);
p.setAttribute('is-awesome', true);
const element = document.querySelector('#title');element.parentNode.removeChild(element);element.remove(); // this doesn't work on IE!
const oldElement = document.querySelector('#title');
const newElement = document.createTextNode('this is our new title');
const newElementText = document.createTextNode('our new title');
newElement.appendChild(newElementText);const replacedNode = oldElement.parentNode.replaceChild(newElement, oldElement);replacedNode === oldElement; // true

Node relationships

Events

const button = document.querySelector('#button');button.addEventListener('click', handleClick);function handleClick(event) {
console.log('clicked');
}
button.removeEventListener('click', handleClick);

BOM

https://learn.javascript.ru/article/browser-environment/windowObjects.png

Global variables and methods

// outer dimensions
const outerHeight = window.outerHeight;
const outerWidth = window.outerWidth;
// inner dimensions
const innerHeight = window.innerHeight;
const innerWidth = window.innerWidth;
const timeout = setTimeout(callback, delay); // delay in ms
const interval = setInterval(callback, delay); // delay in ms
clearTimeout(timeout);
clearInterval(interval);

The location object

document.location === window.location; // returns true

The history object

The navigator object


Federico Knüssel

Written by

Front End Developer 👨‍💻 🇦🇺

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade