HTML CLASSES IN JS

When reading HTML browser generates a DOM-model. However, most standard HTML-attributes are properties of the respective objects.

For example, if the tag looks like , then the object is a property body.id = "page".

But this transformation - not a one-to-one. There are situations where an attribute has a single value, and property - both. It also happens that the attribute is, and properties with the same name is not created.

In short - HTML-DOM-attributes and properties are usually, but not always correspond to each other, it should be understood that such a property, and that is an attribute to work correctly with them.

Earlier we saw some built-in properties DOM-node. But, technically, none of us is not limited.

DOM node - is an object, therefore, like any object in JavaScript, it can contain custom properties and methods.

For example, we will create in document.bodya new property, and write in it object:

You can also add a new feature:

Custom properties and methods are visible only in JavaScript and does not affect the display of the corresponding tag.

Let us note, custom DOM-properties:

  • May have any value.
  • The names of the properties are sensitive to the register.
  • Work due to the fact that the DOM-nodes are JavaScript objects.

The DOM elements, on the other hand, correspond to the HTML-tags that have the text attributes.

Of course, here we are just about nodes, elements, not about text nodes or comments.

Access to attributes is performed using standard methods:

  • elem.hasAttribute(name) - checks for the attribute
  • elem.getAttribute(name) - Get the value of an attribute
  • elem.setAttribute(name, value) - sets attribute
  • elem.removeAttribute(name) - removes the attribute

These methods work with a value that is in HTML.

Also, all the attributes can be obtained by using the property elem.attributesthat contains an array of pseudo-object type Attr.

Unlike properties, attributes:

  • They are always strings.
  • Their name is not case sensitive (it's HTML)
  • Seen in innerHTML(except for old IE)

Consider the differences between DOM-properties and attributes of the example HTML-code:



The example below demonstrates sets attributes and their features.





When you run the code above note

  1. getAttribute('About')- the first letter of the attribute name Aboutis written in upper case, as in HTML - in the bottom, but it does not matter, because the names are case-insensitive.
  2. We can write to attribute any value, but it will be converted to a string. The objects will be automatically converted.
  3. After you add a attribute can be seen in innerHTMLthe element.
  4. The collection attributescontains all the attributes in objects with properties nameand value.

When the browser reads the HTML and creates a DOM-model, it creates properties for all standard attributes.

For example, properties of the tag 'A'described in the DOM specification: HTMLAnchorElement.

For example, it has a property "href". In addition, it has "id"other properties that are common to all the elements that are described in the specification in HTMLElement.

All standard DOM properties are synchronized with attributes, but not always such synchronization takes place 1-to-1, so sometimes we need to value it from the HTML, you have the attribute.

Consider a few examples.

Synchronization does not guarantee the same values ​​in the attributes and properties.

Read more:   Program font for MAC OS

For example, see what happens with the attribute "href"when you change the properties:

This is because the attribute may be any, and the property href, according to the specification W3C, should be complete by reference.

So, if we want exactly that in HTML, you need to go through the attribute.

Change some properties attribute updates. But this is the exception rather than the rule.

The most common synchronization - one-sided: the property depends on the attribute, but not vice versa.

For example, when you change the properties of input.valuethe attribute input.getAttribute('value')does not change:

That is, the change in DOM-property valueattribute is not affected, it remains the same.

But changing attribute updates the property:

This feature can be nice to use.

It turns out that the attribute input.getAttribute('value')stores the original (initial) value even after the user has filled in the field and the property is changed.

For example, you can take the original meaning of the attribute, and compare with the property to see if the value has changed. And, if necessary, re-record the property attribute, discarding the changes.

Attribute "class"corresponds to the property className.

Since the word "class"is a reserved word in Javascript is, that when designing DOM decided that the corresponding property will be called className.

For example:

By the way, there are other attributes that are called differently than property. For example, the attribute for( ) corresponds to a property name htmlFor.

Attribute class- is unique. It corresponds as much for two properties!

Work with classes like the string uncomfortable. Therefore, in addition className, in modern browsers have a feature classList.

Property classList- an object to work with classes.

It is supported in IE since IE10, but it can be emulated in IE8 +, connecting the mini-library classList.js.

methods classList:

  • elem.classList.contains("class")- returns true/false, depending on whether there is an element class class.
  • elem.classList.add/remove("class") - add / remove class class
  • elem.classList.toggle("class")- if the class classis not present, add it, if there is - removes.

In addition, it is possible to sort through the classes foras classList- a pseudo-array.

For example:

Each element has a set of standard features, such as it will be href, namebut for it to be src, altand so on.

The exact set of features described in the standard, usually we are more or less present, if we use the HTML, which properties can be, and what - no.

DOM-property is not created for the custom attributes.

For example:

The property is a standard only if it is described in the standard for this element.

That is, if you assign an element attribute href, the property img.hrefof this appears. As, however, and if you assign a link attribute alt:

Custom attributes are sometimes used for CSS.

In the following example to show the "order status" attribute is used order-state:

Why attribute? Could not you have done classes .order-state-new, .order-state-pending, order-state-canceled?

Of course you can, but to manipulate an attribute from JavaScript much easier.

For example, if you need to cancel an order, no matter what condition he is now - it will make the code:

For classes - need to know what class is now in order. And then we can remove the old class, and put a new one:

... That is, it takes more of the initial information and the need to write more letters. It is less convenient.

Simply put, the value of the attribute - an arbitrary string class value - it 'is' or 'no', so it is natural that the attributes of the "powerful" and are more convenient classes in JS and in the CSS.

Read more:   NOD32 Server Update 5

With the help of custom attributes can be mapped to the data item that will be available in JavaScript.

Typically, this is done with the help of attributes with names that begin with data-, for example:

HTML5 standard specifically permits attributes data-*and reserves them for user data.

In all browsers except IE10-, such attributes can be accessed not only as to the attributes, but also as to the properties, with special properties dataset:

Pay attention - the name data-user-locationwas transformed into dataset.userLocation. The hyphen is converted to a capital letter.

For older browsers modern attributes sometimes need polifille. As a rule, such polifill includes not just JavaScript, but and CSS.

This attribute should hide the element, the action is very simple, to support it in the HTML enough this CSS:

If you run into IE11- example above, it

Add a comment

Your e-mail will not be published. Required fields are marked *