Javascript DOM, Bom, Events

Document Object Model

With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page

DOM Programming Interface

The HTML DOM can be accessed with JavaScript (and with other programming languages).
In the DOM, all HTML elements are defined as objects.
The programming interface is the properties and methods of each object.
A property is a value that you can get or set (like changing the content of an HTML element).
A method is an action you can do (like add or deleting an HTML element).

HTML DOM Document Object

The HTML DOM document object is the owner of all other objects in your web page.

The document object represents your web page.

If you want to access any element in an HTML page, you always start with accessing the document object.

Finding Elements

Method	Description
document.getElementById( id)	Find an element by element id
document.getElementsByTagName( name)	Find elements by tag name
document.getElementsByClassName( name)	Find elements by class name
document.querySelector(selectors);	Returns the first element within the document using CSS like selector
document.querySelectorAll(selectors);	Returns a list of the elements within the document using CSS like selector

Changing HTML Elements

Method	Description
element.innerHTML = new html content	Change the inner HTML of an element
element.setAttribute (attribute, value)	Change the attribute value of an HTML element
element.style. property = new style	Change the style of an HTML element

Adding and Deleting Elements

Method	Description
document.createElement( element)	Create an HTML element
document.removeChild( element)	Remove an HTML element
document.appendChild( element)	Add an HTML element
document.replaceChild( newChild, oldChild)	Replace an HTML element
document.write( text)	Write into the HTML output stream

Adding Events Handlers

Method	Description
document.getElementById( id).onclick = function(){ code}	Adding event handler code to an onclick event
document.getElementById( id).addEventListener('click', handler)	Adding event listener
document.getElementById( id).removeEventListener('click', handler)	Removing event listener by the reference

JavaScript Window

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.

The window object is supported by all browsers. It represents the browser's window.
All global JavaScript objects, functions, and variables automatically become members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.
Even the document object (of the HTML DOM) is a property of the window object:

HTML Events

An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

An HTML web page has finished loading
An HTML input field was changed
An HTML button was clicked

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

Common HTML Events

Event	Description
onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onload	The browser has finished loading the page

What can JavaScript Do?

Event handlers can be used to handle, and verify, user input, user actions, and browser actions:

Things that should be done every time a page loads
Things that should be done when the page is closed
Action that should be performed when a user clicks a button
Content that should be verified when a user inputs data
And more ...

What can JavaScript Do?

Many different methods can be used to let JavaScript work with events:

HTML event attributes can execute JavaScript code directly
HTML event attributes can call JavaScript functions
You can assign your own event handler functions to HTML elements
You can prevent events from being sent or being handled
And more ...

Reacting to Events

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

Examples of HTML events:

When a user clicks the mouse
When a web page has loaded
When an image has been loaded
When the mouse moves over an element
When an input field is changed
When an HTML form is submitted
When a user strokes a key

Event Listener

The addEventListener() method attaches an event handler to the specified element.
It attaches an event handler to an element without overwriting existing event handlers.
You can add many event handlers to one element and of the same type to one element, i.e two "click" events.
The addEventListener() method makes it easier to control how the event reacts to bubbling.
When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup.
You can easily remove an event listener by using the removeEventListener() method.

Syntax

element.addEventListener(event, function, useCapture);

The first parameter is the type of the event (like "click" or "mousedown").
The second parameter is the function we want to call when the event occurs.
The third parameter is a boolean value specifying whether to use event bubbling or event capturing. This parameter is optional.

Note that you don't use the "on" prefix for the event; use "click" instead of "onclick"

Bubbling/Capturing

In bubbling the inner most element's event is handled first and then the outer: the <p> element's click event is handled first, then the <div> element's click event.
In capturing the outer most element's event is handled first and then the inner: the <div> element's click event will be handled first, then the <p> element's click event.
With the addEventListener() method you can specify the propagation type by using the "useCapture" parameter
The default value is false, which will use the bubbling propagation, when the value is set to true, the event uses the capturing propagation.

Event propagation is a way of defining the element order when an event occurs. If you have a <p> element inside a <div> element, and the user clicks on the <p> element, which element's "click" event should be handled first?

remove Event Listener

The removeEventListener() method removes event handlers that have been attached with the addEventListener() method:

element.removeEventListener("mousemove", myFunction);

Sandbox

Forms

Home work

https://learn.javascript.ru/event-details События в деталях

https://learn.javascript.ru/forms-controls Формы, элементы управления

https://learn.javascript.ru/document Документ и объекты страницы

THANKS FOR YOUR ATTENTION

Javascript DOM, BOM events