Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to master the basic interaction of javascript". In daily operation, I believe that many people have doubts about how to master the basic interaction of javascript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "how to master the basic interaction of javascript"! Next, please follow the editor to study!

one。 The method of obtaining the element is obtained under the document

As long as it matches in the document, it will be obtained.

Id acquisition

Basic syntax: document.getElementById (id value)

Document: document that represents the scope of the acquisition

Get: get Element: element By: through..

The element object is returned

Return value: get the specific element returned, but not the returned null.

After using id, the acquisition can only be obtained under document, and the acquisition scope cannot be customized.

Var box = document.getElementById ("box1"); console.log (box); / / I am DIV var box = document.getElementById ("box2"); console.log (box); / / null var myH2 = document.getElementById ("my-h3"); console.log (myH2); Class name acquisition (className)

Basic syntax: document.getElementsByClassName (class name value)

Document: document that represents the scope of the acquisition

Get: get Elements: element (plural) By: through..

The resulting element object is a dynamic pseudo array

It can be printed through traversal.

Return value: get: return a collection of elements HTMLCollection, which consists of indexes and values. 0 corresponds to the first item, 1 corresponds to the second item, and so on, naturally comes with its own length attribute, and the index of the last item is the collection .length-1. If not, an empty set length is 0.

Length of the length attribute collection or the number of elements in the collection

Collection .length

Get the specific elements in the collection

Collection [index]

Var tests = document.getElementsByClassName ("test"); console.log (tests); console.log (tests.length); / / get the length / / output directly to the console console.log (tests [0]); console.log (tests [1]); console.log (tests [tests.length-1]); / / stored var oDiv = tests [0] Var oH2 = tests [1]; console.log (oDiv, oH2); var test1 = document.getElementsByClassName ("test1"); console.log (test1, test1.length); console.log (test1 [0]); console.log (test1 [1]) / / the absence of this small label or index equals that the location in the collection has not been initialized, or the undefined return undefined var hello = document.getElementsByClassName ("hello"); console.log (hello, hello.length); console.log (hello [0]); / / undefined signature (tagName)

Basic syntax: document.getElementsByTagName (tag signature)

Document: document that represents the scope of the acquisition

Get: get Elements: element (plural) By: through..

Return value: get: return a collection of elements HTMLCollection, which consists of indexes and values. 0 corresponds to the first item, 1 corresponds to the second item, and so on, naturally comes with its own length attribute, and the index of the last item is the collection .length-1. If not, an empty set length is 0.

Length of the length attribute collection or the number of elements in the collection

Collection .length

Get the specific elements in the collection

Collection [index]

Var oLis = document.getElementsByTagName ("li"); console.log (oLis); / / get length console.log (oLis.length); / / get specific element console.log (oLis [0]); console.log (oLis [1]); console.log (oLis [2]); console.log (oLis.length-1]); Custom get range

Parent element: must be a specific element

Parent element .getElementsByClassName (class name value)

Parent element .getElementsByTagName (tag signature)

/ / get li under ol / / get parent elements var wrap = document.getElementById ("wrap"); console.log (wrap); / / var oLis = wrap.getElementsByClassName ("test"); var oLis = wrap.getElementsByTagName ("li"); console.log (oLis); console.log (oLis.length); console.log (oLis [0]) Console.log (oLis [1]); console.log (oLis.length-1]); / / get li under ul / / get parent var wrap1 = document.getElementsByClassName ("wrap"); console.log (wrap1); console.log (wrap1 [0]); console.log (wrap1 [1]); / / var ullis = wrap1 [1] .getElementsByClassName ("test") Var ullis = wrap1 [1] .getElementsByTagName ("li"); console.log (ullis); console.log (ullis.length); console.log (ullis [0]); console.log (ullis [1]); console.log (ullis.length-1]); II. Mouse event

Binding events should also be specific elements, and you cannot directly manipulate the collection.

Onclick Click event

Ondblclick double-click event

Onmousedown mouse down

Onmouseup mouse up

