HTML: textareaはくせ者だ

# textarea
この要素の中心となるのはtagで囲まれた文字列。通常は`value属性`でそれを読み書きしますが、他にも`innerHTML`、`textContent`、`childNodes[0].data`などといったもので**ほぼ**代用できます。`innerText`は常に空文字を返すようです。

## 空要素
```html
<textarea></textarea>
```
<table>
<tr><th>property<th>文字列<th>length
<tr><td>value<th><th>0
<tr><td>innerHTML<th><th>0
<tr><td>textContent<th><th>0
<tr><td>childNodes[0].data<th>参照不可<th>参照不可
</table>

当然ですが`childNodes[0]`は`undefined`なので、`data`も不在なり

## 改行1個
```html
<textarea>
</textarea>
```
**なんと空要素の場合と同じ**振る舞いです。直観に反する信じがたい結果です。表は省略。ちなみに`outerHTML`は
```html:
<textarea></textarea>
```
となっており、改行は見当たりません。
## 改行2個
```html
<textarea>

</textarea>
```
<table>
<tr><th>property<th>文字列<th>length
<tr><td>value<th>\n<td>1
<tr><td>innerHTML<th>\n<td>1
<tr><td>textContent<th>\n<td>1
<tr><td>childNodes[0].data<th>\n<td>1
</table>

直観に反するややふざけた結果です。Netscape7とかいう化石browerは文字列を`\r`だとぬかしやがります。

## 改行1個 + 改行以外
```html
<textarea>
A</textarea>
```
<table>
<tr><th>property<th>文字列<th>length
<tr><td>value<td>A<td>1
<tr><td>innerHTML<td>A<td>1
<tr><td>textContent<td>A<td>1
<tr><td>childNodes[0].data<td>A<td>1
</table>

ある意味ふざけています。1文字目がAなんだ…。ふ～ん…。

## 改行以外 + 改行1個
```html
<textarea>A
</textarea>
```
<table>
<tr><th>property<th>文字列<th>length
<tr><td>value<td>A\n<td>2
<tr><td>innerHTML<td>A\n<td>2
<tr><td>textContent<td>A\n<td>2
<tr><td>childNodes[0].data<td>A\n<td>2
</table>

まもとのようです

## 改行1個 + 改行以外 + 改行1個
```html
<textarea>
A
</textarea>
```
**なんと改行以外 + 改行1個と同じ結果**です。

## 実体参照文字
```html
<textarea>&amp;&lt;&gt;&copy;&quot;</textarea>
```
<table>
<tr><th>property<th>文字列<th>length
<tr><td>value<td>&amp;&lt;&gt;&copy;"<td>5
<tr><td>innerHTML<td>&amp;amp;&amp;lt;&amp;gt;&copy;"<td>15
<tr><td>textContent<td>&amp;&lt;&gt;&copy;"<td>5
<tr><td>childNodes[0].data<td>&amp;&lt;&gt;&copy;"<td>5
</table>

`innerHTML`さんがふざけ始めました。実体参照の種類で扱いを変えてきやがりましたよ。
## 実体参照崩し
実体参照崩しとは`semicolon`を省略する記法です。同様に数値参照崩しと呼ばれる技も存在していると言わざるを得ません。
```html
<textarea>&amp&lt&gt&copy&quot&#123&#124</textarea>
```
<table>
<tr><th>property<th>文字列<th>length
<tr><td>value<td>&amp;&lt;&gt;&copy;"{|<td>7
<tr><td>innerHTML<td>&amp;amp;&amp;lt;&amp;gt;&copy;"{|<td>17
<tr><td>textContent<td>&amp;&lt;&gt;&copy;"{|<td>7
<tr><td>childNodes[0].data<td>&amp;&lt;&gt;&copy;"{|<td>7
</table>

`innerHTML`さんは気を利かして`semicolon`補完計画を発動していますね。
## value詐称
```html
<textarea value=A>BC</textarea>
```
<table>
<tr><th>property<th>文字列<th>length
<tr><td>value<td>BC<td>2
<tr><td>innerHTML<td>BC<td>2
<tr><td>textContent<td>BC<td>2
<tr><td>childNodes[0].data<td>BC<td>2
<tr><td>defaultValue<td>BC<td>2
<tr><td>textareaの表示<td>BC<td>2
</table>

