开发者问题收集

如何访问 document.getElementsByTagName 中的元素

2017-12-16
1309
javascript getelementsbyclassname nodelist

大家好，节日快乐。希望你们都保持温暖和安全。我来这里是因为我对一些代码有点问题。我不是编程新手，但对 JavaScript 还比较陌生。我已经搜索了这个问题的答案，并在这个网站上找到了答案，但即使在实施了商定的解决方案后，我似乎仍然遇到了问题。抛出的 TypeError 指向首次使用“varsections”变量的行。该行只是将 h1 元素附加到 NodeList 中带有“class="section"”的当前 div。TypeError 数据显示“无法读取 null 的属性 appendChild”，这意味着我没有对 Element 类型节点的正确引用，而我需要该节点才能使用 appendChild() 或样式对象。我只是想弄清楚这到底是怎么回事，但就是不知所措。关于如何使用 getElementsByClassName() 正确获取元素引用，我在另一个帖子中得到的答案是，您只需使用 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 dev tools 的屏幕截图，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>

工作区屏幕截图

更新：

按照下面的建议，我将 case 运算符从 <= 更改为 < 但无济于事。我仍然收到相同的 TypeError：无法读取类型为 null 的属性“appendChild”。这是更新和结果的屏幕截图：

在此处输入图片说明

对 Dan 的回答的更新：

下面的屏幕截图显示了建议的更改的结果。我仍然收到此错误。

在此处输入图片说明

好的，我删除了一堆代码，现在它可以正常工作了。与标题元素创建和附加相关的任何内容都消失了，但我看不出有什么区别。有人能通过查看这个告诉我为什么它现在会起作用吗？奇怪的是，即使已经应用了背景颜色，我仍然收到 TypeError，说它无法读取样式属性？！？！

更新后的屏幕截图

3个回答

您的 for 循环不好。“for(var index = 0; index <= colors.length; index++)”
您有 3 个颜色项，因此只有当 index 小于 colors.length 时，您的 index 才会递增。
因此，您需要在 for 循环中检查 index < 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++;
        }
Creator
2017-12-16

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

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

  1. 应将 section_header 元素创建移至 for 循环内。否则，您将重写同一元素的 html 并将其移至最后一节，导致只有第 3 节具有节标题文本。
  2. GetElementsByClassname 返回元素数组。您可以简单地使用数组索引来引用元素，无需 .item
  3. 您已经可以访问索引变量，您只需向其中添加 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>
Dan
2017-12-16

在 for 循环中，根据条件将 <= 更改为 < ，这样它只循环 3 次而不是 4 次。在 4º 循环中，它尝试对不存在的部分编号 4（项目索引 4）使用方法 appendChild，从而产生错误。 

// 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>
user7393973
2017-12-16