textメソッドとvalメソッドはどう違いますか?
初歩的な質問ですが、説明をよんでもピンとこないので・・・
1 件の回答
短い説明
簡単にいえば、結果を取得する手段と得られる結果が異なります。そのため、一方のメソッドで取得した値は、他方のメソッドを使用して取得出来ません。たとえば、以下のような二つの HTML 要素を考えます。
<input value="Hello, val()!">
<div>こんにちは、text()!</div>
ここで、 input
要素の値「Hello, val()!」は text
メソッドでは取得出来ませんが、 val
メソッドを使用すると取得することが出来ます。
console.log($("input").text()); //=> ""
console.log($("input").val()); //=> Hello, val()!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="Hello, val()!">
また、 div
要素のテキスト「こんにちは、text()!」は、 val
メソッドでは取得出来ませんが、 text
メソッドを使用することで取得出来ます。
console.log($("div").val()); //=> ""
console.log($("div").text()); //=> こんにちは、text()!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>こんにちは、text()!</div>
上記の動作は、 val
メソッドが value
属性という属性の値を取得するためのメソッドであるのに対して、 text
メソッドは要素のテキストを取得するためのメソッドであるために発生しています。value
属性と要素のテキストは異なるものであるため、 value
属性の値を取得する val
メソッドでは、要素内のテキストを取得出来ません。要素のテキストを取得したい場合は、 val
メソッドではなく text
メソッドを使う必要があります。 val
メソッドは input
, select
や textarea
要素などの、 value
属性に値が格納される要素から値を取得するときに使用されます。
長い説明
jQuery.fn.text
メソッドは以下に示すように定義されており、引数を渡さずに呼び出した場合に jQuery.text
メソッドを呼び出し、 DOM ノードのテキストを Node.nodeValue
プロパティ、 Node.textContent
プロパティによって取得します。また、引数に関数を渡した場合には、当該関数が実行され、その結果が Node.textContent
プロパティに代入されます。単に文字列を渡した場合はその文字列が Node.textContent
プロパティに代入されます。
text: function(value) {
return access(this, function(value) {
return value === undefined ?
jQuery.text(this) :
this.empty().each(function() {
if (this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9) {
this.textContent = value;
}
});
}, null, value, arguments.length);
}
jQuery.fn.val
メソッドを引数を渡さずに呼び出した場合 (!arguments.length
) の処理は以下のようになっています。これを読むと、 jQuery.fn.val
メソッドへ引数を渡さずに呼び出した場合には、その要素の value
属性の値か、空文字列もしくは undefined
が返されることがわかります。
val: function(value) {
var hooks, ret, valueIsFunction,
elem = this[0];
if (!arguments.length) {
if (elem) {
hooks = jQuery.valHooks[elem.type] ||
jQuery.valHooks[elem.nodeName.toLowerCase()];
if (hooks &&
"get" in hooks &&
(ret = hooks.get(elem, "value")) !== undefined
) {
return ret;
}
ret = elem.value;
// Handle most common string cases
if (typeof ret === "string") {
return ret.replace(rreturn, "");
}
// Handle cases where value is null/undef or number
return ret == null ? "" : ret;
}
return;
}
// 省略
}
次に、 jQuery.fn.val
メソッドへ引数を渡した場合に実行される処理は以下のようになっています。このコードを読むと、渡された引数が関数であればそれを実行した結果を、引数が単なる文字列であればその文字列を、 undefined
や null
, 数値であれば空文字列を、配列であれば配列内の値を連結した内容をその要素の value
属性へ設定しています。ただし、 valHooks によって value
属性以外の方法を使用している場合もあるため、必ずしも value
属性が使用されるわけではないことに注意する必要があります。
val: function(value) {
var hooks, ret, valueIsFunction,
elem = this[0];
// 省略
valueIsFunction = isFunction(value);
return this.each(function(i) {
var val;
if (this.nodeType !== 1) {
return;
}
if (valueIsFunction) {
val = value.call(this, i, jQuery(this).val());
} else {
val = value;
}
// Treat null/undefined as ""; convert numbers to string
if (val == null) {
val = "";
} else if (typeof val === "number") {
val += "";
} else if (Array.isArray(val)) {
val = jQuery.map(val, function(value) {
return value == null ? "" : value + "";
});
}
hooks = jQuery.valHooks[this.type] || jQuery.valHooks[this.nodeName.toLowerCase()];
// If set returns undefined, fall back to normal setting
if (!hooks || !("set" in hooks) || hooks.set(this, val, "value") === undefined) {
this.value = val;
}
});
}
以上より、 jQuery.fn.text
メソッドは Node.nodeValue
プロパティ、 Node.textContent
プロパティを、 jQuery.fn.val
メソッドは基本的には value
属性を使用していることがわかりました。Node.nodeValue
プロパティ、 Node.textContent
プロパティと value
属性の値は互いに関連していないため、 jQuery.fn.text
メソッドと jQuery.fn.val
メソッドで得られる結果は異なるものであるということになります。