Exploratory assignment 1
- Go to a random website
- Use inspect
- Create a DOM tree for the page that shows at least 6 layers.
- Keep the page open a little while longer...
MDN describes the DOM as:
"... a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page."- MDN contributors (2020) Introduction to the DOM [online] available from https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction [23 January 2020]
The document is an object, and each object can have some methods and properties attached.
Let's have a look at some of the properties attached to the document object:
To access a single element on the page, we may use the .getElementByID() method:
To use the .getElementById() method, the element that we want to access needs to have an id.
In the example above, we use the document object along with the .getElementById() method to access the element on our page with the id of mainHeading.
The id is written inside the parentheses of the method and in quotation marks (either single or double)
Once we have accessed the element, we may look at what's inside it:
Notice that in this example, instead of typing the whole thing (document.getElementById("mainHeading").innerHTML) just use the name of the variable we used to store the element (h1) and then read the .innerHTML property.
Doing it this way enables us to read the content of the element, but we can also change it by assigning a new value to it:
In this example, we assign a new value to our element's innerHTML property; the string "Hello Spring!".
Notice that we're no longer just logging to the console, but actually changing the content on the page.
We may also change the style instructions of the element, accessing the .style property:
Notice that the .style property is followed by the CSS property that we wish to change: In the first statement, we change the value of the color property to white, and in the second one we change the background-color property to black.
Be aware that CSS properties with a dash are written in camelCase and NOT with a dash! This goes for all CSS properties that contain a dash.
NB: If you inspect the element, you will notice that the style instructions are added to the element inline - and so we're not changing the actual CSS document this way, just overruling the style instructions in the stylesheet.
Instead of using the .getElementById() method, we may also use the .querySelector() method:
By using the .querySelector() method, we cannot only access the elements that has id attribute, but practically every element on the page. In the example above, we use it to access the body element.
We can also use the .querySelector() method to access an element that has a specific id:
... or a specific class:
Notice that id's are written with a # and classes with a .. Also be aware that this method will only return the first element that fits - e.g. if there are multiple elements that has the same class, it will only access the first.
When we have accessed an element, we can use it to "visit" it's parents, siblings and children:
The first property (.parentElement) is used to access the parent element of our element.
The second one (.previousElementSibling) is used to access the "elder" sibling of our element.
The third one (.nextElementSibling) is used to access the "younger" sibling of our element.
The fourth one (.firstElementChild) is used to access the first child element of our element.
The fifth one (.lastElementChild) is used to access the last child element of our element.
We can of course only access these elements if they exist.