Onmousemove mouse movement

Oncontextmenu right-click

Onmouseover mouse move in

Onmouseout mouse move out

Onmouseenter mouse entry

Onmouseleave mouse away

1 2 3 var box = document.getElementById ("box"); console.log (box); var myUl = document.getElementById ("myUl") console.log (myUl); var oLis = myUl.getElementsByTagName ("li"); console.log (oLis); / /-onclick click event box.onclick = function () {console.log ("click") } / /-ondblclick double-click event oLis [0] .ondblclick = function () {console.log ("double-click event");} / /-onmousedown mouse down oLis [1] .onmousedown = function () {console.log ("mouse down") } / /-onmouseup mouse up oLis [1] .onmouseup = function () {console.log ("mouse up");} / /-onmousemove mouse move oLis [1] .onmousemove = function () {console.log ("mouse move") } /-oncontextmenu right-click oLis [2] .oncontextmenu = function () {console.log ("mouse right click");} / /-onmouseover mouse move into myUl.onmouseover = function () {console.log ("mouse move in") } / /-onmouseout mouse moves out myUl.onmouseout = function () {console.log ("mouse out");} / /-onmouseenter mouse enters myUl.onmouseenter = function () {console.log ("mouse enters") } / /-onmouseleave mouse leaves myUl.onmouseleave = function () {console.log ("mouse away");}

Onmouseover mouse move in

Onmouseout mouse move out

Onmouseenter mouse entry

Onmouseleave mouse away

Difference:

Onmouseover and onmouseout will not only trigger the event corresponding to themselves, but also trigger again what the parent event does.

Onmouseenter and onmouseleave: it only triggers what the event does, not what the parent does.

three。 Element operation

Principle: to give a value is to set, and not to give a value is to get

All operations on elements must be specific elements, and collections cannot be manipulated directly

1. Manipulate element content

What you get from the element is a string, and what you get without content is an empty string.

Manipulate the contents of form elements

Settings: form element .value = value

Get: form element .value

/ / overwrite the previous one after multiple assignments

/ / get element var inputs = document.getElementsByTagName ("input"); var btn = document.getElementsByTagName ("button") [0]; console.log (inputs, btn) / / display the sum of the two input boxes to the third input box / / bind the event / / the code in the function reexecutes btn.onclick = function () {/ / do something / / get the value of the two input boxes var oneVal = inputs [0] .value; var twoVal = inputs [1] .value; console.log (oneVal, twoVal) / / A string indicates that the stitching is converted to the number var total = parseFloat (oneVal) + parseFloat (twoVal); console.log (total); / / and is set to the third input box inputs [2] .value = total;} to operate the normal closed tag.

Settings: form element .innerText / innHTML = value

Get: form element .innerText / innHTML

Difference: innerText can only recognize text, while innHTML can recognize both text and tags

Var div = document.getElementsByTagName ("div") [0]; var h3 = document.getElementsByTagName ("h3") [0]; var p = document.getElementsByTagName ("p") [0]; console.log (div, h3Powerp); / / Settings: form element .innerText / innHTML = value; / / div.innerText = "I am div"; / / div.innerText = "I am div"; / / div [XSS _ clean] = "I am div" Div [XSS _ clean] = "I am div"; h3 [XSS _ clean] = "I am H2"; / / get: form element .innerText / innHTML; console.log (div.innerText); / / I am divconsole.log (div [XSS _ clean]); / / I am divconsole.log (p.innerText); console.log (p[ XSS _ clean]); 2. Operation element attribute

The inherent attributes of the operation structure.

Settings: element. Attribute = value; cannot get the returned empty string

Get: element. Attribute

Element. id = value; / element. id

Element. className = value; / element. className

Element. title = value; / element. title

...

/ / get the element var div = document.getElementsByTagName ("div") [0]; / / set div.className = "myBox"; div.title = "I am div"; / / get console.log (div.id); console.log (div.className); console.log (div.title); at this point, the study of "how to master the basic interaction of javascript" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.