VanillaJS-divの名前で要素を取得

Question

このjQueryコマンドをJavaScriptで翻訳する必要があります。

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

私がしようとしました：

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

しかし、「element.getElementsByNameは関数ではありません」というエラーが発生しました

Answer 1

getElementByIdIDが「edit_pickup_date_modal」のタグを取得するために使用します。querySelector名前= 'type'の最初のINPUTフィールドを検索して、値を設定するよりも。

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

getElementById、などのDOMの要素の検索の詳細querySelectorについては、こちらを参照してください。

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

操作全体を1つにまとめることもできます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

jQueryの同等のバニラ関数 $('#edit_pickup_date_modal').find('input[name=type]').val('2');

は：

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>
 

そしてそれは意味します：

input[name=type]IDを持つ要素内のそれぞれについてedit_pickup_date_modal、そのvalueプロパティに定数値2を割り当てます。