

textメソッドとvalメソッドはどう違いますか？  
初歩的な質問ですが、説明をよんでもピンとこないので・・・


CC BY-SA 4.0
2019-11-19T22:36:41.447
60670
2019-11-20T07:29:33.277
2019-11-20T07:29:33.277
32986
36630
question
jquery
textメソッドとvalメソッドの違いは何ですか？


## 短い説明

簡単にいえば、 **結果を取得する手段と得られる結果が異なり**
ます。そのため、一方のメソッドで取得した値は、他方のメソッドを使用して取得出来ません。たとえば、以下のような二つの HTML 要素を考えます。

[code]

    <input value="Hello, val()!">
    <div>こんにちは、text()!</div>
    
[/code]

ここで、 `input` 要素の値「Hello, val()!」は `text` メソッドでは取得出来ませんが、 `val`
メソッドを使用すると取得することが出来ます。

[code]

    console.log($("input").text()); //=> ""
    console.log($("input").val()); //=> Hello, val()!
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input value="Hello, val()!">
[/code]

また、 `div` 要素のテキスト「こんにちは、text()!」は、 `val` メソッドでは取得出来ませんが、 `text`
メソッドを使用することで取得出来ます。

[code]

    console.log($("div").val()); //=> ""
    console.log($("div").text()); //=> こんにちは、text()!
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div>こんにちは、text()!</div>
[/code]

上記の動作は、 `val` メソッドが **`value` 属性という属性の値を取得する**ためのメソッドであるのに対して、 `text` メソッドは
**要素のテキストを取得する** ためのメソッドであるために発生しています。`value` 属性と要素のテキストは異なるものであるため、 `value`
属性の値を取得する `val` メソッドでは、要素内のテキストを取得出来ません。要素のテキストを取得したい場合は、 `val` メソッドではなく
`text` メソッドを使う必要があります。 `val` メソッドは `input`, `select` や `textarea` 要素などの、
`value` 属性に値が格納される要素から値を取得するときに使用されます。

* * *

## 長い説明

[`jQuery.fn.text`
メソッド](https://github.com/jquery/jquery/blob/075320149ae30a5c593c06b2fb015bdf033e0acf/src/manipulation.js#L299)は以下に示すように定義されており、引数を渡さずに呼び出した場合に
[`jQuery.text`
メソッド](https://github.com/jquery/jquery/blob/075320149ae30a5c593c06b2fb015bdf033e0acf/src/core.js#L262)を呼び出し、
DOM ノードのテキストを **[`Node.nodeValue` プロパティ](https://www.w3.org/TR/DOM-
Level-2-Core/core.html#ID-F68D080)、 [`Node.textContent`
プロパティ](https://dom.spec.whatwg.org/#dom-node-
textcontent)によって取得**します。また、引数に関数を渡した場合には、当該関数が実行され、その結果が `Node.textContent`
プロパティに代入されます。単に文字列を渡した場合はその文字列が `Node.textContent` プロパティに代入されます。

[code]

    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);
    }
    
[/code]

`jQuery.fn.val` メソッドを引数を渡さずに呼び出した場合 (`!arguments.length`)
の処理は以下のようになっています。これを読むと、 `jQuery.fn.val` メソッドへ引数を渡さずに呼び出した場合には、その要素の **`value`
属性の値**か、空文字列もしくは `undefined` が返されることがわかります。

[code]

    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;
      }
    
      // 省略
    }
    
[/code]

次に、 [`jQuery.fn.val`
メソッド](https://github.com/jquery/jquery/blob/d0ce00cdfa680f1f0c38460bc51ea14079ae8b07/src/attributes/val.js#L10)へ引数を渡した場合に実行される処理は以下のようになっています。このコードを読むと、渡された引数が関数であればそれを実行した結果を、引数が単なる文字列であればその文字列を、
`undefined` や `null`, 数値であれば空文字列を、配列であれば配列内の値を連結した内容をその要素の **`value`
属性**へ設定しています。ただし、 valHooks によって `value` 属性以外の方法を使用している場合もあるため、 **必ずしも`value`
属性が使用されるわけではない**ことに注意する必要があります。

[code]

    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;
        }
      });
    }
    
[/code]

以上より、 `jQuery.fn.text` メソッドは `Node.nodeValue` プロパティ、 `Node.textContent`
プロパティを、 `jQuery.fn.val` メソッドは基本的には `value` 属性を使用していることがわかりました。`Node.nodeValue`
プロパティ、 `Node.textContent` プロパティと `value` 属性の値は互いに関連していないため、 `jQuery.fn.text`
メソッドと `jQuery.fn.val` メソッドで得られる結果は異なるものであるということになります。


CC BY-SA 4.0
2019-11-20T07:26:14.790
60689
2019-11-20T07:26:14.790
32986
60670
answer