Events and DOM

Question 1

What is the DOM? How is it represented as a data structure?

Answer 1

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

Question 2

What object in a browser environment allows us to interact with the DOM?

Answer 2

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases.

Question 3

List some ways of querying the DOM for elements

Answer 3

.getElementById()

.getElementsByClassName()

.getElementsByTagName()

.querySelector()

.querySelectorAll()

Question 4

How would you insert a new element into the DOM?

Answer 4

First: document.createElement(“p”).

Second: document.createTextNode()

Third: .appendChild()

Question 5

What are event listeners? What are some different ways of setting event listeners?

Answer 5

Event listeners are among the most frequently used JavaScript structures in web design. They allow us to add interactive functionality to HTML elements by “listening” to different events that take place on the page, such as when the user clicks a button, presses a key, or when an element loads.

The most common events you might “listen out for” are load, click, touchstart, mouseover, keydown.

We can create an event listener in JavaScript using the addEventListener() method that’s built into every modern browser.

Question 6

What is bubbling and capturing and what is the difference?

Answer 6

Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event.

With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.

With capturing, the event is first captured by the outermost element and propagated to the inner elements.

Question 7

What are some methods on the event object and what do they do?

Answer 7

All event objects in the DOM are based on the Event Object. Therefore, all other event objects (like MouseEvent and KeyboardEvent) have access to the Event Object’s properties and methods.

createEvent() Creates a new event

Question 8

How would you submit a form using JS?

Answer 8

Using the submit methoddocument.getElementById(“myForm”).submit();