JS Course 1: DOM Manipulation and Events Flashcards
What is the DOM?
DOM stands for Document Object Model and is a tree like representation of the contents of a web page. There are “nodes” in the tree with different relationships depending on how they’re arranged in the document.
What are nodes?
A node is a single point in the node tree. It can have a parent and/or child. When working with the DOM, you can use selectors to select the nodes!
What are query selectors?
Query selectors are a reference to a part of the DOM based off a selector like a CSS selector name, id selector, a relationship to an element based off nesting, parenting, etc., based off what type of element it is. etc.
This does not create an element, but refers to an element that already exists in the HTML document.
What are DOM Methods?
DOM methods are methods that change or alter the DOM. These methods don’t actually change the HTML, but only change how the HTML is interacted with and changes based off certain situations.
What is the keyword “defer”? What does it do?
This keyword is used in the
tag when put in the head of the HTML document to instruct the browser to run scripts AFTER the HTML document is processed. This prevents confusion and unexpected results when scripts are ran before the document is processed.
What is an event?
An event (in this context) refers to the ways a user can interact with a page and what a page does based off the event. Event’s can be a click. double click, hover, a certain key pressed down, etc.
When used in functions concerning events, e is the object used to access the event itself! This can be used in many different, useful ways.
What is the “keyCode” property? What does it do?
This property is based off a data-key (a number that is assigned to a keyboard input to determine what keyboard event/key is pressed.)
Don’t use this! Instead use the KeyboardEvent: code property
What is the KeyboardEvent: code property?
The KeyboardEvent: code property is used more modernly instead of keyCode. Use this! Not keyCode!
What is the “this” keyword?
This keyword refers to an object. This keyword can be used in many different ways and what it returns depends entirely on the situation and object it refers to.
What is the “once” option?
This option when set true listens for a click and then unbinds itself. Basically, the item cannot be activated again after an event when clicked once (until you refresh the page)
How do you target the nodes you want to work with?
Node selectors like id’s, classes, etc. Style selectors plus style selectors that can show the relationship between elements.
How do you create an element in the DOM?
Using the syntax…
const variable = document.createElement(tagName)
where the tagName is the type of element you want to create like an h1, p, div, etc.
How do you add an element to the DOM?
You append it using the syntax parentNode.child
How do you remove an element from the DOM?
Same syntax as adding an element to the DOM, but with removeChild:
parentNode.removeChild(child)
How can you alter an element in the DOM?
You can add styles to an element in the DOM through inline or class styles. You can also add text with
createdNode.textContent = “text”
