getElementsByClassName不起作用

getElementsByClassName is not working

本文关键字：不起作用 getElementsByClassName      更新时间：2023-09-26

我是JavaScript的初学者，有人能帮我的脚本出了什么问题吗。我正在努力了解亚洲的所有国家，这些国家以字母表"b"开头。下面是我的html文档。以下文档显示了警报框中以字母"b"开头的所有亚洲国家。

<!DOCTYPE html>
<html>
    <head>
        <title>Get Element By class name</title>
    </head>
    <body>
        <p id="countriesInAsia">
            <h1>Countries in Asia</h1>
            <ol class = "a">
                <li>India</li>
                <li>Indonesia</li>
                <li>Iran</li>
                <li>Iraq</li>
                <li>Israel</li>
            </ol>
            <ol class = "b">
                <li>Bahrain</li>
                <li>Bangladesh</li>
                <li>Bhutan</li>
                <li>Brunei</li>
            </ol>
        </p>
        <p id="countriesInEurope">
            <h1>Countries in Europe</h1>
            <ol class = "a">
                <li>Albania</li>
                <li>Andorra</li>
                <li>Armenia</li>
                <li>Austria</li>
                <li>Azerbaijan</li>
            </ol>
            <ol class = "b">
                <li>Belarus</li>
                <li>Belgium</li>
                <li>Bosnia and Herzegovina</li>
                <li>Bulgaria</li>
            </ol>
        </p>

        <script>
            var countriesInAsia = document.getElementById("countriesInAsia");
            var countries = countriesInAsia.getElementsByClassName("b");
            var message = "Countries in Asia starts with alphabet b are : ";
            for(var i = 0; i < countries.length; i++){
                message = message + countries[i].textContent;
            }
            alert(message);
        </script>
    </body>
</html>

p标签不能包含ol，因此需要将p更改为div:

<!DOCTYPE html>
<html>
    <head>
        <title>Get Element By class name</title>
    </head>
    <body>
        <div id="countriesInAsia">
            <h1>Countries in Asia</h1>
            <ol class = "a">
                <li>India</li>
                <li>Indonesia</li>
                <li>Iran</li>
                <li>Iraq</li>
                <li>Israel</li>
            </ol>
            <ol class = "b">
                <li>Bahrain</li>
                <li>Bangladesh</li>
                <li>Bhutan</li>
                <li>Brunei</li>
            </ol>
        </div>
        <div id="countriesInEurope">
            <h1>Countries in Europe</h1>
            <ol class = "a">
                <li>Albania</li>
                <li>Andorra</li>
                <li>Armenia</li>
                <li>Austria</li>
                <li>Azerbaijan</li>
            </ol>
            <ol class = "b">
                <li>Belarus</li>
                <li>Belgium</li>
                <li>Bosnia and Herzegovina</li>
                <li>Bulgaria</li>
            </ol>
        </div>

        <script>
            var countriesInAsia = document.getElementById("countriesInAsia");
            var countries = countriesInAsia.getElementsByClassName("b");
            var message = "Countries in Asia starts with alphabet b are : ";
            for(var i = 0; i < countries.length; i++){
                message = message + countries[i].textContent;
            }
            alert(message);
        </script>
    </body>
</html>

试试这个，它对我有用！

//var countriesInAsia = document.getElementById("countriesInAsia");
 var countries = document.getElementsByClassName("a");

迭代并选择元素的子级

使用文档

使用<div>而不是<p>

最终代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Get Element By class name</title>
    </head>
    <body>
        <div id="countriesInAsia">
            <h1>Countries in Asia</h1>
            <ol class = "a">
                <li>India</li>
                <li>Indonesia</li>
                <li>Iran</li>
                <li>Iraq</li>
                <li>Israel</li>
            </ol>
            <ol class = "b">
                <li>Bahrain</li>
                <li>Bangladesh</li>
                <li>Bhutan</li>
                <li>Brunei</li>
            </ol>
        </div>
        <div id="countriesInEurope">
            <h1>Countries in Europe</h1>
            <ol class = "a">
                <li>Albania</li>
                <li>Andorra</li>
                <li>Armenia</li>
                <li>Austria</li>
                <li>Azerbaijan</li>
            </ol>
            <ol class = "b">
                <li>Belarus</li>
                <li>Belgium</li>
                <li>Bosnia and Herzegovina</li>
                <li>Bulgaria</li>
            </ol>
        </div>
        <script>
            var countriesInAsia = document.getElementById("countriesInAsia");
            var countries = countriesInAsia.getElementsByClassName("b");
            var message = "Countries in Asia starts with alphabet b are : ";
            for(var i = 0; i < countries.length; i++){
                 message = message + countries[i].textContent;
            }
            alert(message);
        </script>
    </body>
</html>

相关文章：