In this tutorial, we'll cover the basics of working with events, attributes, and getElementById in JavaScript.

In the previous lessons, we studied the basic features of the JavaScript language. Starting with this lesson, we will deal with what JavaScript itself is intended for - we will change the elements Html pages and respond to user actions. Our scripts will become more entertaining and useful.

We will start by teaching our code to react on user actions site. For example, the user clicks somewhere with the mouse, and our code in response will have to process this click and display some information on the screen.

User actions that we can track through JavaScript are called events... Events can be as follows: cry with the mouse on the page element, guidance with the mouse on the page element or vice versa - care mouse cursor off the item and so on. In addition, there are events that do not depend on user actions, for example, the event that an HTML page is loaded into the browser.

In JavaScript there is several ways work with events. We'll start with the simplest one.

Basics of working with events

The easiest way to set the reaction of an element to a specific event is to specify it using an attribute for a specific tag. For example, an event mouse click matches attribute onclick, event mouse hover - attribute onmouseoverand the event "cursor leaving element" - attribute onmouseout.

The value of the attribute with the event is JavaScript code... In the following example by clicking on the button the function will be executed alert:

And now on click the function will be executed on the element func:

function func () (alert ("!");)

Can be done not one function, and a few:

function func1 () (alert ("1");) function func2 () (alert ("2");)

Please note that if inside an attribute you need double quotes (for example for a string) and the outer quotes of the attribute are also double - onclick \u003d "alert ("! ")" - such a code will not work.

There are several ways to deal with this: you can change the outer quotes to single quotes onclick \u003d "alert ("! ")", you can also escape inner quotes with a backslash onclick \u003d "alert (\\"! \\ ")" or simply transfer JavaScript code from an attribute to a function, and leave only the function name in the attribute onclick \u003d "func ()".

The same will happen if you external use single quotes for the attribute and use single quotes for the string: onclick \u003d "alert ("! ")" - here everything is also solved in similar ways.

Attribute table for events

Working with getElementById

Now we will learn how to receive elements Html pages and carry out various manipulation (we can change, for example, their text and color and many other useful things).

Suppose we have a tag on the page with the attribute id in meaning test... Let's write a link to this tag into a variable elem... To do this, we must use the method getElementByIdthat gets the element by its id.

This recording will happen on click to the button we set the attribute to onclick... By clicking on this button, the function will be triggered funcwhich will find on Html page element with id equal test and will write link to it into a variable elem:

Now in the variable elem we have a link to an element with an attribute id in meaning test... The variable itself elem is an object.

This object and the HTML tag of the page are related to each other - we can change any properties of the object elem and at the same time we will see the changes on the HTML page that will occur with the element we received.

Let's see how this happens in practice.

The basics of working with HTML attributes via JavaScript

We will now read and modify the attributes of the tags. Let us be given again input with id equal to test and button, by clicking on which the function will be launched func:

Inside the function func we will get our input by his id and write a link to it in a variable elem:

function func () (var elem \u003d document.getElementById ("test");)

Let's now display the contents of our input's attributes. To access, for example, the value attribute, write the following: elem.value, where elem is the variable into which we wrote a link to our element using getElementById, and value is the attribute of the tag we are interested in.

We can output the content of the attribute via alert in this way - alert (elem.value) - or write it to some variable. Let's do this:

