Question

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

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

VS。我最初使用的是什么...

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

...在我切换到'NodeList.item（）'方法后，我开始得到TypeError。附带的图片是chrome dev工具的截图，是一个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>

screenshot of workspace

更新

如下所示，我将案例运算符从＆lt; =更改为＆lt;但无济于事。我仍然得到相同的TypeError：无法读取null类型的属性'appendChild'。下面是更新和结果的屏幕截图：

enter image description here

更新丹的回答：

以下屏幕截图显示了建议的更改。我仍然收到这个错误。

enter image description here

好的，所以我删除了一堆代码，现在它可以工作了。与标题元素创建和追加有关的任何事情都消失了，但我无法看到差异。任何人都可以告诉我，为什么它现在可以工作。奇怪的是，即使已经应用了背景颜色，我仍然得到TypeError，说它无法读取样式属性？！？！

Updated screenshot

Answer 1

你的for循环不好。＆＃34; for（var index = 0; index＆lt; = colors.length; index ++）＆＃34;
你有3个颜色的项目所以你的索引应该只在index小于colors.length时增加所以你需要检查索引＆lt; for循环中的colors.length 见下文。

        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++;
        }

Answer 2

在条件上for循环从<=更改为<，因此它只循环3次而不是4次。在4º循环上，它尝试使用方法appendChild第4节（项目索引4）不存在，产生错误。

// 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++;
}

<div id="page-wrapper">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

Answer 3

类型错误是由错误的for循环condition引起的。 <= 4将在索引4上执行for循环，这将为undefined数组返回colors。

您发布的代码还存在其他问题。

section_header元素创建应移至for循环内部。否则，您将重写相同元素的html并将其移至最后一部分，结果只有第3部分具有部分标题文本。
GetElementsByClassname返回元素数组。您可以简单地使用数组索引来引用元素，而不需要.item
您已经可以访问索引变量，只需添加1即可，而不是手动增加的sectionCount变量。

var colors = ['#455a64','#616161','#5d4037'];

// var sections is an array of  elements with 'section' as classname
var sections = document.getElementsByClassName('section');

for(var index = 0; index < colors.length; index++) {
  var section_header_txt = 'Section #' + ( index + 1 );
  
  // create a new section header element for each section
  var section_header = document.createElement('h1');
  section_header.innerHTML = section_header_txt;
  
  // instead of calling .item, just use array index
  sections[index].appendChild(section_header); 
  sections[index].style.backgroundColor = colors[index].toString();
  sections[index].style.height = '100vh';
}

<div id="page-wrapper">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

Answer 4

谢谢大家和女士，答案是简单地重新安排一些由丹基本发布的线路。 1）我把document.createElement('h1')放在for循环中而不是它上面。 2）我切换到document.createTextNode()而不是Element.innerHTML。 3）至于使用document.getElementsByClassName('section')[0]与document.getElementsByClassName('section').item(0)，我发现两者都有效并产生相同的结果。

正如您在屏幕截图中看到的那样，代码现在可以正常工作，但奇怪的是（至少对我而言）在控制台中我仍然得到相同的TypeError，说明无法读取样式对象。

View of current work results

View of the sources view of the error

如何访问document.getElementsByTagName

4 个答案: