如何访问嵌套HTML的子元素在JavaScript

Question

我使用HTML的形式与这种结构嵌套的div元素：

<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“值Id”访问现场为每个'div'来改变一个特定的值。我试过几个圈，但他们不无法正常工作......后来我试图获取特定元素直接这样说：

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

...但我只值获得第一VALUEID“ JaneDoe”。 提前感谢您的任何想法！

Answer 1

正如在评论中提到的，当前的HTML结构需要一定的关注：

1. 不要使用一个唯一的ID超过一​​次。使用类，data-属性或唯一ID。

2. 输入元素没有结束标记，它们自闭合<input />。

现在，要选择您想要的元素，您有几个选项。

1. 给每个元素的唯一的ID，并与

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

2. 或者遍历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

childNodes[0]选择所有子节点的第一个节点，所以可以使用childNodes[1],childNodes[2]等。 Teemu说，id应该是唯一的，在你的情况下，它看起来像使用类的好处。

Answer 3

如@Teemu中评论说id S的关系是在文档中唯一的，而是你可以给他们一些class="a"

，那么你可以得到由类的所有元素document.getElementsByClassName("a")

Answer 4

使用，而不是孩子的的childNodes：

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

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

childNodes返回一个NodeList object其中还包括textNodes和commentNodes等。但是，子方法将只会给你HTMLCollection object。

Answer 5

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

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