Detailed Explanation of Basic Interaction of javascript

Directory 1. Element Acquisition Method Obtain id Obtain Class Name Obtain (className) Tag Name (tagName) Custom Acquisition Scope 2. Mouse Event Difference: 3. Element Operation 1. Operation Element Content Operation Form Element Content Operation Common Closed Tag 2. Operation Element Attribute Summary

1. How to get elements

Obtain 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 fetch get: Get Element: Element By: Pass.. Returns an element object Return value: The return specific element is obtained, but the return null is not obtained After using id, you can only get it under document, and you cannot customize the acquisition range

  var box = document.getElementById("box1");
        console.log(box);//<div id="box1"> I am DIV</div>
        var box = document.getElementById("box2");
        console.log(box); //null
        var myH2 = document.getElementById("my-h2");
        console.log(myH2);

Class name acquisition (className) Basic syntax: document. getElementsByClassName (class name value); document: Document, representing the scope of acquisition get: Get Elements: Element (plural) By: Pass. The resulting element object is a dynamic pseudo array It can be printed in traversal form Return value: obtained: returns a set of elements HTMLCollection, which is composed of indexes and values. 0 corresponds to item 1, 1 corresponds to item 2, and so on. It is born with length attribute, and the index of the last item is set. length-1; Gets less than 1 empty collection returned. Length is 0 length the length of the collection of attributes or the number of elements in the collection Set. length; Gets a concrete element in the collection Collection [index]

 var tests = document.getElementsByClassName("test");
        console.log(tests);
        console.log(tests.length); // Get length 
        //  Output directly to the console 
        console.log(tests[0]);
        console.log(tests[1]);
        console.log(tests[tests.length - 1]);
        //  Store 
        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]); // There is no such tab or index   Equivalent to this position in the collection that has not been initialized or defined   Return undefined
        var hello = document.getElementsByClassName("hello");
        console.log(hello, hello.length);
        console.log(hello[0]); //undefined

Label name (tagName) Basic syntax: document. getElementsByTagName (tag name); document: Document, representing the scope of acquisition get: Get Elements: Element (plural) By: Pass.. Return value: obtained: returns a set of elements HTMLCollection, which is composed of indexes and values. 0 corresponds to item 1, 1 corresponds to item 2, and so on. It is born with length attribute, and the index of the last item is set. length-1; Gets less than 1 empty collection returned. Length is 0 length the length of the collection of attributes or the number of elements in the collection Set. length; Gets a concrete element in the collection Collection [index]

   var oLis = document.getElementsByTagName("li");
        console.log(oLis);
        //  Get length 
        console.log(oLis.length);
        //  Get the concrete element 
        console.log(oLis[0]);
        console.log(oLis[1]);
        console.log(oLis[2]);
        console.log(oLis[oLis.length - 1]);

Custom Acquisition Scope

Parent element: Must be a concrete element

Parent Element.getElementsByClassName (class name value); Parent Element.getElementsByTagName (tag name);

//  Get ol Under li
        //  Get Parent Element 
        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[oLis.length - 1]);
        //  Get ul Under li
        //  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[ullis.length - 1]);

2. Mouse events

If the binding event is also a concrete element, it cannot directly operate the collection

onclick Click Events ondblclick Double Click Event onmousedown mouse press onmouseup Mouse Lift onmousemove mouse movement oncontextmenu Right-click onmouseover mouse move in onmouseout Mouse Move Out onmouseenter mouse entry onmouseleave Mouse Leave

  <div id="box"></div>
    <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
   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 press 
            oLis[1].onmousedown = function() {
                console.log(" Mouse press ");
            }
            // - onmouseup   Mouse up 
            oLis[1].onmouseup = function() {
                console.log(" Mouse up ");
            }
            // - onmousemove  Mouse movement 
            oLis[1].onmousemove= function() {
                console.log(" Mouse movement ");
            }
            // - oncontextmenu  Right-click the mouse 
            oLis[2].oncontextmenu = function() {
                console.log(" Right-click the mouse ");
            }
            // - onmouseover  Mouse move in 
            myUl.onmouseover = function() {
                console.log(" Mouse move in ");
            }
            // - onmouseout  Move the mouse out 
            myUl.onmouseout = function() {
                console.log(" Move the mouse out ");
            }
            // - onmouseenter   Mouse entry 
            myUl.onmouseenter = function() {
                console.log(" Mouse entry ");
            }
            // - onmouseleave   Mouse off 
            myUl.onmouseleave = function() {
                console.log(" Mouse off ");
            }
    </script>

onmouseover mouse move in onmouseout Mouse Move Out onmouseenter mouse entry onmouseleave Mouse Leave

Difference:

onmouseover and onmouseout will not only trigger the event corresponding to itself, but also trigger the parent event corresponding to the event again

onmouseenter and onmouseleave: This event will only trigger the action of itself, not the action of parent

3. Element manipulation

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

All operations on the element must be concrete elements, and the collection cannot operate directly

1. Manipulate element content

Everything you get from an element is a string, and nothing you get is an empty string

Manipulate form element content Settings: Form Element.value = Value; Get: Form Element.value;

//Overlay the preceding after multiple assignments

//  Get Element 
var inputs = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button")[0];
console.log(inputs, btn);
//  Show the sum of the two input boxes to the 3 Input boxes 
//  Binding event 
//  Event per click 1 Times   The code in the function is re-executed 1 Times 
btn.onclick = function () { // What to do 
    //  Gets the values of the two input boxes 
    var oneVal = inputs[0].value;
    var twoVal = inputs[1].value;
    console.log(oneVal, twoVal);
    //  String representation splicing encountered   Turn to numbers first 
    var total = parseFloat(oneVal) + parseFloat(twoVal);
    console.log(total);
    //  Set and to the 3 Input boxes 
    inputs[2].value = total;
}

Operate the common closure label Settings: Form Element.innerText/innHTML = Value; Get: Form Element.innerText/innHTML; Difference: innerText can only recognize text, while innHTML can recognize both text and label

var div = document.getElementsByTagName("div")[0];
var h2 = document.getElementsByTagName("h2")[0];
var p = document.getElementsByTagName("p")[0];
console.log(div, h2,p);
//  Settings: Form elements .innerText/innHTML =  Value ;
//  The set at the back overrides the front 
// div.innerText = " I am div";
// div.innerText = "<h6> I am div</h6>";
// div.innerHTML = " I am div";
div.innerHTML = "<h6><a href='https://www.baidu.com'> I am div</a></h6>";
h2.innerHTML = " I am H2";
//  Get: Form element .innerText/innHTML;  
console.log(div.innerText);// I am div
console.log(div.innerHTML);//<h6><a href="https://www.baidu.com"> I am div</a></h6>
console.log(p.innerText);
console.log(p.innerHTML);

2. Manipulate Element Attributes

Innate attributes of operation structure

Settings: Element. Attribute = value; Unable to get an empty string returned Get: Elements. Attributes;

Element.id = value; /Element.id;
Element.className = value; /Element.className;
Element.title = value; /Element.title;
...

//  Get Element 
var div =  document.getElementsByTagName("div")[0];
//  Settings 
div.className = "myBox";
div.title = " I am div";
//  Get 
console.log(div.id);
console.log(div.className);
console.log(div.title);

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!