Question

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

我有一个最外面的div，嵌套在其中，4个div。并且4个嵌套div中的每一个都有一个输入类型=“text”嵌套在里面。

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

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

这是代码。

  <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);
     }

上面的第一个警告（）告诉我，childNodes数组中有9个数组元素。

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

有5个报告为： nodeName =＃text，nodeType = 3，和 value = id = name = undefined

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

在我看来 - 它看起来像在onclick处理程序中，我正确传递了4个嵌套div（nodeType 1）和4个只读文本字段，nodeType =＃text，nodeType = 3，输入类型=文本。

然后'for'循环报告的第9个也是最后一个元素是 - 一个额外的 nodeName = #text 元素（nodeType = 3），我不知道那是什么 - 如果它是最外层的div然后它将具有nodeType = 1和 nodeName = div ，就像4个内部div一样。

很好，很花哨。但那么为什么heck是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中的每一个的id，name，value和4包含的输入type = text元素 - 如何？为什么它们都是“未定义的”，因为当我的onclick（）处理程序被调用时，我确实可以访问4个嵌套的div和4个文本字段。

Answer 1

使用jquery.E.g的parent()和siblings以及children()功能。 $('@idOfOuterDiv').children().html()这个wud给出了内在的div内容。以同样的方式获得所有的视角

Answer 2

你最外面的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和文本text in outer 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
    }
 }

Answer 3

您可以使用HTMLElement.getAttribute(attributeName)获取属性值

如何获得4 <div>和4 <input type =“text”/> </div>的'id'

3 个答案: