如何訪問嵌套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;