Document Object Model (DOM)

Question 1

Adding Javascript to…

Answer 1

Websites

Question 2

Adding Inline Javascript (NOT GOOD PRACTICE. DON’T USE INLINE JS)

Answer 2

Inside the , add a onload=” ”

Example

Question 3

Internal Javascript

Answer 3

Include a inside of the html

Question 4

External Javascript

Answer 4

Include a with a src=” ”

The placement of the with the .js link matters!
Include CSS in the beginning, inside the
Include JavaScript at the bottom, just before the closing tag

Question 5

Intro to the Document Object Model

Answer 5

Catalogs a webpage into individual models/objects where we can alter/manipulate its behaviour and style

Question 6

Document is the root of the webpage

Answer 6

document.firstElementChild;

Question 7

HTML Root of web page

Answer 7

document. firstElementChild.firstElementChild;

document. firstElementChild.lastElementChild;

Question 8

Selecting HTML Elements with…

Answer 8

JavaScript

Question 9

GetElementBy

Answer 9

(Broad selector)

Question 10

Get elements by tag name (li, ul, h1, ….)

Answer 10

document.getElementsByTagName(< tag >);

Question 11

Get elements by class name

Answer 11

document.getElementsByClassName(< className >);

Question 12

Get element by id

Answer 12

document.getElementById(< id >);

Question 13

Query Selector

Answer 13

(More complex and precise selector)

Question 14

document.querySelector(< CSS Selector >);

Answer 14

Returns a singular html element

If the query selector obtains multiple elements, the querySelector only returns the first element

Question 15

document.querySelectorAll( < CSS Selector > );

Answer 15

Returns a list of all the html elements that match the CSS Selector

Question 16

Manipulating and Changing Styles of HTML Elements with JavaScript

Answer 16

Properties may, and often are, different than the css property.
To set the value, have to include the property in “ “
Changing style
.style. = “”;
Changing color
.style.color = “< color >”;

Question 17

Separation of Concerns: Structure vs Style vs Behavior

Answer 17

CSS files should only be in charge of styling a webpage.
So we shouldn’t use DOM - Javascript to modify the style of a web page.
What we can do is, include a style modifier in the CSS file, and using DOM we can add a new class property for the .classList to add/modify styling of a html element.
.classList
Returns a list of the classes that are attached to the element
We can then add properties to the list, to further add new properties for a html element
.classList.add();
Add a new CSS style property
.classList.remove();
Remove a CSS style property
.classList.toggle();
Toggle’s a CSS style property on/off.

Question 18

Text Manipulation and the Text Content Property

Answer 18

.textContent
Returns the actual text string value
.innerHTML
Returns the html code
Can also modify the html

Question 19

Manipulating HTML Element Attributes

Answer 19

Attributes consist of things like, class=, href=, src=, …
.attributes
Returns the mapping of all the attributes
.getAttribute(“ < Attribute to get > ”);
.setAttribute(“ < Which attribute to change> ”, “ < Value to change the attribute to > ”);