2022-01-01 textContent vs innerText vs innerHTML / HTMLElement: input イベント / JS で動的メソッド呼び出し

textContent vs innerText vs innerHTML

textContent は、 <script> と <style> 要素を含む、すべての要素の内容を取得します。一方、 innerText は「人間が読める」要素のみを示します。

Element.innerHTML は、その名が示すとおり HTML を返します。時に、 innerHTML を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 textContent は値が HTML として解析されないので性能が良くなります。

ただのテキスト変更であれば innerText で事足りそう。

HTMLElement: input イベント

JavaScriptで input text の入力イベントを受け取って何かするときはこの input イベントを受け取ればいいっぽい。

JS で動的メソッド呼び出し

動的に変数やメソッドを呼ぶ - Qiita

var o = {
  x: function(){return 1},
  y: function(){return 2},
  z: 'i am value'
};

o.x(); //=> 1
o.y(); //=> 2
o.z;   //=> 'i am value'
o['x'](); //=> 1
o['y'](); //=> 2
o['z'];   //=> 'i am value'