DOM

Question 1

only use?

Answer 1

querySelector(‘xxx’)
querySelectorAll(‘xxx’)

Question 2

callback

Answer 2

share the value of one function with another

Question 3

event handler

Answer 3

the function write for event (no return in here because only event will get the value, you will never call it by yourself)

Question 4

What is a DOM Tree?

Question 5

Which “document” is being referred to in the phrase Document Object Model?

Answer 5

html document

Question 6

Give two examples of document methods that retrieve a single element from the DOM.

Answer 6

querySelector
querySelectorAll

Question 7

Give one example of a document method that retrieves multiple elements from the DOM at once.

Answer 7

querySelectorAll

Question 8

Why might you want to assign the return value of a DOM query to a variable?

Answer 8

easy to reuse

Question 9

What console method allows you to inspect the properties of a DOM element object?

Answer 9

console.log
console.dir

Question 10

Why would a

 tag need to be placed at the bottom of the HTML content instead of at the top?

Question 11

What does document.querySelector() take as its argument and what does it return?

Answer 11

element in dom

Question 12

What does document.querySelectorAll() take as its argument and what does it return?

Answer 12

all () element in dom

Question 13

What is the purpose of events and event handling?

Answer 13

for moniter user interaction, when fired, run function

Question 14

Are all possible parameters required to use a JavaScript method or function?

Answer 14

no

Question 15

What method of element objects lets you set up a function to be called when a specific type of event occurs?

Answer 15

addEventListener()

Question 16

What is a callback function?

Answer 16

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Question 17

What object is passed into an event listener callback when the event fires?

Question 18

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

Answer 18

The target event property returns the element that triggered the event. The target property gets the element on which the event originally occurred, opposed to the currentTarget property, which always refers to the element whose event listener triggered the event.

Question 19

What is the className property of element objects?

Answer 19

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

Question 20

How do you update the CSS class attribute of an element using JavaScript?

Answer 20

$xxx
$xxx.className = ppp

Question 21

What is the textContent property of element objects?

Answer 21

The textContent property sets or returns the text content of the specified node, and all its descendants.

Question 22

How do you update the text within an element using JavaScript?

Answer 22

Use the textContent property to change the text of a div element, e.g. div. textContent = ‘Replacement text’ . The textContent property will set the text of the div to the provided string, replacing any of the existing content.

Question 23

Is the event parameter of an event listener callback always useful?

Answer 23

Defining the event as a parameter of your handler function is optional but, sometimes (most times), it is useful for the handler function to know about the event that happened.

Question 24

Does the document.createElement() method insert a new element into the page?

Answer 24

no. it only creat

Question 25

How do you add an element as a child to another element?

Answer 25

ae.appendChild(xxx)

Question 26

What do you pass as the arguments to the element.setAttribute() method?

Answer 26

ement.setAttribute(‘attribute type’, ‘attribute value’)

Question 27

What steps do you need to take in order to insert a new element into the page?

Answer 27

creat node element
grab the parent element with querySelector
append node to parent

Question 28

What is the textContent property of an element object for?

Answer 28

set the text value for its parent node

Question 29

Name two ways to set the class attribute of a DOM element.

Answer 29

setAttribute
className

Question 30

What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?

Answer 30

avoid repeat code

Question 31

What is the event.target?

Answer 31

where the event started

Question 32

Why is it possible to listen for events on one element that actually happen its descendent elements?

Answer 32

event buble

Question 33

What DOM element property tells you what type of element it is?

Answer 33

event.target.tagName

Question 34

What does the element.closest() method take as its argument and what does it return?

Answer 34

parent

Question 35

How can you remove an element from the DOM?

Answer 35

delete

Question 36

What is the event.target?

Answer 36

the origin source where event occur

Question 37

What is the affect of setting an element to display: none?

Answer 37

disappear

Question 38

What does the element.matches() method take as an argument and what does it return?

Answer 38

css selector as string value, return boolean. true means match , false means not match

Question 39

How can you retrieve the value of an element’s attribute?

Answer 39

getAttribute

Question 40

At what steps of the solution would it be helpful to log things to the console?

Answer 40

everytime

Question 41

If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?

Answer 41

creat individual eventlisener for each part

Question 42

If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

Question 43

data-xxx attribute

Answer 43

store a meaningful name for connect dom and js

Question 44

dataset.xxx

Answer 44

shorthand of getAttribute for data- attribute