JavaScript page elements acquired

First, access to elements based on id

　　Syntax:

document.getElementById(id);

　　Demo:

. 1  var main = document.getElementById ( 'main' );
 2 the console.log (main); // acquired data type HTMLDivElement, are all types of objects.

　　Note : Due to the id is unique, some browsers support direct access elements using the id name, but not the standard way, is not recommended. If there is no corresponding page id, at this time it returns null.

Second, get elements by tag name

　　Syntax:

doucument.getElementsByTagName (tag name);

　　Demo：　

1 var divs = document.getElementsByTagName('div');
2 for (var i = 0; i < divs.length; i++) {
3   var div = divs[i];
4   console.log(div);
5 } 

　　　Note :

　　　　Because a document which may have multiple tags of the same name, is acquired by acquiring a pseudo-array (collection), it can be traversed.

　　　　Acquired the collection is a dynamic collection, ie add elements to the page again, it will automatically update the number of elements in the collection.

Third, access to elements based on name

　　Syntax:

doucument.getElementByName(name);

　　Demo:

. 1  var Inputs = document.getElementsByName ( 'Hobby' ); // obtained is a pseudo-array
 2  for ( var I = 0; I <inputs.length; I ++ ) {
 . 3    var INPUT = Inputs [I];
 . 4    Console. log (INPUT);
 . 5 }

　　Note : This method is compatible memory browser, IE9 + only after support.

Fourth, to obtain elements based on class name

　　Syntax:

document.getElementByClassName(类名);

　　Demo：

. 1  var MAINS = document.getElementsByClassName ( 'main' ); // obtained is a pseudo-array
 2  for ( var I = 0; I <mains.length; I ++ ) {
 . 3    var main = MAINS [I];
 . 4    Console. log (main);
 . 5 }

Fifth, to obtain elements based selector

　　1、querySelector()

　　　　Syntax:

querySelector (selector name);

　　　　Note : Use this method only returns the first matching element.

　　Demo：

1 var element = document.querySelectorAll('.a');
2 console.log(element)

　　2、querySelectorAll()

　　　　Syntax:

querySelectorAll (selector name);

　　　　Note : Use this method to return all matching elements

　　　Demo：

1 var elements = document.querySelectorAll('.a');
2 consoloe.log(elements);

　　注意：这两个方法都是根据选择器来获取元素，存在浏览器兼容问题，IE8 以后才执行