使节点列表内容的成员可编辑？答案

【问题标题】：Making members of a node list content editable?使节点列表内容的成员可编辑？
【发布时间】：2021-10-07 11:58:05
【问题描述】：

我一直在编写一段代码，该代码涉及通过按一下按钮来打开和关闭无序列表的 contenteditable。到目前为止，我一直在访问无序列表本身，并切换内容可编辑。但问题是这使得可以创建和删除列表项，这是我不想要的。而且我不能单独手动更改每个项目的可编辑内容，因为列表项的数量会根据另一个按钮而改变。

最近我一直在摆弄节点列表来访问所有子列表，特别是使用：

var list = document.querySelector(".days").childNodes;

这给了我一个节点列表，其中包含列表中的所有项目（天是无序列表的类）。但是，我似乎无法弄清楚如何为每个列表项切换内容可编辑。我知道您可以像访问数组一样访问节点列表的成员，但是检查成员是否为 contenteditable 或更改其 contenteditable 不起作用。

function myfunction()
    {
      var list = document.querySelector(".days").childNodes;
     
        if(list[1].contentEditable == "false")
        {
            for(var i = 0; i < list.length; i++)
            {
                list[i].contentEditable = true;
            }
        }
   }

创建变量列表后，javascript 立即停止工作。

我是否缺少某种符号，或者我误解了节点的工作方式？有没有更好的方法来更改无序列表的所有子项的 contenteditable？

【问题讨论】：

你为什么只使用 list[1].contentEditable == "false" 中的第二个元素？

标签： javascript html contenteditable nodelist

【解决方案1】：

nodeList 不是真正的数组的问题。你不能真正把它当作一个数组来对待。它没有数组方法。您必须将 nodeList 转换为真正的 JS 数组。

当我使用 nodeList 时，我创建了一个方法，每当我执行 querySelectorAll 时，我都会使用它来执行此操作。

nodeListToArray( selected ) {
    return [].slice.call( selected );
};

我就这样使用它。

NodeListToArray( querySelectorAll('a') );

这将为您提供所有选定项目的数组集合。

我是你的情况。你会这样做。

var list = nodeListToArray( document.querySelector(".days"));

list.forEach( day => {
  day.contentEditable = !day.contentEditable;
});

【讨论】：