Question

我使用带有此结构的嵌套div元素的html表单：

<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>

现在我需要使用ID＆＃39; valueID＆＃39;来访问该字段。对于每个＆＃39; div＆＃39;更改特定值。我已经尝试了几个循环，但它们没有正常工作......后来我试图直接以这种方式获取特定元素：

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

...但我只获得第一个值为＆＃39; JaneDoe＆＃39;的值。提前感谢任何想法！

Answer 1

正如评论中所提到的，当前的HTML结构需要注意：

不要多次使用唯一ID。使用类，data-属性或唯一ID。
输入元素没有结束标记，它们是自动关闭的<input />。

现在，要选择所需的元素，您有几个选择。

为每个元素指定一个唯一ID，并使用

选择它

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

或使用以下内容循环遍历input元素：
```
document.querySelectorAll('.inputId'))
```
将返回所有元素的NodeList，其类为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

globalZoneAwareCallback选择所有子节点的第一个节点，因此您可以使用GC，childNodes[0]等。正如Teemu所说，childNodes[1]应该是唯一的，在你的情况下，使用类似乎是一个好点。

Answer 3

正如@Teemu在评论中所说function getId() { console.log('called!'); // your AJAX logic here... } $(function() { $('#btnBuscar').click(function() { setTimeout(getId, 5000); }); }); s在文档中应该是唯一的，而不是你可以给他们一些<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnBuscar" type="button" class="btn btn-primary text-center" name="button">Buscar</button>

然后您可以按类id

获取所有元素

Answer 4

使用children而不是childNodes：

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

此外，您应该为元素ID使用唯一的id字符串。

childNodes返回NodeList object，其中还包含textNodes和commentNodes等。但是，children方法只会为您提供HTMLCollection object。

Answer 5

在id属性的位置使用类属性很简单。

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

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

5 个答案: