Detaillierte Erklärung der grundlegenden Interaktion von Javascript

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

 var Tests = document.getElementsByClassName("Test");
        konsole.log(tests);
        console.log(tests.length); //Länge abrufen // Direkt auf der Konsole ausgeben console.log(tests[0]);
        konsole.log(tests[1]);
        console.log(tests[tests.länge - 1]);
        // Speichern Sie es var oDiv = tests[0];
        var oH2 = Tests[1];
        console.log(oDiv, oH2);
        var test1 = document.getElementsByClassName("test1");
        Konsole.log(Test1, Test1.Länge);
        console.log(test1[0]);
        console.log(test1[1]); //Das Fehlen dieses Untertitels oder Indexes ist gleichbedeutend damit, dass die Position in der Sammlung nicht initialisiert wurde, oder undefined gibt undefined zurück
        var hallo = document.getElementsByClassName("hallo");
        console.log(hallo, hallo.länge);
        console.log(hallo[0]); //undefiniert

   var oLis = document.getElementsByTagName("li");
        console.log(oLis);
        // Länge abrufen console.log(oLis.length);
        // Das spezifische Element abrufen console.log(oLis[0]);
        console.log(oLis[1]);
        console.log(oLis[2]);
        console.log(oLis[oLis.length - 1]);

// Hol dir das li unter ol
        // Das übergeordnete Element abrufen var wrap = document.getElementById("wrap");
        Konsole.log(Wrap);
        // var oLis = wrap.getElementsByClassName("test");
        var oLis = wrap.getElementsByTagName("li");
        console.log(oLis);
        Konsole.log(oLis.length);
        console.log(oLis[0]);
        console.log(oLis[1]);
        console.log(oLis[oLis.length - 1]);
        // Hol dir das li unter ul
        // Die übergeordnete Variable abrufen wrap1 = document.getElementsByClassName("wrap");
        Konsole.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);
        Konsole.log(ullis.length);
        console.log(ullis[0]);
        console.log(ullis[1]);
        console.log(ullis[ullis.length - 1]);

  <div id="box"></div>
    <ul id="meineUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <Skript>
   var box = document.getElementById("box");
   konsole.log(box);
   var meineUl = document.getElementById("meineUl")
   console.log(meineUl);
   var oLis = myUl.getElementsByTagName("li");
   console.log(oLis);
            // - onclick Klickereignis box.onclick = function() {
                console.log("klicken");
            }
            // - ondblclick Doppelklick-Ereignis oLis[0].ondblclick = function() {
                console.log("Doppelklick-Ereignis");
            }
            // - onmousedown Die Maus wird gedrückt oLis[1].onmousedown = function() {
                console.log("Maus gedrückt");
            }
            // - onmouseup Die Maus wird angehoben oLis[1].onmouseup = function() {
                console.log("Maus hoch");
            }
            // - onmousemove Mausbewegungen oLis[1].onmousemove= function() {
                console.log("Mausbewegung");
            }
            // - oncontextmenu Rechtsklick oLis[2].oncontextmenu = function() {
                console.log("Rechtsklick");
            }
            // - onmouseover Die Maus bewegt sich in myUl.onmouseover = function() {
                console.log("Maus bewegt sich hinein");
            }
            // - onmouseout Die Maus bewegt sich raus myUl.onmouseout = function() {
                console.log("Maus raus");
            }
            // - onmouseenter Die Maus betritt myUl.onmouseenter = function() {
                console.log("Maustaste eingeben");
            }
            // - onmouseleave Die Maus verlässt myUl.onmouseleave = function() {
                console.log("Maus geht");
            }
    </Skript>

// Elemente abrufen var inputs = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("Schaltfläche")[0];
konsole.log(Eingaben, btn);
// Die Summe der beiden Eingabefelder im dritten Eingabefeld anzeigen // Ereignis binden // Der Code in der Funktion wird jedes Mal erneut ausgeführt, wenn auf das Ereignis geklickt wird btn.onclick = function () { // Was ist zu tun // Die Werte der beiden Eingabefelder abrufen var oneVal = inputs[0].value;
    var twoVal = Eingaben[1].Wert;
    console.log(einWert, zweiWerte);
    // Wenn Sie auf einen String stoßen, konvertieren Sie ihn zuerst in eine Zahl. var total = parseFloat(oneVal) + parseFloat(twoVal);
    konsole.log(gesamt);
    // Setze die Summe in das dritte Eingabefeld inputs[2].value = total;
}

var div = document.getElementsByTagName("div")[0];
var h2 = document.getElementsByTagName("h2")[0];
var p = document.getElementsByTagName("p")[0];
Konsole.log(div, h2,p);
// Einstellung: Formularelement.innerText/innHTML = Wert;
// Die letzteren Einstellungen decken die ersteren ab // div.innerText = "Ich bin div";
// div.innerText = "<h6>Ich bin div</h6>";
// div.innerHTML = "Ich bin div";
div.innerHTML = "<h6><a href='https://www.baidu.com'>Ich bin div</a></h6>";
h2.innerHTML = "Ich bin H2";
// Holen: Formularelement.innerText/innHTML;  
console.log(div.innerText);//Ich bin div
console.log(div.innerHTML);//<h6><a href="https://www.baidu.com">Ich bin div</a></h6>
console.log(p.innerText);
Konsole.log(p.innerHTML);

//Element abrufen var div = document.getElementsByTagName("div")[0];
// Setze div.className = "myBox";
div.title = "Ich bin div";
// Holen Sie sich console.log(div.id);
Konsole.log(div.Klassenname);
Konsole.log(div.Titel);