Javascript 如何访问document.getElementsByTagName中的元素_Javascript_Getelementsbyclassname_Nodelist

Javascript 如何访问document.getElementsByTagName中的元素

javascript

Javascript 如何访问document.getElementsByTagName中的元素,javascript,getelementsbyclassname,nodelist,Javascript,Getelementsbyclassname,Nodelist,大家好，节日快乐。我希望你们都保持温暖和安全。我在这里是因为我对一些代码有点问题。我对编程并不陌生，但对JavaScript却相当陌生。我已经搜索了这个问题的答案，并在这个网站上找到了它，但我似乎有一个问题，即使在执行商定的解决方案。抛出的TypeError指向第一次使用“var sections”变量的行。该行只是将h1元素附加到当前div，并在节点列表中使用“class=”section“。TypeError数据显示“无法读取属性appendChild of null”，这意味着我没有对类型

大家好，节日快乐。我希望你们都保持温暖和安全。我在这里是因为我对一些代码有点问题。我对编程并不陌生，但对JavaScript却相当陌生。我已经搜索了这个问题的答案，并在这个网站上找到了它，但我似乎有一个问题，即使在执行商定的解决方案。抛出的TypeError指向第一次使用“var sections”变量的行。该行只是将h1元素附加到当前div，并在节点列表中使用“class=”section“。TypeError数据显示“无法读取属性appendChild of null”，这意味着我没有对类型元素的节点的正确引用，而使用appendChild（）或style对象需要该节点。我只是想弄清楚这有什么问题，但我实在是不知所措。我在另一个线程中得到的关于如何使用getElementsByCassName（）正确获取元素引用的答案是，您只需使用NodeList对象的“item（）”方法，如下所示：

var sections = document.getElementsByClassName('section');
var section_header = document.createElement('h1');
sections.item(0).appendChild(section_header);

与我最初使用的

var sections = document.getElementsByClassName('section');
var section_header = document.createElement('h1');
sections[0].appendChild(section_header);

。。。在我切换到'NodeList.item（）'方法之后，我开始得到TypeError。所附图片是chrome开发工具的屏幕截图，是sublime的一个实例，在文本编辑器中打开的页面就是在chrome中打开的页面（一个黑色背景的空白页面）。我这样做只是为了学习，所以不是为了一个项目或任何东西。这只是便笺簿代码。我希望这篇文章符合论坛的政策，因为我知道一个商定的答案是可用的，但正如你们所看到的，有些地方仍然是错误的。提前感谢大家的时间和建议，非常感谢

下面是我实际使用的测试代码，可以在sublime中打开的屏幕截图中看到。只是为了抛开它，我确实尝试过移动脚本标记本身（例如，在头部，在主体开口下方和主体闭合标记上方），但错误仍然存在：

<html>
    <head>
        ...
    </head>
    <body>
        <div id="page-wrapper">
            <div class="section">

            </div>
            <div class="section">

            </div>
            <div class="section">

            </div>
        </div>
        <script type="text/javascript">
            // Colors to be applied to each sections background.
            var colors = ['#455a64','#616161','#5d4037'];

            // The sections.
            var sections = document.getElementsByClassName('section');

            // The header tag to add to each section.
            var section_header = document.createElement('h1');

            // The count to be added to each sections title ex. <h1>Section Title #1.</h1>
            var section_count = 1;

            for(var index = 0; index <= colors.length; index++) {
                // The text to be added to each sections header.
                var section_header_txt = 'Section #' + section_count;
                // Add the text with the incremented section count to the sections h1 element.
                section_header.innerHTML = section_header_txt;
                // Append the section header to its new section parent.
                sections.item(index).appendChild(section_header); // This is where the TypeError is thrown. 
                // Add styles to each new section.
                sections.item(index).style.backgroundColor = colors[index].toString();
                sections.item(index).style.width = '100%';
                sections.item(index).style.height = '100vh';
                // Raise the section title count by 1.
                section_count++;
            }
        </script>
    </body>
</html>


...
//要应用于每个部分背景的颜色。
变量颜色=['#455a64'、'#616161'、'#5d4037']；
//各部分。
var sections=document.getElementsByClassName（'section'）；
//要添加到每个节的标题标记。
var section_header=document.createElement（'h1'）；
//要添加到每个章节标题的计数，例如章节标题#1。
var区段计数=1；
for（var index=0；index你的for循环不好。）for（var index=0；index在for
循环上从更改为类型错误是由不正确的for
循环条件造成的感谢各位朋友，答案是简单地按照Dan的帖子重新安排一些行。
1） 我将document.createElement（'h1'）放在for循环的内部，而不是上面。
2） 我切换到document.createTextNode（）
而不是使用Element.innerHTML。
3） 至于使用document.getElementsByClassName（'section'）[0]
与document.getElementsByClassName（'section'）.item（0）
，我发现两者都起作用并产生相同的结果
正如您在屏幕截图中看到的，代码现在可以工作了，但奇怪的是（至少对我来说），在控制台中，我仍然收到相同的类型错误，表示无法读取样式对象

关于从到ahhh的for循环更改，我想我试过了，但让我再试一次。谢谢，我会带着结果的屏幕截图回来。非常感谢您的回复，这也是我认为在某个时候应该做的，但正如您在更新的屏幕截图中看到的，仍然存在这个令人讨厌的类型错误。我觉得一切都很合理，但是。。…？@user8645420我认为您需要删除var节_header_txt='section#'+（索引+1）；因此它应该是var节_header_txt='section#'+（索引）；你试过我的代码吗？@user8645420你也试过使节计数从0开始吗？现在你已经从1开始了。嘿user8645420抱歉，是的，我试过你的代码。我特意添加了（索引+1）以便每个节头都能正确编号。如果索引上没有+1，第一节头将被标记为“节0”“因为索引是用来循环一个数组的，它从0开始。看看我更新的屏幕截图，我得到了代码，但我仍然得到了错误。谢谢，我想我有点强迫症。”。我喜欢总是把所有东西都存储在变量中，以防我再次使用它，但这是完全不必要的。
        for(var index = 0; index < colors.length; index++) {
            // The text to be added to each sections header.
            var section_header_txt = 'Section #' + section_count;
            // Add the text with the incremented section count to the sections h1 element.
            section_header.innerHTML = section_header_txt;
            // Append the section header to its new section parent.
            sections.item(index).appendChild(section_header); // This is where the TypeError is thrown. 
            // Add styles to each new section.
            sections.item(index).style.backgroundColor = colors[index].toString();
            sections.item(index).style.width = '100%';
            sections.item(index).style.height = '100vh';
            // Raise the section title count by 1.
            section_count++;
        }