getElementByIdを入力フィールド指定された入力フィールド長

Question

を取得する：

<input type="text" id="papaya"> 

なぜこの作品

$(document).ready(function() { 
    alert($('#papaya').val().length); 
}); 

を行いますが、これはしないのですか？ javascriptのための

$(document).ready(function() { 
    var pp = document.getElementById('papaya'); 
    alert(pp.val().length); 
}); 

Answer 1

最初の例では、ppはjQuery APIを提供する要素のセットのラッパーであるjQueryオブジェクトへの参照であるが、2番目の例では、それだから.value含むvalようなjQueryのメソッドを持っていないが、それ自体のメソッドとプロパティを持っているのDOM要素への直接参照、：

$(document).ready(function() { 
    var pp = document.getElementById('papaya'); 
    alert(pp.value.length); 
    // -----^^^^^^^ 
}); 

Answer 2

使用値：あなたはvalue代わりのval()を使用する必要があるバニラJSで

alert(pp.value.length); 

Answer 3

。 val()関数はjQuery独自の実装です。

var pp = document.getElementById('papaya'); 
 
console.log(pp.value.length);

<input type="text" id="papaya" value="123">