как я могу получить 'id' 4 <div>и 4 <input type = "text">

Question

Это должно быть легко, но после изучения DOM и изучения связанных постов на SO, я все еще не там.

У меня есть один внешний div, который вложен в него, 4 div.И каждый из 4-х вложенных элементов имеет один тип ввода = «текст», вложенный внутрь.

И у меня есть один добавленный клик к этому внешнему содержащему div, так что щелчок по любому из 4 вложенных элементов div или input type = "text" вызывает один обработчик onclick.

И в обработчике onclick мне нужно получить идентификатор, имя и значение 4 текстовых входов и 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>

Вот онкликобработчик событий - обратите внимание, что в самом внешнем 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 сообщений: имя_узла = # текст, тип_узла = 3, и значение = идентификатор = имя = не определено

И есть 4 элемента childNode [], сообщаемых как: имя_узла= DIV, nodeType = 1, и СНОВА - value = name = id = undefined.

На мой взгляд - это похоже на обработчик onclick, япри правильной передаче 4 вложенных элемента div (nodeType 1) и 4 текстовых поля только для чтения, nodeType = # text, nodeType = 3, тип ввода = text.

А затем 9-й и последний элемент, сообщаемыйЦикл 'for' - это один дополнительный nodeName = # text элемент (nodeType = 3), который я понятия не имею, что это такое - если бы это был самый внешний div, то он имел бы nodeType = 1 и имя_узла = div , как и 4 внутренних элемента div.

Отлично и модно.Но почему, черт возьми, это идентификатор, имя и значение, которые не могут помочь мне понять, что есть что?

innerHTML для узлов DIV имеет html-теги для типа ввода = текст, вложенный в, ноЯ не планирую его анализировать - вывод (в поле alert () вышеупомянутого цикла 'for') для узла 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-х содержащихся DIVs и 4-х элементов input type = text - как?Почему все они «неопределенные», потому что, похоже, я получаю доступ к 4 вложенным элементам div и 4 текстовым полям, когда вызывается мой обработчик onclick ().

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 и текст 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 2

Используйте функции parent() и siblings и children() в jquery. Например, $('@idOfOuterDiv').children().html() этот wud дает внутреннее содержимое div.

Answer 3

Вы можете использовать HTMLElement.getAttribute(attributeName) для получения значений атрибутов