🔍

Browser: Document, Events,

Interfaces Article
Status Done

Browser: Document, Events, Interfaces

Contents:

1. Browser: Document, Events, Interfaces

a. Browser environment, specifications

b. DOM (Document Object Model)

c. BOM (Browser Object Model)

2. Browser: forms, controls, Form Properties and Methods

a. Navigation: Forms and Elements

b. Backlink: element.form

c. Form elements

Understanding how the browser works is a fundamental for every web-developer.

Trying to understand the way a web page is manipulated, the browser events logic,
learning the best ways of handling user interface events, etc. may feel an
overwhelming task because of the abundance of information on the topic. Therefore
the goal of this article is to “put the basics on the shelves” and get an overall
understanding of the mechanism.

Browser environment, specifications

JavaScript was originally created for web browsers. But since then, it has evolved
significantly and turned into a cross-platform programming language for solving a
wide range of problems.

Browser: Document, Events, Interfaces Article 1

 Today, JavaScript can be used in a browser, on a web server, or in some other
environment, even in a coffee maker. Each environment provides its own
functionality, which the JavaScript specification calls the environment.

The environment provides its own objects and additional functions, in addition to the
basic language. Browsers, for example, provide tools for managing web pages.
Node.js makes some server-side features available, and so on.
The picture below shows in general terms what is available for JavaScript in the
browser environment:

As we can see, there is a root window object, which acts in 2 roles:

1. First, it is a global object for JavaScript code.

2. Secondly, it also represents a browser window and has methods for managing it.

For example, here we use window as a global object:

function sayHi() {
alert("Hello");
}

// global functions are available as methods of the global object:

window.sayHi();

And here we are using window as the browser window object to get its height:

alert(window.innerHeight); // internal height of the browser window

There are many more properties and methods for managing the browser window.
We will look at them later.

DOM (Document Object Model)

The Document Object Model, DOM for short, is a document object model that
represents all the content on a page as objects that can be modified.

Browser: Document, Events, Interfaces Article 2

 The document object is the main entry point. With it, we can create or change
something on the page.
For example:

// change the background color to red,

document.body.style.background = "red";

// and in a second we will return as it was

setTimeout(() => document.body.style.background = "", 1000);

We used only document.body.style in the example, but in fact, the possibilities for
managing the page are much wider. Various properties and methods are described
in the specification: DOM Living Standard at https://dom.spec.whatwg.org.

DOM is not just for browsers

The DOM specification describes the structure of a document and provides objects
for manipulating the page. There are other non-browser tools that use the DOM.

For example, server-side scripts that load and render HTML pages can also use the
DOM. However, they may not fully support the specification.

CSSOM for styles

CSS style rules are structured differently than HTML. There is a separate CSSOM
specification for them, which explains how styles should be represented as objects,
how to read and write them.
The CSSOM is used in conjunction with the DOM when changing document styles.
In reality, CSSOM is rarely required, usually CSS rules are static. We rarely
add/remove styles from JavaScript, but it's possible.

BOM (Browser Object Model)

The Browser Object Model (BOM) is an additional object provided by the browser
(environment) to work with everything except the document.

For example:

Browser: Document, Events, Interfaces Article 3

 The navigator object gives information about the browser itself and the operating
system. Among its many properties, the most famous are: navigator.userAgent -
information about the current browser, and navigator.platform - information about
the platform (can help in understanding which OS the browser is open on -
Windows / Linux / Mac and so on).

The location object allows you to get the current URL and redirect the browser to
a new address.

Here's how we can use the location object:

alert(location.href); // shows current url

if (confirm("Перейти на Wikipedia?")) {
location.href = "https://wikipedia.org"; // redirects the browser to another URL
}

The alert/confirm/prompt functions are also part of the BOM: they are not directly
related to the page, but are methods of the browser window object to communicate
with the user.

Specifications

The BOM is part of the overall HTML specification.

The HTML specification at https://html.spec.whatwg.org is not only about the "HTML
language" (tags, attributes), it also covers a whole host of objects , methods, and
browser-specific DOM extensions. It's all "HTML in the broadest sense". Some
things have separate specs listed at https://spec.whatwg.org.

To sum up this section:

Speaking of standards, we have:

DOM specification
Describes document structure, content manipulation, and events, see
https://dom.spec.whatwg.org for more details.

CSSOM Specification
Describes style files, rules for writing and manipulating styles, and how it all relates
to the page, see https://www.w3.org/TR/cssom-1/ for more details.

Browser: Document, Events, Interfaces Article 4

 HTML specification
Describes the HTML language (eg tags) and BOM (browser object model) - different
browser functions: setTimeout, alert, location and so on, more details at
https://html.spec.whatwg.org. It takes the DOM specification as a basis and extends
it with additional properties and methods.
In addition, some classes are described separately at https://spec.whatwg.org/.

Browser: forms, controls, Form Properties

and Methods
Forms and controls such as <input> have many special properties and events.

Working with forms is a crucial part of working with browsers.

Navigation: Forms and Elements

Forms in a document are included in the special document.forms collection.
This is a so-called "named" collection: we can use both its name and its serial
number in the document to get the form.

document.forms.my - the form named "my" (name="my")

document.forms[0] - the first form in the document

Once we've got the form, any element is available in the named form.elements
collection.

For instance:

<form name="my">
<input name="one" value="1">
<input name="two" value="2">
</form>

<script>
// getting the form
let form = document.forms.my; // <form name="my"> element