function func () (var elem \u003d document.getElementById ("test"); alert (elem.value); // prints "!")

We can read the values \u200b\u200bof other attributes in the same way, for example, like this - elem.id - we calculate the value of the id attribute, and so - elem.type - the value of the type attribute. See example:

function func () (var elem \u003d document.getElementById ("test"); alert (elem.value); // prints "!" alert (elem.id); // prints "test" alert (elem.type); // prints "text")

You can not only read attribute values, but also change them. To, for example, change the value of an attribute value, you just need to assign it to the construction elem.value:

function func () (var elem \u003d document.getElementById ("test"); elem.value \u003d "(! LANG: www"; //присвоим новое значение атрибуту value } !}

The HTML code will look like this (the value of the value attribute will become www):

Well, now the hardest part - you can do not enter variable elemand build chain from points like this:

function func () (alert (document.getElementById ("test"). value); // displays "!")

In the same way (in a chain) it is possible to produce and attribute rewriting:

function func () (document.getElementById ("test"). value \u003d "(! LANG: www"; }!}

However, in most cases, introducing a variable convenient... Compare two examples - now I have introduced a variable elem and I can read any number of attributes, while getElementById called just one time:

function func () (var elem \u003d document.getElementById ("test"); elem.value \u003d "(! LANG: www"; elem.type = "submit"; }!}

Now I am not introducing a new variable and therefore I have to call getElementById twice:

function func () (document.getElementById ("test"). value \u003d "(! LANG: www"; document.getElementById("test").type = "submit"; }!}

In my opinion, this code became more difficult, although it takes one line less. Also, if I want to change the value id from test to www, for example, I have to do it in many places, which is not very convenient.

to the browser. Finding elements on the page that the method does getElementByIdis pretty slow operation ( and in general, any work with page elements is a slow operation - remember this).

In our case, if we use each time getElementById, then the browser will process the HTML page each time and look for an element with the given id several times (it doesn't matter that the id are the same - the browser will do all the actions several times), performing useless operations that can slow down the browser.

If we use the variable elem - no search occurs on the page (the element has already been found and the link to it lies in the variable elem).

Exceptions: class and for attributes

You have already learned how to work with attributes through JavaScript and now it's time to tell you that not so simple - there is an exception when working with attributes - this is an attribute class.

This word is special in JavaScript and therefore we cannot just write elem.classto read the attribute value class... Instead, you should write elem.className.

The following example displays the value of an attribute class:

function func () (var elem \u003d document.getElementById ("test"); alert (elem.className);)

By the way, there are other attributes that are named differently from the property. For example, the attribute for () matches the property with the name htmlFor.

Working with this

Now we will work with you with a special object this, which points to the current element (the element in which the event occurred). Moreover, it indicates as if this element has already been received by the method getElementById.

Let's see how to work with this and what is the convenience of this approach.

Suppose we have a task to display the contents of its value by clicking on an input.

So far, you can only make such a decision:

function func () (var elem \u003d document.getElementById ("test"); alert (elem.value);)

In principle, this solution is good, but let's imagine now that we have many inputs and by clicking on each we need to display its value.

In this case, we will get something like this:

function func1 () (var elem \u003d document.getElementById ("test1"); alert (elem.value);) function func2 () (var elem \u003d document.getElementById ("test2"); alert (elem.value);) function func3 () (var elem \u003d document.getElementById ("test3"); alert (elem.value);)

Now the drawback of our approach is clearly visible - for each input we have to create our own click handling function, and these functions do almost the same thing.

If we have 10 inputs, then we have to make 10 functions, it's not convenient.

Let's simplify our task: we will pass the id of the current element as a parameter to the function. And instead of a large number of functions, everything will be reduced to one function:

function func (id) (var elem \u003d document.getElementById (id); alert (elem.value);)

However, this solution still has a drawback - each element will have to enter different id, which is also somewhat inconvenient.

So, let's finally look at the option of solving the problem through this.

Let's make it so that each input will display its content on click. To do this, pass the object as a parameter of the function this, like this: func (this).

Our this is passed as a parameter to the function and gets into a variable elem... This elem behaves as if received this way: var elem \u003d document.getElementById (...), but you do not need to receive it in this way, everything is already ready and you can use it. For instance, elem.value indicates the value of our input, and so on.

So, here is the simplest solution to our problem:

function func (elem) (alert (elem.value);)

CSS basics

IN JavaScript work with the CSS properties happens by changing the value of the style attribute for the element. For example, to change colour you need to build the following chain - elem.style.color - and assign it the desired color value:

function func () (var elem \u003d document.getElementById ("test"); elem.style.color \u003d "red";)

You can also omit the variable elemand build very long chain.

innerHTML
var text \u003d element.innerHTML;
element.innerHTML \u003d "";
Assigning a new innerHTML will overwrite the code even if the new value is appended to the current one (+ \u003d). Scripts added this way are not executed.

outerHTML
Contains the entire element, it cannot be changed. Technically, writing to this property creates a new element that replaces the old one. References to the old element in variables are not changed.

data
textNode.data - content of text nodes and comments

textContent
element.textContent - the text inside the element without tags.
There is also a custom innerText property that has a lot in common with textContent.

Element visibility

hidden
element.hidden \u003d true
The hidden attribute is not supported in IE11.

Attributes

Most of the standard attributes in the DOM become properties of the object:
element.id \u003d "id"
No property is created for non-standard attributes (undefined)

You can create your own DOM properties:
element.myData \u003d (name: "John", lastName: "Smith");
and methods:
element.myFunc \u003d function () (alert this.nodeName);
This works because DOM nodes are regular JavaScript objects. Such non-standard properties and methods do not affect the display of the tag and are visible only in JavaScript.

Accessing tag attributes:
element.hasAttribute (name)
element.getAttribute (name)
element.setAttribute (name, value)
element.removeAttribute (name)
element.attributes is a pseudo-array of attributes.

Attributes are case insensitive (html) and properties are sensitive (javaScript).
The attribute value is always a string.

Attribute: a.getAttribute ("href") - displays exactly what is in HTML
Property: a.href - may differ from attribute value
Most often, a property depends on an attribute, but not vice versa. Changing the property does not affect the attribute.

Working with classes

The class attribute has two properties:
className - string
classList - object

methods of the classList object:
element.classList.contains ("class") - check if the object contains the given class
element.classList.add ("class")
element.classList.remove ("class")
element.classList.toggle ("class")

classList is a pseudo-array and can be iterated over through a for loop.

data-attributes

Custom data attributes are available not only as attributes, but also through the dataset property
data-about \u003d "some value"
element.dataset.about

Order of nodes

parent.contains (child) - true or false
checks if the child node is nested in parent

nodeA.compareDocumentPosition (nodeB) - Provides information about the content and relative order of elements. The return value is a bitwise mask:

Adding and removing nodes

var div \u003d document.createElement ("div")
document.createTextNode ("text")

parent.appendChild (element) - the element is added to the end of the parent
parent.insertBefore (element, nextSibling) - the element is added before nextSibling
parent.insertBefore (element, parent.firstChild) - added to the beginning
parent.insertBefore (element, null) - works like appendChild
All insert methods return the inserted node.
When you move an element, you do not need to remove it from the old place first, the insertion methods do this automatically.

element.insertAdjacentHTML (where, html) - inserts arbitrary HTML code anywhere in the document. Where specifies where to insert html in relation to element - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement (where, newElement)
element.insertAdjacentText (where, text)
the last two methods are not supported in Firefox

node.append (... nodes) - inserts nodes at the end of a node,
node.prepend (... nodes) - inserts nodes at the beginning of a node,
node.after (... nodes) - inserts nodes after node,
node.before (... nodes) - inserts nodes before the node,
node.replaceWith (... nodes) - inserts nodes instead of node.
here nodes are nodes or strings, in any quantity and combination, separated by commas.

var fragment \u003d document.createDocumentFragment () is an imitation of a DOM node that disappears when inserted into a document, leaving only its children. Not recommended in modern browsers.

element.cloneNode (true) - deep copy of the element
element.cloneNode (false) - copy without children

parent.removeChild (element)
parent.replaceChild (newElement, element)
element.remove () - removes the element directly, without referencing the parent.
Methods return remote node

Working with the DOM

Each Window object has a property documentthat refers to the Document object. This Document object is not a stand-alone object. It is the centerpiece of an extensive API known as the Document Object Model (DOM), which determines how to access document content.

DOM model overview

Document Object Model (DOM) is a fundamental API that enables you to work with HTML and XML content. The DOM application programming interface (API) is not particularly complex, but there are many architectural features that you should be aware of.

First of all, you should understand that nested elements of HTML or XML documents are represented as a tree of DOM objects. The tree view of an HTML document contains nodes that represent elements or tags such as and

And nodes representing lines of text. An HTML document can also contain nodes that represent HTML comments. Consider the following simple HTML document:

This is an HTML document

Example simple text.

The DOM representation of this document is shown in the following diagram:

For those who are not yet familiar with tree structures in computer programming, it is useful to know that the terminology for their description has been borrowed from family trees. The node located directly above this node is called parent in relation to this node. Nodes located one level below another node are subsidiary in relation to this node. Nodes that are at the same level and have the same parent are called nursing... Nodes that are any number of levels below another node are its descendants. Parents, grandparents, and any other nodes above this node are its ancestors.

Each rectangle in this diagram is a document node that is represented by an object Node... Note that the figure shows three different types of knots. The root of the tree is the Document node, which represents the entire document. Nodes that represent HTML elements are Element nodes, and nodes that represent text are Text nodes. Document, Element and Text are subclasses of the Node. Document and Element are the two most important classes in the DOM.

The Node type and its subtypes form the type hierarchy depicted in the diagram below. Note the formal differences between the generic Document and Element types, and the HTMLDocument and HTMLElement types. The Document type represents an HTML and XML document, and the Element class represents an element of that document. The subclasses HTMLDocument and HTMLElement represent specifically an HTML document and its elements:

It should also be noted in this diagram that there are many subtypes of the HTMLElement class representing specific types of HTML elements. Each of these defines JavaScript properties that reflect the HTML attributes of a particular element or group of elements. Some of these specific classes define additional properties or methods that do not reflect the syntax of the HTML markup language.

Selecting document elements

Most JavaScript client programs work in one way or another to manipulate document elements. At runtime, these programs can use the global document variable that references the Document object. However, in order to perform any manipulation of document elements, the program must somehow retrieve, or select, the Element objects that refer to those elements in the document. The DOM defines several ways to select elements. You can select an element or elements of a document:

by the value of the id attribute;

by the value of the name attribute;

by tag name;

by the name of the class or CSS classes;

by coincidence with a specific CSS selector.

All of these selection techniques are described in the following subsections.

Selecting elements by id attribute value

All HTML elements have id attributes. The value of this attribute must be unique within the document — no two elements in the same document must have the same id attribute value. You can select an element by the unique value of the id attribute using the method getElementById () Document object:

Var section1 \u003d document.getElementById ("section1");

This is the simplest and most common way to select items. If a script needs to be able to manipulate a specific set of document elements, assign values \u200b\u200bto the id attributes of these elements and use the ability to search for them by these values.

In versions of Internet Explorer earlier than IE8, the getElementById () method searches for id attribute values \u200b\u200bcase-insensitively and also returns elements that match the name attribute value.

Selecting elements by the value of the name attribute

The name HTML attribute was originally intended for naming form elements, and the value of this attribute was used when the form data was submitted to the server. Like the id attribute, the name attribute assigns a name to an element. However, unlike id, the value of the name attribute does not have to be unique: several elements can have the same name at once, which is quite common when using radio buttons and checkboxes in forms. Also, unlike id, the name attribute is only allowed on certain HTML elements, including forms, form elements, and elements.