DOM element selector of the selector

DOM selector elements

　　In the DOM element selector we can divided into two categories; 1, selector element nodes; 2, other nodes selector. To manipulate the HTML element selected by the selector, in order to achieve operation with JS page.

　　First, the node selector element

　　1.ID Selector: document.getElementById ()

　　ID tag by name selection, returns a single value, unique ID in HTML;

　　2.class Selector: document.getElementsByClassName ()

var aEle = document.getElementsByClassName ( "myClass") // Select the document element named myClass of all class, returns an array.

　　By class name tag selection and return of an array, when we need a single operation, the operation may be utilized to select a single array element; It should be noted that, different from the ID selector, as is an array Elements is so, note that there is a s, and because there are keywords ES6 class in order to avoid repetition here is ClassName.

　　3. tag selector: document.getElementsByTagName ()

　　Selected by the tag name, select all the span tags in the document below.

var aspan = document.getElementsByTagName ( "span") // Select all the DOM document <span> </ span> tag returns an array.

　　4.name选器：document.getElementsByName()

　　The syntax is as follows:

var auser=document.getElementsByName("user");

　　Select the name generally used to form a label containing the name attribute; likewise, returns an array.

　　5. Advanced Selector: ES5 new selector

　　querySelector()和querySelectorAll()

　　① querySelector () returns a single object

　　The syntax is as follows:

var ele = document.querySelector("#box");
var ele1 = document.querySelector(".class");
var ele2 = document.querySelector("span");
var ele3 = document.querySelector(".msg h2");
var ele4 = document.querySelector(".msg>h2");

　　We can see from the above code, this selector to powerful beyond your imagination, and even support all the selectors in css.

　　②querySelectorAll () returns an array of objects

　　Syntax with querySelector ();

　　6. Relationship selector

　　I'll relations selector into three categories: ① Father ② selected sub-submenu Father ③ Brother

　　① Father election son

document.querySelector OMSG = var ( "MSG."); 
     omsg.children // all subelements; 
     omsg.firstElementChild // first subelement; 
     omsg.lastElementChild // last child element;

　　② election parent child

document.querySelector ASpan = var ( "span"); 
        span.parentNode; // span of the selected parent element;

　　③ sibling selectors

document.querySelector ASpan = var ( "span"); 
        aspan.previousElementSibling // selected span on a sibling 
        aspan.nextElementSibling // select the next span of a sibling

Tip: using the above-mentioned selector to return an array, the array is a pseudo-array, when required to operate on a single element, the array can be indexed, traversal, it is to be noted that the array impractical method!

DOM element selector of the selector

Guess you like