имени класса, чтобы найти вложенный тег и присвоить значение в Javascript

Question

я следующая разметка, которую я не могу изменить:

<li class="campID"> 
    <label for="input_2_14">Name</label> 
    <div> 
     <input name="input_14" id="input_2_14" type="text" value="" class="medium" tabindex="11"> 
    </div> 
</li> 

Я хочу, чтобы выбрать вход и изменить его значение с помощью ванильного JS (предположу, jQuery недоступен).

I не может использовать имя или идентификатор ввода, поскольку они являются динамическими и будут меняться.

Я попытался следующие, но это не похоже на работу:

(function(){ 
    var listElement = document.getElementsByClassName('campID'); 
    var myInput = listElement.getElementsByTagName('input'); 
    myInput[0].value = 'John'; 
})(); 

Answer 1

Если вы ориентируетесь IE8 и выше, а затем:

document.querySelector("li.campID input").value="John"; 

еще:

Предполагая, что для только первый и только один вход и вход:

var liListItem = document.getElementsByClassName("campID")[0], 
    inputElement = liListItem.getElementsByTagName("input")[0]; 
    inputElement.value = "John"; 

document.getElementsByClassName("campID") возвращает вам NodeList. Поэтому вам нужно, наверное, перебирать и делать.

Answer 2

querySelector() и querySelectorAll() полный селектор CSS.

querySelector() возвращает толькопервый соответствие узла элемента в пределах узлов.

В то время как

querySelectorAll() возвращает список узла, содержащеговсе соответствующие Элемент узлов в узлах.

Вы должны использовать querySelectorAll() селектор для выбора нескольких целей,

var in = document.querySelectorAll(".campID input"); 
in.value = 'John'; 
console.log(in); 

консоли возврата:

[input#input_2_14.medium, value: "John", item: function] 

Answer 3

Я знаю, что это было давно. Просто подумал о публикации решения, которое сработало для меня. Для ниже HTML

` 
    <li class="list-summary-item"> 
     <span>Registration number</span> 
     <span class="reg-mark">LT08 YJA</span> 
    </li> 
    <li class="list-summary-item"> 
     <span>Colour</span> 
     <span><strong>BLACK</strong></span> 
    </li> 
    <li class="list-summary-item"> 
     <span>Make</span> 
     <span><strong>VAUXHALL</strong></span> 
    </li> 
` 

<br> 
document.getElementsByClassName('list-summary-item')[2].getElementsByTagName('span')[1].getElementsByTagName('strong')[0].innerHTML <br> 

дает Vauxhall.