１

好きな文字列を入れたいPart2　4.0以上

“好きな文字列を入れたいPart1“とよく似た働きをする命令をやってみよう。
まず、命令を見てみよう。

以前の命令ではtext.innerText=""という命令をやったよね。
今回の命令はtext.outerText=""という命令だよ。
違う部分は赤の部分だね、
つまり、この部分が二つの働きの違いを表している。
innerは内側という感じの意味、outerというのは外側という感じの意味だね。
つまり、前回のinnerはタグの内側に挿入されたんだ。
そして、今回のouterはタグの外側、つまりタグを含めて全てが置き換えられてしまうんだ。
じゃあ、実際にどのような働きをしているか見てみよう。
前回のtext.innerText="操作しました"という命令は、

    <B id="text">この部分を操作</B>
　　　　　　　　　　　　　　↓
    <B id="text">操作しました</B>

つまり、表示部分は、

    この部分を操作       ←太字
　　　　   ↓
    操作しました　　　　←太字のまま

このようになるんだったね。
しかし、
今回の場合は前回と違う。
命令としてtext.outerText="操作しました"を実行すると、

    <B id="text">この部分を操作</B>　　　←周りのタグを含む全ての部分（赤の部分）が置き換えられる。
　　　　　　　　↓
    操作しました

このように、周りのタグを含む全ての部分が置き換えられてしまうんだ。
つまり、表示部分は、

    この部分を操作　　←始めは太字
　　　　   ↓
    操作しました　　　　　←周りのタグも置き換えられて普通の太さになる

のようになる。
また、今回の命令もよく見てみると、outerText。つまり、テキスト（文字）を挿入するという意味なんだ。
テキストを挿入するというのはどういうことか、もし次のような命令を実行すると。
text.outerText="<B>ヨッシーが</B>操作しました"　　　←タグが入った

    <B id="text">この部分を操作</B>
　　　　　　　　　　　　　　↓
    <B>ヨッシーが</B>操作しました　　　←周りのタグを含む部分が置き換えられた。置き換えられたタグは文字として認識される

つまりこれを表示すると、

    この部分を操作
　　　　   ↓
    <B>ヨッシーが</B>操作しました　　　←タグも文字として認識される。さらに置き換えによって太字じゃなくなる。

このように、前回と同じくタグを使った文字には変換できないんだ。

じゃあ、プログラムを簡単に作ってみよう。

これを実行すると、

文字を触った後は、
    <B>あなたが</B>さわりました
になっているので、これ以上文字に触れても何も起こらないよ。
（※なぜなら、<SPAN onmouseover="this.outerText='<B>あなたが</B>さわりました'">触って〜！！</SPAN>というタグはもう置き換えられて存在しないから。）
実際にこれを使って何かをするというのは少ないかもしれない、どちらかというとinnerTextやinnerHTMLの命令を使うことが多いと思うよ。

ここで標準編は終わりです。
　目次へ戻る

　フォームのボタンを変える
　目次へ戻る