JavaScriptの基本的なインタラクションの詳細な説明

  var box = document.getElementById("box1");
        console.log(box);//<div id="box1">私は DIV です</div>
        var box = document.getElementById("box2");
        console.log(ボックス); //null
        var myH2 = document.getElementById("my-h2");
        コンソールにログ出力します。

 var テスト = document.getElementsByClassName("テスト");
        console.log(テスト);
        console.log(tests.length); //長さを取得します //コンソールに直接出力します console.log(tests[0]);
        コンソールにログ出力します。
        console.log(テスト[テストの長さ - 1]);
        // 保存します var oDiv = tests[0];
        var oH2 = テスト[1];
        コンソールにログ出力します。
        var test1 = document.getElementsByClassName("test1");
        コンソールにログ出力します。
        コンソールにログ出力します。
        console.log(test1[1]); //このサブタイトルまたはインデックスがない場合は、コレクション内の位置が初期化されていないか、undefined の場合は undefined が返されます。
        var hello = document.getElementsByClassName("hello");
        console.log(hello, hello.length);
        console.log(hello[0]); //未定義

   タグ名によって要素を取得するには、 oLis メソッドを使用します。
        コンソールにログ出力します。
        // 長さを取得します console.log(oLis.length);
        // 特定の要素を取得します console.log(oLis[0]);
        コンソールログ(oLis[1]);
        コンソールログ(oLis[2]);
        コンソールにログ出力します。

// ol の下の li を取得します
        // 親要素を取得します。var wrap = document.getElementById("wrap");
        コンソールログ(ラップ);
        // var oLis = wrap.getElementsByClassName("test");
        var oLis = wrap.getElementsByTagName("li");
        コンソールにログ出力します。
        console.log(oLis.length);
        コンソールにログ出力します。
        コンソールログ(oLis[1]);
        コンソールにログ出力します。
        // ul の下の li を取得します
        // 親を取得します var wrap1 = document.getElementsByClassName("wrap");
        コンソールログ(ラップ1);
        コンソールログ(wrap1[0]);
        コンソールログ(wrap1[1]);
        // var ullis = wrap1[1].getElementsByClassName("test");
        var ullis = wrap1[1].getElementsByTagName("li");
        コンソールにログ出力します。
        console.log(ullis.length);
        コンソールにログ出力します。
        コンソールにログ出力します。
        コンソールにログ出力します。

  <div id="box"></div>
    <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <スクリプト>
   var box = document.getElementById("box");
   コンソールログ(ボックス);
   var myUl = document.getElementById("myUl")
   コンソールにログ出力します。
   var oLis = myUl.getElementsByTagName("li");
   コンソールにログ出力します。
            // - onclick クリックイベント box.onclick = function() {
                console.log("クリック");
            }
            // - ondblclickダブルクリックイベント oLis[0].ondblclick = function() {
                console.log("ダブルクリックイベント");
            }
            // - onmousedown マウスが押された oLis[1].onmousedown = function() {
                console.log("マウスが押されました");
            }
            // - onmouseup マウスが上がる oLis[1].onmouseup = function() {
                console.log("マウスを離す");
            }
            // - onmousemove マウス移動 oLis[1].onmousemove= function() {
                console.log("マウスの移動");
            }
            // - oncontextmenu 右クリック oLis[2].oncontextmenu = function() {
                console.log("右クリック");
            }
            // - onmouseover マウスが移動します myUl.onmouseover = function() {
                console.log("マウスが移動しました");
            }
            // - onmouseout マウスが外に出る myUl.onmouseout = function() {
                console.log("マウスアウト");
            }
            // - onmouseenter マウスが入る myUl.onmouseenter = function() {
                console.log("マウス入力");
            }
            // - onmouseleave マウスが離れる myUl.onmouseleave = function() {
                console.log("マウスが離れる");
            }
    </スクリプト>

// 要素を取得する var inputs = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("ボタン")[0];
console.log(入力、btn);
// 2つの入力ボックスの合計を3番目の入力ボックスに表示します // イベントをバインドします // 関数内のコードは、イベントがクリックされるたびに再実行されます btn.onclick = function () { // 実行する内容 // 2つの入力ボックスの値を取得します var oneVal = inputs[0].value;
    var twoVal = 入力[1].値;
    コンソールにログ出力します。
    // 文字列に遭遇したら、まずそれを数値に変換します。var total = parseFloat(oneVal) + parseFloat(twoVal);
    console.log(合計);
    // 3番目の入力ボックスに合計を設定します。inputs[2].value = total;
}

タグ名で要素を取得する
var h2 = document.getElementsByTagName("h2")[0];
var p = document.getElementsByTagName("p")[0];
コンソールにログ出力します。
// 設定: フォーム要素.innerText/innHTML = value;
// 後者の設定は前者をカバーします // div.innerText = "I am div";
// div.innerText = "<h6>私はdivです</h6>";
// div.innerHTML = "私はdivです";
div.innerHTML = "<h6><a href='https://www.baidu.com'>私はdivです</a></h6>";
h2.innerHTML = "私はH2です";
// 取得: フォーム要素.innerText/innHTML;  
console.log(div.innerText);//私はdivです
console.log(div.innerHTML);//<h6><a href="https://www.baidu.com">私はdivです</a></h6>
コンソールにログ出力します。
コンソールにログ出力します。

// 要素を取得します var div = document.getElementsByTagName("div")[0];
// div.className = "myBox" を設定します。
div.title = "私はdivです";
// 取得 console.log(div.id);
console.log(div.className);
コンソールにログ出力します。