Lecture 4: JavaScript: DOM

Question 1

Document Object Model

Answer 1

The DOM is how programs can access and modify HTML

Question 2

How DOM sees HTML

Answer 2

The HTML DOM views an HTML doc as a tree structure
Each node in tree is an HTML element

Question 3

Is DOM static?

Answer 3

The DOM is NOT STATIC, It is live and up to date
Modifying the DOM means the web page that is displayed is modified

Question 4

To manipulate an element inside the DOM, you need to…

Answer 4

Select it first.

Question 5

querySelector()

Answer 5

Which returns a reference to the First match. E.G. Let element1 = document.querySelector(“h1”

Question 6

querySelectorAll():

Answer 6

returns a list of all matching element nodes

Question 7

Use CSS selectors

Answer 7

Basic, combinators, and group all works, but you cannot use pseudo classes.

Question 8

Ways to change HTML Elements

Answer 8

Let element = document.querySelector(“.container p”)
element.style.backgroundColor = “yellow”
element.textContent = “I don’t like blind text.”
element.innerHTML = “I don’t like <strong>blind</strong> text.

Question 9

Add CSS Dynamically

Answer 9

element.classList.add(‘classname’)
You can really add any attribute: element.setAttribute(‘id’, ‘id_Name’)

Question 10

Creating an Element

Answer 10

Create a new element: createElement(‘tag_Name’)
Then add it to the DOM by appending to an element: element.appendChild()

Question 11

Remove Element

Answer 11

Call remove, super simple.
element.remove().
Example
Let hello = document.querySelector(“h2”);
hello.remove();

Question 12

Including Javascript

Answer 12

<script src = “../js/script.js”></script>

Question 13

Defer

Answer 13

Defer keyword when your code requires the HTML structure to be loaded.