Vanilla JS - Element mit dem Namen eines Div abrufen

Question

Ich muss diesen jQuery-Befehl in JavaScript übersetzen:

$('#edit_pickup_date_modal').find('input[name=type]').val('2');

Ich versuchte zu:

var element = document.getElementById('edit_pickup_date_modal');
var input = element.getElementsByName('type')[0];
input.value = '2'

aber ich habe den Fehler "element.getElementsByName ist keine Funktion" erhalten

Answer 1

Verwenden Sie getElementByIddiese Option, um das Tag mit der ID 'edit_pickup_date_modal' abzurufen. Dann suchen Sie mit querySelectornach dem ersten INPUT-Feld mit name = 'type' und setzen den Wert.

document.getElementById('edit_pickup_date_modal').querySelector('input[name=type]').value=2;

<div id='edit_pickup_date_modal'>
  <div>
    <input name ='type'>
  </div>
</div>

Answer 2

Für weitere Informationen zu der Suche nach den Elementen auf DOM wie getElementById, querySelectorbeziehen Sie sich bitte hier

const modalDiv = document.getElementById('edit_pickup_date_modal')

const inputElem = modalDiv.querySelector('input[name=type]');

inputElem.value = 2

<div id="edit_pickup_date_modal">
  <input name="type"/>
</div>

Answer 3

Sie können den gesamten Vorgang auch zu einem einzigen Vorgang kombinieren querySelector:

document.querySelector('#edit_pickup_date_modal input[name=type]').value=2;

<div id='edit_pickup_date_modal'>
  <div>
    <input name ='type'>
  </div>
</div>

Answer 4

Die äquivalente Vanillefunktion für die jQuery $('#edit_pickup_date_modal').find('input[name=type]').val('2');

ist:

document.querySelectorAll('#edit_pickup_date_modal input[name=type]').forEach(function(obj, index){
    obj.value=2;
});

//If you need to take the first element only.
document.querySelector('#edit_pickup_date_modal input[name=type]').value=3;

<div id="edit_pickup_date_modal">
  <input name="type"/>
   <input name="type"/>
    <input name="type"/>
     <input name="type"/>
</div>
 

Und es bedeutet:

input[name=type]Weisen Sie für jedes Element innerhalb des Elements mit der ID edit_pickup_date_modalseiner valueEigenschaft den konstanten Wert 2 zu.