无法使用 childNodes(DOM) 为输入字段提供输入值

Question

我必须仅使用 dom 提供输入，即与 childNodes 一起使用。我不能使用 document.getElement By ID 到名字和所有其他输入输入字段。这是我到目前为止所尝试的。它显示了我在控制台中使用 DOM 设置的值但不在输入字段中。

var inp=document.getElementById("form-content");

inp.childNodes[0].value="IsatAvalue";

console.log(inp.childNodes[0].value);

<div>

    <h1>DOM</h1>

    <div id="form-content" class="content"

    ><br><label for="first-name">First Name</label>

    <br><input type="text" id="first-name"/>

    <label for="last-name"><br>Last Name</label>

    <br><input type="text" id="last-name"/>

    <label for="email"><br>Email</label>

    <br><input type="text" id="email" />

    </div>

    <div id="main-content" class="content">

    <p class="render">First Name : Alex</p>

    <p class="render" id="lastName">Last Name: Bank</p>

    <p class="render"> Email : [e-mail]</p>

    <p class="render"> Country : Pakistan </p>

    <p class="render"> contact : [phone]</p>

    </div>

</div>

Answer 1

childNodes将包括元素的所有子节点，包括文本节点。（例如，您inp.childNodes[0]实际上指的是第一个<br>.您绝对不想在 childNodes 上使用数组索引来标识表单输入；您的代码将非常脆弱，并且基本上只要有人编辑 HTML 就会中断（只需在节点之间添加一些文本就足以更改索引号。）您可以通过仅选择您想要的特定标签类型的元素来稍微改进这一点：var inputs = document.querySelectorAll('#form-content input'); // select all inputs inside #form-contentinputs[0].value="first name"console.log(inputs[0].value)<div>&nbsp; &nbsp; <h1>DOM</h1>&nbsp; &nbsp; <div id="form-content" class="content"&nbsp; &nbsp; ><br><label for="first-name">First Name</label>&nbsp; &nbsp; <br><input type="text" id="first-name"/>&nbsp; &nbsp; <label for="last-name"><br>Last Name</label>&nbsp; &nbsp; <br><input type="text" id="last-name"/>&nbsp; &nbsp; <label for="email"><br>Email</label>&nbsp; &nbsp; <br><input type="text" id="email" />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="main-content" class="content">&nbsp; &nbsp; <p class="render">First Name : Alex</p>&nbsp; &nbsp; <p class="render" id="lastName">Last Name: Bank</p>&nbsp; &nbsp; <p class="render"> Email : [e-mail]</p>&nbsp; &nbsp; <p class="render"> Country : Pakistan </p>&nbsp; &nbsp; <p class="render"> contact : [phone]</p>&nbsp; &nbsp; </div></div>...但我也不会这样做：虽然它比使用 childNodes 更容易破坏，但它仍然取决于表单元素的顺序，永远不会改变。我强烈建议为每个特定的表单字段使用特定的标识符（无论是使用 ID 还是数据属性），而不是在代码中构建对特定布局的依赖性。