Manipulating the DOM

Question 1

What is the process to add an element as a child of another on a webpage using js?

Answer 1

1 Assign an element to a variable
2 Create a new element in memory
3 Add attributes and styles to it
4 Insert it into the DOM. Append it to the parent

1
const container = document.querySelector('#container');

2
const content = document.createElement('div');

3

content. classList.add(‘content’);
content. textContent = ‘This is the glorious text-content!’;

4
container.appendChild(content);

&ltbody>
  &lth1>
    THE TITLE OF YOUR WEBPAGE
  &lt/h1>
  &ltdiv id="container">
  	&ltdiv class="content">
      This is the glorious text-content!
    &lt/div>
  &lt/div>
&lt/body>

Question 2

How do you create a div in memory?

Answer 2

const div = document.createElement(‘div’);

Question 3

How do you add a child node to a parent:

• at the end?
• before a specific node?
• after a specific node?

Answer 3

parentNode.appendChild(childNode) appends childNode as the last child of parentNode

parentNode.insertBefore(newNode, referenceNode) inserts newNode into parentNode before referenceNode

parentNode.insertBefore(newNode, referenceNode.nextSibling);

Question 4

How do you remove a child node from a given parent?

Answer 4

parentNode.removeChild(child) removes child from parentNode on the DOM
returns a reference to child

Question 5

What does parentNode.appendChild(childNode) do and/or return

Answer 5

Appends childNode as the last child of parentNode

Returns A Node that is the appended child (aChild), except when aChild is a DocumentFragment, in which case the empty DocumentFragment is returned.

Question 6

What does parentNode.insertBefore(newNode, referenceNode) do and/or return?

Answer 6

Inserts newNode into parentNode before referenceNode

Returns Returns the added child (unless newNode is a DocumentFragment, in which case the empty DocumentFragment is returned).

Question 7

What does parentNode.removeChild(child) do and/or return

Answer 7

parentNode.removeChild(child) removes child from parentNode on the DOM a
returns a reference to child

Question 8

Add an inline style using js

• 1 style
• multiple styles
• by setting an attribute

Answer 8

const div = document.createElement(‘div’);

div.style.color = 'blue';                                      
// adds the indicated style rule
ADDS and OVERWRITES

div.style.cssText = ‘color: blue; background: white;’;
// adds several style rules
div.style works too
This also SETS the attribute to this value. It DOES NOT ADD. It REPLACES

div.setAttribute(‘style’, ‘color: blue; background: white;’);
// adds several style rules
This also SETS the attribute to this value. It DOES NOT ADD. It REPLACES

Question 9

What does
div.style.background-color
do or return

Answer 9

an error

the - attempts to subtract the two values

if the css rule as a -, then you have to use 
camel case: 
backgroundColor 
or
bracket notation:
['background-color']

Question 10

How do you refer to a css rule that uses a -

like background-color? (can use dashes in js)

Answer 10

It's automatically converted to camel case: 
backgroundColor 
or you can use
bracket notation:
['background-color']

Question 11

Change an id name (or change any attribute) (2 ways)

Answer 11

div.setAttribute('id', 'theDiv');                              
// if id exists, update it to 'theDiv', else create an id
// with value "theDiv"

or

div.id = “theDiv”

Question 12

What does div.setAttribute(‘id’, ‘theDiv’); do and/or return

Answer 12

// if id exists, update it to 'theDiv', else create an id
// with value "theDiv"

returns undefined

Question 13

add,
remove,
and toggle
a css class

Answer 13

div.classList.add('classname');                                      
// adds class "new" to your new div

div.classList.remove('classname');                                   
// removes "new" class from div

div.classList.toggle('classname');                                
// if div doesn't have class "active" then add it, or if
// it does, then remove it

Question 14

What do these do and/or return

div. classList.add();
div. classList.remove();
div. classList.toggle();

Answer 14

div.classList.add('classname');                                      
// adds class "classname" to your new div
no return value

div.classList.remove('classname');                                   
// removes "classname" class from div
// no return value

div.classList.toggle('classname', boolean);                                
// if div doesn't have class "classname" then add it, or if
// it does, then remove it
Returns A boolean value, true or false, indicating whether token is in the list after the call or not.
Can do it based on any Boolean return.

Question 15

Should you remove a class list or toggle it?

Answer 15

Toggle it

It has more functionality?

Question 16

Add text to dom using js

Answer 16

div.textContent = 'Hello World!'                               
// creates a text node containing "Hello World!" and
// inserts it in div

Question 17

What does
div.textContent = ‘Hello World!’
do and/or return

Answer 17

// creates a text node containing "Hello World!" and
// inserts it in div

Question 18

What does
div.innerHTML
do?
Why should you not use it?

Answer 18

div.innerHTML = '<span>Hello World!</span>';                   
// renders the HTML inside div

Easier to hack for some reason.

Question 19

What will the dom look like after this code:

const container = document.querySelector(‘#container’);

const content = document.createElement(‘div’);

content. classList.add(‘content’);
content. textContent = ‘This is the glorious text-content!’;

container.appendChild(content);

Answer 19

&ltbody>
  &lth1>
    THE TITLE OF YOUR WEBPAGE
  &lt/h1>
  &ltdiv id="container">
  	&ltdiv class="content">
      This is the glorious text-content!
    &lt/div>
  &lt/div>
&lt/body>

Question 20

When the dom is manipulated, it does not change the HTML

t or f

Answer 20

t

Question 21

How can you make sure your JS file is read after the HTML is run (so the DOM items actually exist)
(2 ways)

Answer 21

Put the script link at the end
Or
Put it in the head with the defer tag
&lthead>
 &ltscript src="js-file.js" defer>&lt/script>
&lt/head>

Question 22

what is e in:
btn.addEventListener('click', function (e) {
  console.log(e);
});
?

Answer 22

The e in that function is an object that references the event itself.
Has a bunch of properties.

Question 23

what is e.target in:
btn.addEventListener(‘click’, function (e) {
console.log(e.target);
});

Answer 23

It’s the target of the event. In this case btn. It will log the element and all it’s contents

Question 24

What does:
btn.addEventListener('click', function (e) {
  e.target.style.background = 'blue';
});
do?

Answer 24

turns the button background blue

Question 25

add an event

Answer 25

target.addEventListener(‘event id’, callback function);

Question 26

make something happen on click (without addEventListener)

2 ways

Answer 26

Or onclick inline or in js

// the JavaScript file
const btn = document.querySelector('#btn');
btn.onclick = () => alert("Hello World");

Question 27

Attach event listeners to a group of nodes

Answer 27

&ltdiv id="container">
    &ltbutton id="1">Click Me&lt/button>
    &ltbutton id="2">Click Me&lt/button>
    &ltbutton id="3">Click Me&lt/button>
&lt/div>

// buttons is a node list. It looks and acts much like an array.
const buttons = document.querySelectorAll('button');

// we use the .forEach method to iterate through each button
buttons.forEach((button) => {

  // and for each one we add a 'click' listener
  button.addEventListener('click', () => {
    alert(button.id);
  });
});

Question 28

list some event listeners (4) (there are hundreds)

Answer 28

click
dblclick
keydown
keyup

Question 29

What is code-key

Answer 29

a number representing a specific key