Detailed explanation of basic interaction of javascript

1. How to obtain elements

Get it from the document

ID acquisition
Get the class name (className)
Tag Name (tagName)

Customize the acquisition scope

2. Mouse events

the difference:

3. Element Operation

1. Operation element content

Manipulating form element content
Operate normal closing tag

2. Operation element attributes

Summarize

1. How to obtain elements

Get it from the document

As long as it is in the document, it will be obtained

ID acquisition

Basic syntax: document.getElementById(id value);
- document: document, indicating the scope of acquisition
- get：Get Element：Element By：through..
- The returned element object
Return value: Returns the specific element if it is obtained, otherwise returns null
The id can only be obtained under the document, and the range of acquisition cannot be customized.

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

Get the class name (className)

Basic syntax: document.getElementsByClassName(class name value);
- document: document, indicating the scope of acquisition
- get：Get Elements：Elements (plural) By: through..
- The obtained element object is a dynamic pseudo-array
- It can be printed out in the form of traversal
Return value: If obtained, returns an element collection HTMLCollection, which consists of index and value. 0 corresponds to the first item, 1 corresponds to the second item, and so on. It has a length attribute. The index of the last item is collection.length -1; if not obtained, returns an empty collection with a length of 0.
The length attribute is the length of the collection or the number of elements in the collection
- collection.length;
Get specific elements in a 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]);
        // 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

Tag Name (tagName)

Basic syntax: document.getElementsByTagName(tag name);
- document: document, indicating the scope of acquisition
- get：Get Elements：Elements (plural) By: through..
Return value: If obtained, returns an element collection HTMLCollection, which consists of index and value. 0 corresponds to the first item, 1 corresponds to the second item, and so on. It has a length attribute. The index of the last item is collection.length -1; if not obtained, returns an empty collection with a length of 0.
The length attribute is the length of the collection or the number of elements in the collection
- collection.length;
Get specific elements in a collection
- Collection [index]

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

Customize the acquisition scope

Parent element: must be a specific element

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

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

2. Mouse events

The binding event must also be a specific element, and the collection cannot be operated directly

onclick click event
ondblclick double click event
onmousedown Mouse pressed
onmouseup The mouse is raised
onmousemove mouse movement
oncontextmenu right click
onmouseover mouse moves in
onmouseout The mouse moves out
onmouseenter mouse enters
onmouseleave The mouse leaves

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

onmouseover mouse moves in
onmouseout The mouse moves out
onmouseenter mouse enters
onmouseleave The mouse leaves

the difference:

onmouseover and onmouseout will not only trigger the corresponding events of their own events, but also trigger the corresponding events of the parent events again.

onmouseenter and onmouseleave: only trigger the corresponding actions of their own events, and will not trigger the corresponding actions of the parent event

3. Element Operation

Principle: Giving a value is setting, not giving a value is getting

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

1. Operation element content

The content obtained from the element is a string, and an empty string is obtained if there is no content.

Manipulating form element content

Setting: form element.value = value;
Get: form element.value;

// Multiple assignments overwrite the previous ones

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

Operate normal closing tag

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

2. Operation element attributes

Innate properties of the operating structure

Setting: element.attribute = value; if not found, returns an 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);