Document Object Model DOM operations acquired label content
a, the object acquired by an id attribute value tag (only get a tag object)
document.getElementById ( 'id attribute value')
// Get tab id tag to the object div1 var oDiv1 = document.getElementById ( 'div1' ); // output div1 id ID of tag content console.log (oDiv1);
Second, the tag obtained by the object class attribute value
document.getElementsByClassName ( 'class attribute value')
behind the elements have s represents a complex can be selected from the class of all, in all the js classname defined class, can not be forEach () loop
var oDiv2 = document.getElementsByClassName ( 'div2' ); // output class is that all data div2 the console.log (oDiv2); // the output data of the first div2 the console.log (oDiv2 [0 ]); // Output div2 second data console.log (oDiv2 [1]);
Third, access to label objects by label name
document.grtElementsByTagName ( 'name tags)
acquired also a dummy array can not be forEach () loop
var oDiv3 = document.getElementsByTagName ( 'div' ); // the output data for all labels are div2 the console.log (oDiv3); // output of the second data div console.log (oDiv3 [1]);
Fourth, the object acquired by the tag tag neme
document.getElementByname
acquired also a dummy array can not be forEach () loop
var oDiv4 = document.getElementByname ( 's' ); // // output all labels name is s data console.log (oDiv4); // // name tag output is s second data console.log (oDiv4 [1]);
V. syntax specification, acquisition label objects
document.querySelector () // get qualified first label
document.querySelectorAll () // get all labels qualifying
acquired is an array, can be forEach () loop However, the low version is not compatible with the above two ways ie
// Get the id for the label content div1 var oQuery1 = document.querySelector ( '# div1' ); // output div1 id tag content of the console.log (oQuery1); // Get the class label content div2 var oQuery2 document.querySelector = ( 'Div2.' ); // output class label to div1 content of the console.log (oQuery2); // be obtained by the tag name tags, acquires only the first label div var oQuery3 = Document. querySelector ( 'div' ); // output label tag content div the console.log (oQuery3); // get all tags for div tag var oQuery4 = document.querySelectorAll ( 'div' ); // output all tags an array of div, console.log (oQuery4); //Get all s tag name attribute value of var oQuery5 = document.querySelectorAll ( '[name = "s"]' ); // array output name attribute value of the console.log (oQuery5); // get the value of the type attribute is text tags var oQuery6 = document.querySelectorAll ( '[type = "text"]' ); // output array type attribute to text the console.log (oQuery6); // can also obtain through ul li tag in tag structure, var oQuery7 = document.querySelectorAll ( 'UL> Li' ); the console.log (oQuery7);
Note:
A, as long as css selector syntax syntax supports all right, son, offspring, brothers .... supports
B, are two ways to obtain a pseudo-array, but an array of content acquisition, different
C, if you want to cycle, try to use a for loop, not easy to go wrong