Manipulating the DOM Flashcards
What is the process to add an element as a child of another on a webpage using js?
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);
<body>
<h1>
THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container">
<div class="content">
This is the glorious text-content!
</div>
</div>
</body>
How do you create a div in memory?
const div = document.createElement(‘div’);
How do you add a child node to a parent:
- at the end?
- before a specific node?
- after a specific node?
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);
How do you remove a child node from a given parent?
parentNode.removeChild(child) removes child from parentNode on the DOM
returns a reference to child
What does parentNode.appendChild(childNode) do and/or return
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.
What does parentNode.insertBefore(newNode, referenceNode) do and/or return?
Inserts newNode into parentNode before referenceNode
Returns Returns the added child (unless newNode is a DocumentFragment, in which case the empty DocumentFragment is returned).
What does parentNode.removeChild(child) do and/or return
parentNode.removeChild(child) removes child from parentNode on the DOM a
returns a reference to child
Add an inline style using js
- 1 style
- multiple styles
- by setting an attribute
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
What does
div.style.background-color
do or return
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']
How do you refer to a css rule that uses a -
like background-color? (can use dashes in js)
It's automatically converted to camel case: backgroundColor or you can use bracket notation: ['background-color']
Change an id name (or change any attribute) (2 ways)
div.setAttribute('id', 'theDiv');
// if id exists, update it to 'theDiv', else create an id
// with value "theDiv"
or
div.id = “theDiv”
What does div.setAttribute(‘id’, ‘theDiv’); do and/or return
// if id exists, update it to 'theDiv', else create an id // with value "theDiv"
returns undefined
add,
remove,
and toggle
a css class
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
What do these do and/or return
div. classList.add();
div. classList.remove();
div. classList.toggle();
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.
Should you remove a class list or toggle it?
Toggle it
It has more functionality?
Add text to dom using js
div.textContent = 'Hello World!' // creates a text node containing "Hello World!" and // inserts it in div
What does
div.textContent = ‘Hello World!’
do and/or return
// creates a text node containing "Hello World!" and // inserts it in div
What does
div.innerHTML
do?
Why should you not use it?
div.innerHTML = '<span>Hello World!</span>'; // renders the HTML inside div
Easier to hack for some reason.
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);
<body>
<h1>
THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container">
<div class="content">
This is the glorious text-content!
</div>
</div>
</body>When the dom is manipulated, it does not change the HTML
t or f
t
How can you make sure your JS file is read after the HTML is run (so the DOM items actually exist)
(2 ways)
Put the script link at the end Or Put it in the head with the defer tag <head> <script src="js-file.js" defer></script> </head>
what is e in:
btn.addEventListener('click', function (e) {
console.log(e);
});
?The e in that function is an object that references the event itself.
Has a bunch of properties.
what is e.target in:
btn.addEventListener(‘click’, function (e) {
console.log(e.target);
});
It’s the target of the event. In this case btn. It will log the element and all it’s contents
What does:
btn.addEventListener('click', function (e) {
e.target.style.background = 'blue';
});
do?turns the button background blue
add an event
target.addEventListener(‘event id’, callback function);
make something happen on click (without addEventListener)
2 ways
Or onclick inline or in js
// the JavaScript file
const btn = document.querySelector('#btn');
btn.onclick = () => alert("Hello World");
Attach event listeners to a group of nodes
<div id="container">
<button id="1">Click Me</button>
<button id="2">Click Me</button>
<button id="3">Click Me</button>
</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);
});
});
list some event listeners (4) (there are hundreds)
click
dblclick
keydown
keyup
What is code-key
a number representing a specific key
