New selector for getting started with HTML5

HTML the new selector in

A Selector Selector

1. Queryselector

2. Queryselectorall

3. Getelementsbyclassname

1. Queryselector usage of

Create a div <div id= "Div1" >div</div>

then use the selector to select ID var odiv=document.queryselector (' #div1 ')

you can also choose class var odiv=document.queryselector ('. Box ')

There's another way . Useful title selection elements

Create a Div It 's got a title . <div title= "A1" >div</div>

Selector Selection var odiv=document.queryselector (' [title=a1] ')

!! Remember, when you choose, you must add the ID of the # or class . symbol, otherwise the selection is invalid

The result above is

Disadvantages of Quetyselector: Only one element can be selected

If you have more than one div with the same class name, you can only select the first one in a group

2. Queryselectorall usage (get a set of elements)

Create 2 div with the same class name

< div Class = >div1</ div >

< Div class = "box" >div2</ Div >

Use selector to select

var Adiv = Document . Queryselectorall ('. Box ')

Using Event Testing whether multiple elements have been selected

Alert (adiv.length)

the result of the popup is 2

3.getElementsByClassName

This can only select the class name, and the above 2 selectors Choose a variety of, this is not more verbose, and then look down

Two. Get class list Properties

Classlist

1. length to get class lengths

2. Add () adds the class method

3. Remover() Delete class method

4. Toggle() according to

first create a div with ID and Class

<div class= "box box2 box3" id= "Div1" >div1</div>

and then select ID gets the element and then uses the classlist Popup This element has the class

var Odiv = Document . getElementById (' div1 ')

Alert (odiv.classlist)

alert (typeof odiv.classlist)// pops up an object similar to an array

Result is

and then test classlist the method

oDiv.classList.add (' box4 ')// Add a class Method

oDiv.classList.add (' box2 ')// Delete a class Method

oDiv.classList.toggle (' Box2 ')//toggle method depends on whether the element has this class method, if there is an execution delete, if not, the add

New selector for getting started with HTML5