时间戳

首页 > 解决方案 > 如何访问 childNodes 中的属性？

javascript - 如何访问 childNodes 中的属性？

问题描述

我一直在寻找正确的问题，我找到了一些答案，但这并没有解决我的问题。我在谷歌上搜索了 JS 属性的最佳实践以及如何使用它们，但我找不到任何有价值的解决方案。

我一直在学习 JS，现在我正在尝试了解 childNods 是如何工作的。我做了一个简单的循环，迭代一个数组：

button.addEventListener('click', function(e){
var text = document.querySelector('#div');
var arr = text.childNodes;
var arrLength = arr.length;

//style and innerHTML both properties

    for(var i = 0; i < arrLength; i++){
        arr[i].innerHTML = "John john"; //Works
        arr[i].style.color = "red"; //Doesnt work
    }
});

这是简单的 div 容器代码：

<div id="div">
    <h3>John</h3>
    <h3>John</h3>
</div>

如您所见，我的style.color属性没有被应用，但innerHTML属性正在被应用。调用两个不同的属性，一次导致错误而另一个属性正常工作的原因是什么？也许有一些我找不到的最佳实践示例或教程，有人想分享。或者也许有人对如何在 JS 中调用属性有一些提示或一些特定规则，我现在很困惑

标签： javascript

解决方案

childNodes 获取所有子节点，包括文本和评论节点：

https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

而是children仅用于元素节点

var arr = text.children;

控制台应该给出一个错误：

TypeError: arr[i].style is undefined

所以你可能应该在未来检查

推荐阅读