如何在JavaScript中访问嵌套的html-child元素

Question

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!

Answer 1

As mentioned in the comments, 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> 

Answer 2

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

Answer 3

as @Teemu says in comment id s 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")

Answer 4

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 commentNodes etc. But, children method will only give you HTMLCollection object .

Answer 5

使用类属性代替id属性很简单。

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