ヒント：btn.addEventListenerは関数のエラー処理ではありません

あなた自身の言葉で興味深い知識を教えてください。みなさん、こんにちは梅巴哥er。この記事document.getElementsByClassName('xxx')では、エラー処理合計の使用法を紹介します。

本日、使用中にgetElementsByClassNameエラーが発生したとの投稿がありましたが、解決しても理由が明らかになっていないので、エラーの原因、解決策、DOM要素の取得方法をまとめます。みんなの疑問を解決するために。

参考資料：

MDN / getElementsByClassNameの使用法

エラーの例：

// 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByClassName用法</title>
</head>
<body>
    <button class="btn">点击</button>
    <script type="text/javascript">
        var btn = document.getElementsByClassName('btn')
        btn.addEventListener('click', function() {
    
    
            alert('别点我')
        })
    </script>
</body>
</html>

このとき、エラーが報告されます。Uncaught TypeError: btn.addEventListener is not a function

どうして？

現時点では、判断後、問題はjsコードにあるはずです。

したがって、コードを変更します。

<script type="text/javascript">
        var btn = document.querySelector('.btn')
        btn.addEventListener('click', function() {
    
    
            alert('别点我')
        })
    </script>

クリックテスト、通常！

次に、問題getElementsByClassNameは使用法にあるに違いありません。

したがって、MDNを開き、入力してクエリを実行します。

太陽を見て、毛沢東は突然開いて気づきました！

getElementsByClassNameそれは要素ノードではなく、要素ノードの配列であることがわかりました！エラーが報告されるのも不思議ではありません。

配列なので、この配列の内容を見てみましょう。

次のようにコードを変更します。

<script type="text/javascript">
        var btn = document.getElementsByClassName('btn')
        console.log(btn)
    </script>

出力は次のとおりです。HTMLCollection [button.btn]

つまり、必要なbtnノードがこの配列に存在します。この配列から必要なノードを取り出して、このノードに監視イベントを追加する必要があります。監視イベントをアレイに直接追加することはできません。

この場合、扱いが簡単で、ノードを取り出すだけです。これはvar btn = document.getElementsByClassName('btn')[0]

このようにして、ノードを取得します。<button class="btn">点击</button>

コードを完成させて、もう一度テストしてみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByClassName用法</title>
</head>
<body>
    <button class="btn">点击</button>
    <script type="text/javascript">
        var btn = document.getElementsByClassName('btn')[0]
        btn.addEventListener('click', function() {
    
    
            alert('别点我')
        })
    </script>
</body>
</html>

ここで、ボタンをクリックすると、「クリックしないでください」というプロンプトボックスがポップアップ表示されます。完璧なソリューション。

JSでは、通常、一般的に使用されるセレクターには次のものが含まれます。

ID：document.getElementById('btn')
カテゴリー：document.getElementsByClassName('btn')[0]
包括的：document.querySelector('选择器')
ラベル付き：document.getElementByTagName('button')
体：document.body
html的：document.html

上記。

ヒント：btn.addEventListenerは関数のエラー処理ではありません

おすすめ