jquery - How to access nested html-child elements in javascript - Stack Overflow

admin管理员组

文章数量:1379384

I'm using a html-form with nested div-elements with this structure:

<form id="form">
    <div id="parentproperties">
        <legend class="itemName">People</legend>
        <br>
        <div id="properties1">
            <legend class="itemName">Name</legend>
            <label class="valueId">JaneDoe</label>
            <br>
            <label class="labelId">Id: </label>
            <input class="inputId">5646543</input>
        </div>
        <div id="properties2">
            <legend class="itemName">Address</legend>
            <label class"valueId">MysteriousStreet</label>
            <br>
            <label class="labelId">Id: </label>
            <input class="inputId">1234</input>
        </div>
        <div id="properties3">
            <legend class="itemName">Country</legend>
            <label class"valueId">SomeCountry</label>
            <br>
            <label class="labelId">Id: </label>
            <input class="inputId">7899542</input>
                    <div id="properties4">
                    <legend class="itemName"></legend>
                    <br>
                    </div>
        </div>
    </div>
</form>

Now I need to access the field with the Id 'valueID' for every 'div' to change a specific value. I've tried several loops but they do not not work properly... Later I've tried to get a particular element directly this way:

document.getElementById("properties").childNodes[0].innerHTML;

...but I only get the first valueId with value 'JaneDoe'. Thanks in advance for any ideas!

I'm using a html-form with nested div-elements with this structure:

<form id="form">
    <div id="parentproperties">
        <legend class="itemName">People</legend>
        <br>
        <div id="properties1">
            <legend class="itemName">Name</legend>
            <label class="valueId">JaneDoe</label>
            <br>
            <label class="labelId">Id: </label>
            <input class="inputId">5646543</input>
        </div>
        <div id="properties2">
            <legend class="itemName">Address</legend>
            <label class"valueId">MysteriousStreet</label>
            <br>
            <label class="labelId">Id: </label>
            <input class="inputId">1234</input>
        </div>
        <div id="properties3">
            <legend class="itemName">Country</legend>
            <label class"valueId">SomeCountry</label>
            <br>
            <label class="labelId">Id: </label>
            <input class="inputId">7899542</input>
                    <div id="properties4">
                    <legend class="itemName"></legend>
                    <br>
                    </div>
        </div>
    </div>
</form>

Now I need to access the field with the Id 'valueID' for every 'div' to change a specific value. I've tried several loops but they do not not work properly... Later I've tried to get a particular element directly this way:

document.getElementById("properties").childNodes[0].innerHTML;

...but I only get the first valueId with value 'JaneDoe'. Thanks in advance for any ideas!

• javascript
• jquery
• html
• dom

Share Improve this question Follow edited Aug 11, 2017 at 18:22 asmmahmud 5,05422 gold badges4141 silver badges5151 bronze badges asked Aug 11, 2017 at 13:36 EndivieEndivie 10111 gold badge22 silver badges88 bronze badges 2

• 7 ids are supposed to be unique within the document. Use class or data-* attribute to group elements. – Teemu Commented Aug 11, 2017 at 13:36
• Use a class instead of an id. id attributes should be unique, they're like addresses. – Difster Commented Aug 11, 2017 at 13:38

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

As mentioned in the ments, the current HTML structure needs some attention:

1. Don't use a unique ID more than once. Use classes, data- attributes, or unique IDs.

2. Input elements do not have closing tags, they're self-closing <input />.

Now, to select the elements you want, you have several options.

1. Give each element a unique ID and select it with

   document.getElementById('input-1').value('new value');
   

2. Or loop through the input elements with something like:

   document.querySelectorAll('.inputId'))
   

   which will return a NodeList of all the elements with a class of inputId

document.getElementById('input-1').value = "New Value"

<form id="form">
  <div>
    <legend id="itemName">People</legend>
    <br>
    <div class="properties">
      <legend class="itemName">Name</legend>
      <label class="valueId">JaneDoe</label>
      <br>
      <label class="labelId">Id: </label>
      <input class="inputId" id="input-1" value="5646543" />
    </div>
    <div class="properties">
      <legend class="itemName">Address</legend>
      <label class="valueId">MysteriousStreet</label>
      <br>
      <label class="labelId">Id: </label>
      <input class="inputId" id="input-2" value="1234" />
    </div>
    <div class="properties">
      <legend class="itemName">Country</legend>
      <label class="valueId">SomeCountry</label>
      <br>
      <label class="labelId">Id: </label>
      <input class="inputId" id="input-2" value="7899542" />
    </div>
    <div id="properties">
      <legend id="itemName"></legend>
      <br>
    </div>
  </div>
</form>

childNodes[0] selects the first node of all child nodes, so you can use childNodes[1], childNodes[2] and so on. As Teemu said, ids should be unique, in your case it looks like a good point to use classes.

as @Teemu says in ment ids should be unique within the document, instead you could give them some class="a"

then you could get all elements by class document.getElementsByClassName("a")

It's simple to use class attributes in the place of id attributes.

document.getElementsByClassName("properties")[0].childNotes[0].innerHTML;

Use children instead of childNodes :

document.getElementById("properties1").children[0].innerHTML = 

Also you should use unique id string for element id.

childNodes return a NodeList object which also includes textNodes and mentNodes etc. But, children method will only give you HTMLCollection object.

本文标签： jqueryHow to access nested htmlchild elements in javascriptStack Overflow