如何从节点列表中选择元素值？答案

【问题标题】：How do I select an element value from an Node List?如何从节点列表中选择元素值？
【发布时间】：2019-08-14 22:17:11
【问题描述】：

我在练习中需要帮助。我必须使用特定的 TextNode 创建一个新元素。此 TextNode 是来自两个输入的值。当我单击提交按钮时，FirstName 和 LastName 使用该值创建一个新段落。我尝试做很多事情都没有成功。结果不显示。

这是sn-p代码：

(function() {
    'use strict'

    var $form = document.getElementById('form1');
    var $names = document.getElementsByTagName('input');
    var $button = document.getElementById('press');

    $button.addEventListener('click', getValueName);

    function getValueName() {
        for(var i = 0; i<$names.length; i++) { 
            $names[i]; 
        } 
    
        var output=document.createTextNode('$names.value[0]' +
        '$names.value[1]' ); 
        var novop=document.createElement('p');
        novop.appendChild(output); 
        $form.appendChild(novop); 
    }
})();

<form id="form1" onsubmit="getFormvalue()">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <button id="press" type="submit" value="Submit">Submit</button>
</form>

【问题讨论】：

将所有内容放在 for 循环中，将循环步进 2，并检索 $names.value[i] 和 $names.value[i + 1] 而不是固定索引。
当您在循环中说出所有内容时，您是在说所有函数 getValueName？还是 var output ，只有？

标签： javascript dom dom-events nodelist createtextnode

【解决方案1】：

你做错的是从值数组中获取值

names.value[0] + names.value[1]

虽然数组是有名字的

名称[0].value + 名称[1].value

function getFormvalue() {

  var formData = document.getElementsByTagName('body')[0];
  var names = document.getElementsByTagName('input');
  var output = document.createTextNode(names[0].value + names[1].value);
  var novop = document.createElement('p');
  novop.appendChild(output);
  formData.appendChild(novop);
}

<body>
  First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br>
  <button id="press" type="submit" value="Submit" onclick="getFormvalue()">Submit</button>
</body>

【讨论】：

我认为有趣的是你不需要循环并且你可以做到：name[0]、name[1].amazing。你能解释一下为什么吗？我是 JavaScript 新手，所以我很想知道原因。非常感谢你在高级
原因是因为您已经知道变量names 恰好存储了两个项目，它们与整个 HTML 表单上的两个输入相匹配。所以names[0] 引用第一个输入，names[1] 引用第二个输入。数组索引从 0 开始。如果您的表单有多个输入，理想的解决方案是使用 for 或另一个循环，因为手动放置对每个索引的所有引用对于将来的维护目的来说是一个坏主意，而且非常痛苦;想象一下，如果您的表单有数百个输入会发生什么！

【解决方案2】：

也许原始代码有点不同，但试试这个解决方案。

function getFormvalue() {
    'use strict'

    var $form = document.getElementById('form1');
    var $names = document.getElementsByTagName('input');
    var $button = document.getElementById('press');

    var output=document.createTextNode("");
    for(var i = 0; i<$names.length; i++) { 
        output.textContent += $names[i].value; 
    } 
    
    var novop=document.createElement('p');
    novop.appendChild(output); 
    $form.appendChild(novop); 
    
    return false;
}

<form id="form1" onsubmit="return getFormvalue();">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <button id="press" type="submit" value="Submit">Submit</button>
</form>

如果您想用更少的代码获得相同的结果，这是一个理想的解决方案：

function getFormvalue(){
  var $form = document.getElementById('form1');
  var $names = document.getElementsByTagName('input');
  
  $form.innerHTML += "<p>" + $names[0].value + " " + $names[1].value + "</p>";
  
  return false;
}

<form id="form1" onsubmit="return getFormvalue();">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <button id="press" type="submit" value="Submit">Submit</button>
</form>

您可以了解更多关于HTML DOM innerHTML Property

【讨论】：