阶段 1：显示所有隐藏字段

具有通用类名的多个元素

类 .dom-admin 仅用于展示，不是一种安全措施。如果您想要访问 className 为 dom-admin 的多个元素，则必须将它们收集到 NodeList/HTMLCollection 中：

var DOMObjects = document.querySelectorAll('.dom-admin');

或

var DOMObjects = document.getElementsByClassName('dom-admin');

使用此列表，您必须通过 for 循环或数组方法（如果是后者，则可能需要将列表转换为数组）迭代/循环遍历每个 *.dom-admin ：

for (let i=0; i < DOMObjects.length; i++) {...

或

DOMObjects.forEach(function(DOMObj, index) {...

要反转 .dom-admin 的样式，您可以将每个 *.dom-admin style 对象设置为：

DOMObj.style.display = "block"

或删除 .dom-admin class:

DOMObj.classList.remove('dom-admin')

具有 ClassName 的单个元素

最直接的方法是通过 querySelector() 或 getElementsByClassName()[0] 定位 className：

var DOMObj = document.querySelector('.dom-admin');

或

var DOMObj = document.getElementsByClassName('dom-admin')[0];

第 2 阶段：将所有显示的字段设置为不可编辑

设置/获取/更改元素属性

id 、 class 、 readOnly 等称为属性。所需属性具有布尔值（true/false）。 readonly 等属性只需存在于标签上即可为 true。当然，如果实际上不在标签中，则会导致错误。

设置属性 更具体地说，在元素中不存在属性时添加该属性：

DOMObj.setAttribute('readonly', true);

获取属性 查找属性并读取该属性的值：

DOMObj.getAttribute('readonly');

更改属性 如果属性已经存在，并且需要更改值：

DOMObj.removeAttribute('readonly')

请记住，您正在处理的属性具有布尔值，因此处理方式与具有字符串值的属性不同。

DOMObj.setAttribute('name', 'foo'); /*OR*/ DOMObj.name = "foo"

DOMObj.getAttribute('name');

DOMObj.setAttribute('name', 'bar') /*OR*/ DOMObj.name = 'bar'

注释 1

方法的语法 querySelector() / querySelectorAll() :

document.querySelector('.dom-admin')

CSS 选择器 ===========^-----^[类的点]

与方法 getElementsByClassName() 的语法不同：

document.getElementsByClassName('dom-admin')

DOMString======================^------^[不需要点]

document.getElementsByClassName('dom-admin')[0]

DOMString======================^------^===^-^[不需要点]==

[如果只有一个目标，则需要使用索引为零的括号表示法]

注意2

除非您打算销毁页面上的所有内容，否则请勿使用 document.write 。

如果您在 div.dom-admin 中嵌套了输入，则意味着这些输入已经存在 但用户无法看到它们 。没有必要创建它们，即使您确实需要创建任何元素，也不要使用 document.write 。而是使用 createElement() 或在打算用作容器的元素上使用 innerHTML 。

演示

// Collect all .dom-admin into NodeList
var das = document.querySelectorAll('.dom-admin');

// forEach() .dom-admin, remove the class .dom-admin
das.forEach(function(da, idx) {
  da.classList.remove('dom-admin');

  // Find all inputs in the div formerly known as .dom-admin
  var inputs = da.querySelectorAll('input');

  /* forEach() input nested within the div formerly known 
  || as .dom-admin, set its attribute readonly to true
  */
  inputs.forEach(function(input, index) {
    input.setAttribute('readonly', true);
  });
});

.dom-admin {
  display: none;
}

input {
  font: inherit;
  width: 40%
}

<div class="dom-admin">
  <input type='text' value='These inputs exist already'>
  <input type='text'>
</div>

<div class="dom-admin">
  <input type='text' value='Do not use document.write'>
  <input type='text' value='it will overwite EVERYTHING'>
  <input type='text' value=''>
</div>

<div class="dom-admin">
  <input value='Fun fact:'>
  <input value='input by default is type="text"'>
  <input>
</div>

以下是我用来实现您想要的东西。

正如其他人提到的，使用 document.querySelector('.dom-admin') 来访问该类，当您更改 display 样式时，您可以使用 if 语句

let admin = document.querySelector('.dom-admin');
if (admin.style.display === 'none') {
  document.write('<input type="text" id="XX">');
} else {
  document.write('<input readonly type="text" id="XX">');
}

.dom-admin {
  width: 200px;
  display: none;
}

<div class="dom-admin">
  <form action="#">
    <input type="text" id="user" />
    <input type="number" id="user_number" />
    <input type="password" id="user_password" />
    <input type="submit" id="submit" />
  </form>
</div>