Javascript 如何获得'；id'；第4部分<；部门>；和4<；输入类型="；“文本”&燃气轮机；

这应该很容易，但在研究DOM和阅读相关文章之后，我仍然不在那里

我有一个最外层的div，其中嵌套了4个div。4个嵌套div中的每一个都嵌套了一个input 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>

项目

//为简洁起见，未显示3个以上的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);
     }

功能手柄箭头单击（元素）
{
var childNodes=theElement.childNodes；
var numChildNodes=childNodes.length；
警报（“handleRowClick:childNodes数组具有长度=“+numChildNodes”）；
对于（i=0；i

上面的第一个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，input type=text

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

很好，很漂亮。但是为什么id、名称和值不能帮助我找出哪个是哪个呢

对于DIV节点，innerHTML中嵌套了input type=text的html标记，但我没有计划对其进行解析——DIV节点的输出（在上面“for”循环的alert（）框中）如下所示：

    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 = 

DOM元素1具有innerHTML=Item
，nodeName=DIV，nodeType=1，nodeValue=null， parentNode=[object HtmlDiscovery]，childNodes=[object 节点列表]，属性=[object NamedNodeMap]， 名称=未定义，值=未定义，id= 我的问题是，当调用onclick处理程序时，我需要获取4个包含的div和4个包含的input type=text元素的id、name、value——如何？ 为什么它们都是“未定义的”，因为在调用onclick（）处理程序时，看起来我确实可以访问4个嵌套的div和4个文本字段。

使用jquery的

父（）和
同级和
子（）和
子（）函数。
$（'@idofourterdiv'）.children（）.html（）
此wud将提供内部div内容。按照相同的方法获取所有内容
您可以使用
HTMLElement.getAttribute（attributeName）
要获取属性值
您最外层的div有4个子div。因此
元素.childNodes.length
应该给您4。您看到的是4个nodeName=div，nodeType=1结果。每个输入元素都是内部div的子元素。
元素.childNodes
不会返回输入元素。神秘的节点类型= 3个条目是文本节点。
<div>
   <div>text in innerdiv</div>
   text in outer div   
</div>

我有行进命令——没有jquery，否则我就在那里。这次不是我的选择，我非常感谢你的帮助，谢谢你。+1，谢谢，非常干净，我不会这么做，谢谢。问题——childInputs的id、名称和值设置是否正确，因为我需要它们来处理点击事件？我假设childInputs是的，
childInputs
将包含外部div中的每个
元素，而不管它们嵌套的深度有多深，即使它们具有相同的名称、id或值。我做到了——感谢您的帮助——我做到了上面的“4个div和4个text-read-only”行中有许多行出现在页面上，现在可以成功地确定单击了哪一行--我必须修改CSS样式作为响应--感谢您的帮助，我非常感谢。感谢您花一些时间来帮助我--我非常感谢。
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
    }
 }