Setting the operation of JavaScript, DOM tag attributes

A set of attribute values, and acquires the label

Label objects .steAttribute ( 'attribute name' attribute values);
can only define one, if you want to define a plurality, need to be performed repeatedly
acquires the property value tag
label object .getAttribute ( 'attribute name');
is the result obtained string

// Get all div tags 
var oDiv1 = document.querySelector ( 'div' );
 // and the property is set to 0 = index 
oDiv1.setAttribute ( 'index', 0 );
 // result output setting 
console. log (oDiv1); 
 // get property name attribute value of index 
oDiv2 = oDiv1.getAttribute ( 'index' );
 // output value of the index attribute name attribute 
console.log (oDiv2);

Second, a special set of attribute values

// label object set id .id = attribute value attribute value attribute 
oDiv.id = 'div1' ;
 // output div1 id attribute value of 
the console.log (oDiv.id)
 // label object attribute value .className = class attribute set attribute value 
oDiv.className = 'DIV3' ;
 // output div2 class attribute value of 
the console.log (oDiv.className)
 // used as operation name, some browsers may be used, mainly compatibility problems or the use of set, get the safest 
// not recommended 
oDiv.name = 'John Doe' ; 
console.log (oDiv.name);

Summary:
A: the getAttribute \ is the setAttribute all attributes are common tags, recommended
B: id setting: .id = label object attribute value, can also be used, preferably with the get and SET
C: class setting: label object. className = attribute value, can also be used, preferably with the get and sET
D: setting name: .className = label object attribute value, best not to use, and get directly sET
E, the attribute value is set replacement operation, before overrides, set the properties EDITORIAL

Third, an attribute value setting tag
1, tag itself has an attribute, can be directly manipulated, it can also be used gat / set to operate

var attire document.querySelector = ( 'div' ); 
oDiv.className = 'div1' ; 
oDiv.setAttribute ( 'class', 'div1')

2, radio buttons, check boxes, the checked properties

// There are different browser compatibility issues, may not obtain the correct value, the output is undefined 
var oSpan = document.querySelector ( 'span' ); 
oSpan.setAttribute ( 'name', 'spanspan)' ; 
oSpan.setAttribute ( ' index ',' first ' ); 
the console.log (oSpan.name) 
the console.log (oSpan.index)

3, value for the input attribute value is generally tag

var oBtn1 = document.querySelector ( '[name = "btn1"]' ); 
oBtn1.onclick = function () {
     var oFile = document.querySelector ( '[type = "File"]' );
     // set the label internal value attribute does not work, the result obtained is an empty string 
    // after selection by clicking the upload content, can obtain the correct data value attribute parameters 
    the console.log (oFile.value); 
} 
var oBtn2 = Document. querySelector ( '[name = "btn2"]' ); 
oBtn2.onclick = function () {
     var oText = document.querySelector ( 'TextArea' );
     // set the interior of the value attribute tag does not work, obtaining the result is an empty string 
    // set the tag content, or content after writing,Tag data may be acquired by the value attribute
    console.log(oText.value);
}

Note:
A, is the direct use classname and class values, such as ID, class, the checked
B, SET and the class is class value, e.g. index, Number, RES, idNumber ....
C, sometimes compatibility problems , you can try each other

Setting the operation of JavaScript, DOM tag attributes

Guess you like