# DOM While a browser receives an HTML source file, it starts to parse it piece by piece to construct an object representation of the document called the DOM ([Document Object Model](https://www.w3.org/DOM/)) tree. Simultaneously, the DOM is being converted into a _render tree_, which represents what eventually is being painted. The document can start being rendered and paintend in the browser before it is fully loaded. Unless it is blocked by CSS or JavaScript. When the parser comes across CSS code, the rendering process is being blocked until the the CSS is fully parsed. Similar as before, the browser now constructs a CSSOM ([CSS Object Model](https://www.w3.org/TR/cssom-1/)) tree which associates the styles to each node. After parsing the CSS, a combination of the DOM and CSSOM are being used for continue creating the _render tree_. Even though the rendering process can be blocked by CSS, the DOM is still being parsed. Unless it comes across JavaScript. When the parser reaches a ` ``` In order to make sure that the DIV event listeners triggers first, the methods `useCapture`parameter needs to be true. All the event handlers with `useCapture` enabled run first (top down), afterwards the bubbling handlers (bottom up). ```js $div.addEventListener('click', _ => console.log('DIV clicked'), true); ``` To complete stop the propagation, the handler can call the `stopPropagation()` method on the event object. ```js $button.addEventListener('click', event => { console.log('BUTTON clicked'); event.stopPropagation(); }); ``` ### Forms Building forms is a widely used pattern for web applications. In HTML exists a `
` tag, which allows to group interactive controls together for submitting data to a server. When a form is being submitted, an HTTP Request with the specified method is sent to the specified resource. With this traditional approach, the page always will be refreshed and new rendered based on the response. This approach is acceptable if we want to display a completely different view after submitting the form. However, for modern web application it is usually not desirable. Instead, it is better to use an Ajax request in the background without affecting the page and to manipulate the DOM based on the response. Nevertheless, using the `` tag has many advantages and should still be used for grouping interactive controls: - It improves the logical structure of the HTML. - It increases the accessibility for screen readers. - It provides a better user experience on mobile phones. - It has the ability to access its [elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) conveniently. - It has the ability to easily [reset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) its elements. In order to use the `` tag without it being submitted, an event handler has to be registered for the form's submit event. In this handler the method `event.preventDefault()` can be executed to prevent the form from submitting. ```html
``` > A button can have 3 different types: `submit`, `reset` and `button`. > The default type is `submit` which will attempt to submit form data when clicked. > When the intention is to use a button without a default behavior, explicitly specify `type="button"`. > A `
` can also be submitted by pressing _enter_ or via JavaScript. Therefore using a `