Basic interaction of javascript

Basic syntax: document.getElementById(id value);
- Document: a document that represents the scope of acquisition
- Get: get Element: Element By: pass
Return value: the return specific element is obtained, but null is not returned
The used id can only be obtained under document, and the acquisition range cannot be customized

  var box = document.getElementById("box1");
        console.log(box);//< div id = "box1" > I'm 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: a document that represents the scope of acquisition
- Get: get Elements: Elements (plural) By: pass
Return value: obtained: returns an element collection HTMLCollection, which is composed of indexes and values. 0 corresponds to the first item, 1 corresponds to the second item, and so on. It has its own length attribute, and the index of the last item is set. length -1; Cannot get an empty collection. The length is 0
The length property the length of the collection or the number of elements in the collection
- Set. length;
Gets the concrete element in the collection
- Set [index]

 var tests = document.getElementsByClassName("test");
        console.log(tests);

        console.log(tests.length); //Get length

        // Direct output to 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]); //Without this subscript or index, it means that this position in the collection has not been initialized, or undefined is returned


        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: a document that represents the scope of acquisition
- Get: get Elements: Elements (plural) By: pass
Return value: obtained: returns an element collection HTMLCollection, which is composed of indexes and values. 0 corresponds to the first item, 1 corresponds to the second item, and so on. It has its own length attribute, and the index of the last item is set. length -1; Cannot get an empty collection. The length is 0
The length property the length of the collection or the number of elements in the collection
- Set. length;
Gets the concrete element in the collection
- Set [index]

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

Custom acquisition range

Parent element: must be a concrete element

Parent element. Getelementsbyclassname (class name value);
Parent element. GetElementsByTagName (tag name);

// Get li under ol

        // 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 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[ullis.length - 1]);

2, Mouse event

Binding events are also specific elements and cannot directly operate on collections

onclick click event
Ondbllick double click event
onmousedown mouse down
onmouseup mouse up
onmousemove mouse movement
oncontextmenu right click
onmouseover mouse in
onmouseout mouse out
Onmousenter mouse entry
Onmousesave mouse away

  <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("single click");
            }
            // -Ondbllick double click event
            oLis[0].ondblclick = function() {
                console.log("Double click the 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 movement
            oLis[1].onmousemove= function() {
                console.log("Mouse movement");
            }
            // -oncontextmenu right click
            oLis[2].oncontextmenu = function() {
                console.log("Right click");
            }
            // -onmouseover mouse in
            myUl.onmouseover = function() {
                console.log("Mouse in");
            }
            // -onmouseout mouse out
            myUl.onmouseout = function() {
                console.log("Mouse out");
            }
            // -Onmousenter mouse entry
            myUl.onmouseenter = function() {
                console.log("Mouse entry");
            }
            // -Onmousesave mouse away
            myUl.onmouseleave = function() {
                console.log("Mouse away");
            }
    </script>

onmouseover mouse in / onmouseout mouse out And onmouseenter Mouse entry / onmouseleave Mouse away

difference:

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

Onmousenter and onmousesave: it will only trigger the corresponding thing of its own event, not the corresponding thing of the parent event

3, Element operation

Principle: giving a value is setting, and not giving a value is obtaining

All operations of elements must be concrete elements, and collections cannot be operated directly

1. Operation element content

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

Operation form element content

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

// After multiple assignments, the front edge is overwritten by the rear edge

// Get element
var inputs = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button")[0];
console.log(inputs, btn);

// Displays the sum of the two input boxes to the third input box

// Binding event
// The code in the function is re executed every time the event is clicked
btn.onclick = function () { //Do what
    // Gets the value of both input boxes
    var oneVal = inputs[0].value;
    var twoVal = inputs[1].value;
    console.log(oneVal, twoVal);

    // When a string is encountered, it means that the splicing is converted to a number first
    var total = parseFloat(oneVal) + parseFloat(twoVal);
    console.log(total);

    // Set and to the third input box
    inputs[2].value = total;
}

Operate normal closed label

Setting: form element. innerText/innHTML = value;
Get: form element. innerText/innHTML;
Difference: innerText can only recognize text, while innehtml 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 back edge setting overrides the front edge
// 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'm div < / a > < / H6 > ";
h2.innerHTML = "I am H2";

// Get: form element. innerText/innHTML;  
console.log(div.innerText);//I'm div
console.log(div.innerHTML);//<h6><a href=" https://www.baidu.com "> I'm div < / a > < / H6 >
console.log(p.innerText);
console.log(p.innerHTML);

2. Operation element attribute

Inherent attributes on the operation structure

Setting: element. Attribute = value; cannot get return empty string
Get: element. Attribute;

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

// Get element
var div =  document.getElementsByTagName("div")[0];

// set up
div.className = "myBox";
div.title = "I am div";

// obtain
console.log(div.id);
console.log(div.className);
console.log(div.title);

Posted by kwilder on Wed, 20 Oct 2021 12:03:09 -0700

Programmer Group