无法使用 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-content

inputs[0].value="first name"

console.log(inputs[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>

...但我也不会这样做：虽然它比使用 childNodes 更容易破坏，但它仍然取决于表单元素的顺序，永远不会改变。

我强烈建议为每个特定的表单字段使用特定的标识符（无论是使用 ID 还是数据属性），而不是在代码中构建对特定布局的依赖性。