Analysis of attribute and property in Javascript

Analysis of attribute and property in Javascript
Attribute and property both have the meaning of attributes. attribute has the meaning of attributes and traits, and property has the meaning of properties and performance. First, it should be clear that in the specification, the method for reading and setting attribute is getAttribute/setAttribute/removeAttribute, such as box. setAttribute ('somekey', 'somevalue'). To access the property of an element, use. (point) method, such as box. somekey. attribute: <div id = "box" test1 = "test2" game1 = "gamesomeabc"> box content </div> Each DOM element has a corresponding attributes attribute to store all attribute nodes., attributes is a class array container. The accurate point is NameNodeMap. In short, it is a container similar to an array but not the same as an array. Each digital index of attributes stores an attribute node in the form of a name-value Pair (name = "value. For example, var box = document. getElementById ('box'); box. getAttribute ('test1') // test2box. attribute [0]. value // boxbox. attribute [3]. value // ttt and attribute changes dynamically. For example, property is an attribute. If DOM elements are viewed as common Object objects, property is an attribute stored in the Object in the form of a name-value Pair (name = "value. Adding and deleting a property is much easier, and there is no difference between it and a common object: The reason why attribute and property are easily mixed together is that, many attribute nodes also have a corresponding property attribute. For example, the id and class of the div element above are both attribute and corresponding property, and can be accessed and modified in any way. However, it will be okay for custom attributes. Box. getAttribute ('id') // boxbox. id // boxbox. newkey // undefined box. getAttribute ('newkey') // newvalue so: in the standard, the browser will share some attributes with the property by default, such as id, class, style, etc. We can use getAttribute () or, if the setAttribute attribute is not shared in the browser, we can only get it through getAttribute. But note: this refers to the specification, while IE6 and IE7 are not standardized. This is a big pitfall. Box. setAttribute ('test1', 'abc'); alert (box. test1); // IE6/IE7 pop-up abc IE8 + pop-up undefined although some attributes (id, class, title) are shared by attribute and property, but they will also be inconsistent. <Input type = "radio" checked = "checked" id = "someRadio"> var someRadio = document. getElementById ('someradio '); alert (someRadio. checked + '--' + someRadio. getAttribute ('checked'); // IE6/7 pop up true -- true IE8 + true -- checked. Obviously, attribute indicates the value under the HTML tag of the accessed element, property accesses the value of DOM element reference (equivalent to an object. IE6/7 does not divide attribute and property, which brings a lot of problems to compatibility. Let's take a look at jQuery's compatibility with attribute (general idea ): var div = document. createElement ('div '); div. setAttribute ('classname', 'T'); console. log (div. className! = 'T'); // IE6/7 print out false chrome print out falsejQuery. Here we use setAttribute to set className to t, and then use div. className. According to the standard, this parameter cannot be obtained. Therefore, in IE8 + browser, false is returned. However, IE6/7 does not distinguish attribute from property, which leads to div. the value of className is t, and true is returned. This code is used in the support module to determine whether setAttribute and getAttribute are secure (whether they are available ). If it is not secure, other methods are required to set attribute: The getAttributeNode and setAttribute methods are used here. Although attribute and property cannot be separated, most IE67 problems are solved. Copy the code function setIE67Attribute (box, key, value) {var attributeNode = document. createAttribute (key); box. setAttributeNode (attributeNode); attributeNode. value = value;} function getIE67Attribute (box, key) {return box. getAttributeNode (key ). value;} setIE67Attribute (box, 'customkey', 'customvalue'); alert (getIE67Attribute (box, 'customkey'); // customvalue alert (box. customkey); // customvalue box. abc = 'def '; alert (getIE67Attribute (box, 'abc'); // abc alert (box. getAttribute ('abc'); // abc