Detailed explanation of basic interaction of javascript

  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);

 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]);
        // Store it 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 subtitle or index is equivalent to the position in the collection not being initialized, or undefined returns undefined
        var hello = document.getElementsByClassName("hello");
        console.log(hello, hello.length);
        console.log(hello[0]); //undefined

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

// Get the li under ol
        // Get the 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 the li under ul
        // Get the 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]);

  <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 The mouse is pressed oLis[1].onmousedown = function() {
                console.log("mouse pressed");
            }
            // - onmouseup The mouse is raised oLis[1].onmouseup = function() {
                console.log("Mouse up");
            }
            // - onmousemove mouse moves oLis[1].onmousemove= function() {
                console.log("mouse move");
            }
            // - oncontextmenu right click oLis[2].oncontextmenu = function() {
                console.log("right click");
            }
            // - onmouseover The mouse moves into myUl.onmouseover = function() {
                console.log("Mouse moves in");
            }
            // - onmouseout The mouse moves out myUl.onmouseout = function() {
                console.log("mouse out");
            }
            // - onmouseenter The mouse enters myUl.onmouseenter = function() {
                console.log("mouse enter");
            }
            // - onmouseleave The mouse leaves myUl.onmouseleave = function() {
                console.log("mouse leaves");
            }
    </script>

// Get elements var inputs = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button")[0];
console.log(inputs, btn);
// Display the sum of the two input boxes in the third input box // Bind event // The code in the function will be re-executed every time the event is clicked btn.onclick = function () { // What to do // Get the values ​​of the two input boxes var oneVal = inputs[0].value;
    var twoVal = inputs[1].value;
    console.log(oneVal, twoVal);
    // When encountering a string, convert it to a number first var total = parseFloat(oneVal) + parseFloat(twoVal);
    console.log(total);
    // Set the sum to the third input box inputs[2].value = total;
}

var div = document.getElementsByTagName("div")[0];
var h2 = document.getElementsByTagName("h2")[0];
var p = document.getElementsByTagName("p")[0];
console.log(div, h2,p);
// Setting: form element.innerText/innHTML = value;
// The latter settings cover the former // 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);

// 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);