javascript - 如何获得 4 和 4 <input type 'id' > 的 ="text"

Question

这应该很容易，但在研究了 DOM 并仔细阅读了 SO 上的相关帖子后，我仍然不明白。

我有一个最外面的 div，其中嵌套了 4 个 div。 4 个嵌套 div 中的每一个都有一个嵌套在其中的输入 type="text"。

我在最外面的包含 div 中添加了一个 onclick，以便单击 4 个嵌套 div 或 input type="text"元素中的任何一个都会调用一个“onclick”处理程序。

在 onclick 处理程序中，我还需要获取 4 个文本输入以及 4 个嵌套 div 的 id、名称和值。

这是代码。

  <div class="itemlistRowContainer" id="topmostDiv ID" onclick="handleRowClick(this);"
         name="itemlistRowContainer Div name" value="itemlistRowContainer Div Value">

      <div class="itemListRowElementLeftMost" name="itemListRowElementLeftMost Div name"
         value="itemListRowElementLeftMost Div value">Item<br />

        <input type="text" size="30" maxlength="50" id="itemName_id"
           name="itemName" value="$itemname" readonly="readonly"></input>

      </div>

        // 3 more divs and nested text input pairs not shown for brevity
  </div>

这是 onclick 事件处理程序 - 请注意上面在最外面的 div 中，我将“this”传递给 onclick() 处理程序，从我读到的各种 SO 帖子中，我相信“this”将最外面的 div 本身传递给onclick 处理程序:

   function handleRowClick(theElement)
   {

        var childNodes = theElement.childNodes;
        var numChildNodes = childNodes.length;

        alert("handleRowClick: childNodes array has length = " + numChildNodes);


      for(i = 0; i < numChildNodes; i++)
      {

        alert("The DOM element " + i + " has innerHTML = " + childNodes[i].innerHTML + ", " 
          + "nodeName = " + childNodes[i].nodeName + ", "
          + "nodeType = " + childNodes[i].nodeType + ", "
          + "nodeValue = " + childNodes[i].nodeValue + ", "
          + "parentNode = " + childNodes[i].parentNode + ", "
          + "childNodes = " + childNodes[i].childNodes + ", "
          + "attributes = " + childNodes[i].attributes + ", "
          + "name = " + childNodes[i].name + ", "
          + "value = " + childNodes[i].value + ", "
          + "id = " + childNodes[i].id);
     }

上面的第一个alert()显示childNodes数组中有9个数组元素。

当“for”循环执行时，它告诉我数组中有两种类型的 DOM 元素:

有 5 个报告为:nodeName=#text、nodeType = 3、 和 value=id=name=undefined

并且有 4 个 childNode[] 元素报告为:nodeName=DIV，nodeType = 1， 和再次 - value=name=id=undefined。

在我看来——在 onclick 处理程序中，我正确地传递了 4 个嵌套 div (nodeType 1) 和 4 个只读文本字段，nodeType=#text，nodeType=3，输入类型=文本。

然后“for”循环报告的第 9 个也是最后一个元素是——一个额外的 nodeName=#text 元素(nodeType = 3)，我不知道那是什么——如果它是最外面的 div，然后它会像 4 个内部 div 一样具有 nodeType=1 和 nodeName=div。

很好，花花公子。但到底为什么 id、名称和值无法帮助我找出哪个是哪个？

对于 DIV 节点，innerHTML 具有嵌套在其中的输入 type=text 的 html 标签，但我不打算解析它——输出(在上面“for”循环的alert()框中)对于 DIV 节点是这样的:

    The DOM element 1 has innerHTML = Item<br>
        <input size="30" maxlength="50" id="itemName_id" name="itemName" 
                       value="f's first item" readonly="readonly" 
                      type="text">
          ,  nodeName = DIV, nodeType = 1, nodeValue = null, 
              parentNode = [object HTMLDivElement], childNodes = [object  
              NodeList], attributes = [object NamedNodeMap], 
               name = undefined, value = undefined, id = 

我的问题是，当我的 onclick 处理程序被调用时，我需要获取 4 个包含的 DIV 和 4 个包含的输入 type=text 元素中每一个的 id、名称、值 - 如何获取？为什么它们都是“未定义”，因为当我的 onclick() 处理程序被调用时，我确实可以访问 4 个嵌套的 div 和 4 个文本字段。

Answer 1

最外面的 div 有 4 个子 div。因此，theElement.childNodes.length 应该为您提供 4。这是您看到的 4 个 nodeName = DIV、nodeType = 1 结果。每个输入元素都是内部 div 的子元素。 theElement.childNodes 将不会返回输入元素。神秘的nodeType = 3条目是文本节点。考虑以下片段

<div>
   <div>text in innerdiv</div>
   text in outer div   
</div>

外部 div 有两个子节点 - 一个嵌套 div 和文本 外部 div 中的文本

尝试使用

function handleRowClick(theElement)
{

    var childDivs = theElement.getElementsByTagName("div");
    var childInputs = theElement.getElementsByTagName("input");

    for(i = 0; i < childDivs.length; i++)
    {
        //process child divs here
    }

    for (i=0; i<childInputs.length; i++ )
    {
        //process child inputs here
    }
 }