Javascript内容仅可编辑某些类[关闭]答案

【问题标题】：Javascript contentEditable of certain classes only [closed]Javascript内容仅可编辑某些类[关闭]
【发布时间】：2020-10-16 12:57:44
【问题描述】：

我有以下使 HTML 页面可编辑的脚本

document.body.contentEditable = 'true'; document.designMode='on';

我只想允许我的用户编辑具有“编辑”类的部分。这可能吗？

【问题讨论】：

【解决方案1】：

是的，这是可能的。

let el_array = document.getElementsByClassName('edit');

然后循环 el_array 并将其应用于每个元素 el.contentEditable = true;

【讨论】：

【解决方案2】：

是的，这是可能的，只需使用编辑类对所有元素运行一个简单的循环，并为它们设置 contentEditable true

[...document.getElementsByClassName("edit")].forEach(
  el => el.contentEditable = "true"
);

就是这样！

编辑：正如 harry 在 cmets 中提到的：forEach 不适用于 htmlCollection 对象，因此您必须使用 [...theHTMLCollection] 将其转换为数组

【讨论】：

【解决方案3】：

function edit_content(){
  document.querySelectorAll('.myP').forEach(function(ele){
      ele.contentEditable = 'true';
  })
}

<p class="myP">
abcdefghijklmnop
</p>

<button onclick="edit_content()">
Click to edit
</button>

你可以这样做。首先，通过querySelectorAll 选择DOM 中的所有类，然后从forEach 循环中对其进行迭代。

【讨论】：

【解决方案4】：

您可以尝试查找类名为“edit”的所有元素，然后将它们全部更改，如下所示。

document.querySelectorAll('.edit').forEach(function(element){
    element.contentEditable = 'true';
})

【讨论】：