Shulou(Shulou.com)06/01 Report--

Define

Element properties attribute refers to the properties of HTML element tags

The following id, class, title, and an are all features, where an is called a custom feature

The object attribute property refers to the attribute of the element node

The following id, title, and b are all properties, where b is called a custom attribute

Test.id = 'id2';test.title =' title2';test.b = 'b2'

Common

Id, title, and so on are both attributes and features. If you modify the attribute, the corresponding property will change; if you modify the property, the attribute will also change.

[1] modify element properties (take title as an example)

Test content console.log (test.title); / / 123_document.onclick = function () {test.setAttribute ('title','456'); console.log (test.title); / / 456}

[2] modify object properties

Test content console.log (test.getAttribute ('title')); / / 123_document.onclick = function () {test.title =' 456; console.log (test.getAttribute ('title')); / / 456}

Exception

The two element features class and for are exceptions because class and for are reserved words and cannot be used directly in object attributes. So in the object properties, class becomes className and for becomes htmlFor.

[1] class

Test content console.log (test.getAttribute ('class')); / /' class1'console.log (test.className); / / 'class1'console.log (test.class); / / undefined

[2] for

Console.log (test.getAttribute ('for')); / /' input'console.log (test.htmlFor); / / 'input'console.log (test.for); / / undefined

Special

Style and onclick are two special features. Although they have corresponding attribute names, their values are not the same as those returned by getAttribute ().

[1] style

When accessed through getAttribute (), the returned style property value contains CSS text, while accessing it through the property returns a CSSStyleDeclaration object

Console.log (test.getAttribute ('style')); / /' height: 100pxash width: 100pxash / {0: "height", 1: "width", alignContent: ", alignItems:", alignSelf: ""... } console.log (test.style); console.log (typeof test.style); / / 'object'console.log (test.style.height); / /' 100px'

[2] onclick

If accessed through getAttribute (), the string of the corresponding code is returned. When accessing the onclick property, a javascript function is returned

[note] other event handlers are similar

Test content console.log (test.getAttribute ('onclick')); / /' alert (1) 'console.log (test.onclick); / /' function onclick (event) {alert (1)} 'console.log (typeof test.onclick); / /' function'

[note] if the onclick property is set through the object property, there will be no corresponding element property

Test content test.onclick = function () {alert (1);} console.log (test.getAttribute ('onclick')); / / nullconsole.log (test.onclick); / /' function onclick (event) {alert (1)} 'console.log (typeof test.onclick); / /' function'

Custom definition

[1] Custom property

The custom feature is used to bind some additional information to the HTML element. However, custom properties cannot be reflected in object properties.

Console.log (test.getAttribute ('index')); / /' 1'console.log (test.index); / / undefined

HTML5 adds the dataset property dataset (a custom feature of the specification) to store private custom data for pages or applications. The dataset attribute is prefixed with 'data-', and you can access the value of data-* using the object attribute dataset in javascript

Since the value of the element property is separated by'-', it is converted to uppercase in the object property.

Data-index-one-> dataset.indexOne

Therefore, the value of the element property must not be capitalized, otherwise the object property will interpret the error.

[note] IE10- browsers do not support dataset

Console.log (test.getAttribute ('data-index-one')); / /' 1'console.log (test ['data-index-one']); / / undefinedconsole.log (test.dataset.indexOne); / /' 1'

[compatible code]

Function getDataSet (element) {if (element.dataset) {return element.dataset;} var attrs= element.attributes; var len = attrs.length; var data = {}; for (var iTuno

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.