`value`の設定が無視されてしまいました…。`value`を読み取っても設定と異なる値です。
```html
<textarea value=A></textarea>
```
<table>
<tr><th>property<th>文字列<th>length
<tr><td>value<td><td>0
<tr><td>innerHTML<td><td>0
<tr><td>textContent<td><td>0
<tr><td>childNodes[0].data<td>参照不可<td>参照不可
<tr><td>defaultValue<td><td>0
<tr><td>textareaの表示<td><td>0
</table>

value属性だけ記述してもやはり**無かった事に**…
## propertyの相互作用
`value`、`defaultValue`、`innerText`、`innerHTML`、`textContent`、`childNodes[0].data`を書き替えると、お互いどのように作用するのか検証。
* **value**<p>他者に影響無し
* **defaultValue**<p>`innerText`に影響無し
* **innerTex**t<p>自身に影響無し
* **innerHTML**<p>`innerText`に影響無し
* **textContent**<p>`innerText`に影響無し
* **childNodes[0].data**<p>`innerText`に影響無し

`innerText`の書き替えに驚愕です。全てに影響を与える一方で、**自身は空文字列に戻ります**。
一般的に読み書きする事が最も多い`value`は、他者から完全無視される最強のボッチ野郎という事が分かります。

## property値の深掘り
前述の相互作用を踏まえます。
* `value`や`childNodes[0].data`に空文字列や`null`を与えてやると`textarea`は空欄になります。暗黙型変換で文字列`"null"`が降臨する事はないので注意
* 他のpropertyも上記同様ですが、**ついでに`childNodes[0]`が消滅します**

```js
object.innerText="&amp;&lt;&gt;&quot;"
```
<table>
<tr><th>property<th>length<th>値
<tr><td>innerHTML<td>35<td>&amp;amp;amp;&amp;amp;lt;&amp;amp;gt;&amp;amp;quot;
<tr><td>innerHTML以外<td>19<td>&amp;amp;&amp;lt;&amp;gt;&amp;quot;
</table>

```js
object.innerHTML="&amp;&lt;&gt;&quot;"
```
<table>
<tr><th>property<th>length<th>値
<tr><td>innerHTML以外<td>4<td>&amp;&lt;&gt;"
</table>

```js
object.innerHTML="&<br>"
```
<table>
<tr><th>property<th>length<th>値
<tr><td>innerHTML<td>15<td>&amp;amp;&amp;lt;br&amp;gt;
<tr><td>innerHTML以外<td>5<td>&amp;&lt;br&gt;
</table>

`innerHTML`さんが**自分に嘘を**ついています。さすが`textarea`様だぜ…。

```js:改行
object.innerHTML="\r\n \r \n"
```
<table>
<tr><th>property<th>length<th>値
<tr><td>全て<td>5<td>\n \n\ \n
</table>

```js:浮動小数点数の誤差発生
object.innerHTML=9999999999999999
```
<table>
<tr><th>property<th>length<th>値
<tr><td>全て<td>17<td>10000000000000000
</table>

```js:多倍長整数
object.innerHTML=9999999999999999n
```
<table>
<tr><th>property<th>length<th>値
<tr><td>全て<td>16<td>9999999999999999
</table>

```js:子要素削除
object.removeChild(object.childNodes[0])
```
`childNodes[0]`が消滅し、他のpropertyは空文字列になります

## CSSとvalue属性
value属性を動的に書き込んでも属性selectorによるCSSは適用されません。input要素の場合は適用されるんですが…
```html
<style>[value]{color:red}</style>
<textarea onfocus=value=1></textarea>
<textarea value>Schrödinger</textarea>
<textarea value="">の猫は</textarea>
<textarea value=a>2度死ぬ</textarea>
```
以下の例では`removeAttribute`が仕事してるのかしてないのか…。CSS的にはしているようですが`console.log`は変な事を呟いています
```html
<style>[value]{color:red}</style>
<textarea onfocus="removeAttribute('value');console.log(value)" value=null>Null</textarea>
```
以下は`setAttribute`と`getAttribute`の検証。textareaのわがままっぷりには呆れます
```html
<textarea onfocus="setAttribute('value',123);console.log(value,getAttribute('value'))">0</textarea>
```