// getting the element

let elem = form.elements.one; // <input name="one"> element

alert(elem.value); // 1
</script>

Browser: Document, Events, Interfaces Article 5

 There can be multiple elements with the same name, this is often the case with radio
buttons.

In this case, form.elements[name] is a collection, like so:

<form>
<input type="radio" name="age" value="10">
<input type="radio" name="age" value="20">
</form>

<script>
let form = document.forms[0];

let ageElems = form.elements.age;

alert(ageElems[0]); // [object HTMLInputElement]

</script>

These navigational properties are independent of the tag structure within the form.
All form controls, no matter how deep they are in the form, are available in the
form.elements collection.

<fieldset> as "subform"
A form can contain one or more <fieldset> elements within itself. They also support
the elements property, which holds the controls within them.

For example:

<body>
<form id="form">
<fieldset name="userFields">
<legend>info</legend>
<input name="login" type="text">
</fieldset>
</form>

<script>
alert(form.elements.login); // <input name="login">

let fieldset = form.elements.userFields;

alert(fieldset); // HTMLFieldSetElement

Browser: Document, Events, Interfaces Article 6

 // we can get the element by name both from the form and from the fieldset with it
alert(fieldset.elements.login == form.elements.login); // true
</script>
</body>

Shorthand notation: form.name

There is a shorter notation: we can access the element via form[index/name].

In other words, instead of form.elements.login we can write form.login.

This also works, but there is a small problem: if we get an element and then change
its name property, it will still be available under the old name (as well as under the
new one).

This is easier to understand with an example:

<form id="form">
<input name="login">
</form>

<script>
alert(form.elements.login == form.login); // true, because they are the same <input>

form.login.name = "username"; //changing the name property of the input element

// form.elements have updated their names:

alert(form.elements.login); // undefined
alert(form.elements.username); // input

// and in form we can use both names: new and old

alert(form.username == form.login); // true
</script>

This is usually not a problem since we rarely change the names of form elements.

Backlink: element.form
For any element, the form is available through element.form. So the form refers to all
the elements, and those elements refer to the form.

For example:

<form id="form">
<input type="text" name="login">

Browser: Document, Events, Interfaces Article 7

 </form>

<script>
// form -> element
let login = form.login;

// element -> form

alert(login.form); // HTMLFormElement
</script>

Form elements
Consider the control elements used in forms.

input и textarea
Their value can be accessed via the input.value (string) or input.checked (boolean)
property for checkboxes.

Like this:

input.value = "New task";

textarea.value = "New text";

input.checked = true; // for checkboxes and switches

Use textarea.value instead of textarea.innerHTML

Note that although the <textarea>...</textarea> element stores its value as nested
HTML, we shouldn't use textarea.innerHTML to access it.

Only the HTML that was originally on the page is stored there, not the current value.

select и option
The <select> element has 3 important properties:

1. select.options is a collection of <option> subelements,

2. select.value - the value of the currently selected <option>,

3. select.selectedIndex is the number of the selected <option>.

They give three different ways to set a value in a <select>:

1. Find the matching <option> element and set option.selected to true.

Browser: Document, Events, Interfaces Article 8

 2. Set select.value to the value of the desired <option>.

3. Set select.selectedIndex to the number of the desired <option>.

The first way is the most understandable, but (2) and (3) are more convenient to use.

Here are examples of these methods:

<select id="select">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="banana">Banana</option>
</select>

<script>
// all three lines do the same thing
select.options[2].selected = true;
select.selectedIndex = 2;
select.value = 'banana';
</script>

Unlike most other controls, <select> allows us to select multiple options at the same
time if it has the multiple attribute. This feature is rarely used, but in this case, to
work with values, you must use the first method, that is, set or remove the selected
property from the <option> subelements.

Their collection can be obtained as select.options, for example:

<select id="select" multiple>

<option value="blues" selected>Blues</option>
<option value="rock" selected>Rock</option>
<option value="classic">Classical</option>
</select>

<script>
// we get all selected values from select with multiple
let selected = Array.from(select.options)
.filter(option => option.selected)
.map(option => option.value);

alert(selected); // blues,rock
</script>

A full description of the <select> element is available in the specification

https://html.spec.whatwg.org/multipage/forms.html#the-select-element.

new Option

Browser: Document, Events, Interfaces Article 9

 The <option> element is rarely used on its own, but there is something interesting
here as well.

The spec has a nice short syntax for creating an <option> element:

option = new Option(text, value, defaultSelected, selected);

There may be a little confusion with defaultSelected and selected. It's simple:
defaultSelected sets an HTML attribute, it can be obtained as
option.getAttribute('selected'), and selected - whether a value is selected or not, it is
important to set it correctly. However, usually both of these values are set to true or
not set at all (i.e. false).
Example:

let option = new Option("Текст", "value");

//will create <option value="value">Text</option>

To sum up
Properties for form navigation:

document.forms

The form is available via document.forms[name/index].

form.elements

Form elements are accessible via form.elements[name/index], or you can just use
form[name/index]. The elements property also works for <fieldset>.
element.form

Elements store a reference to their form in the form property.

Form element values are available through input.value, textarea.value, select.value,
and so on. or input.checked for checkboxes and radio buttons.

Browser: Document, Events, Interfaces Article 10

 For the <select> element, we can also get the index of the selected item through
select.selectedIndex, or by using the select.options item collection.
These were the basics for getting started with forms.

Browser: Document, Events, Interfaces Article 11