戻る

要素の値取得および設定

(1)value (2)innerText (3)textContent (4)innerHTML

例えば、inputの値は初期値がvalue属性となります。
inputの値が変更された場合は変更後の値がvalue属性の値となります。
[取得例]
let data =document.getElementById("xxx").value;
[設定例]
document.getElementById("xxx").value = "initial value";

また、変更前の値であるvalue属性を取得する場合はdefaultValueプロパティを使用します。
ちなみにdefaultValueプロパティは直接変更できます。
(例)
document.getElementById("xxx").defaultValue = "change value";

ユーザーが入力などの変更可能な値の取得および設定をします。
ブラウザ上で見える範囲であり、
非表示になっている値の取得はできません。
(例)
CSSスタイルによって非表示になっているテキスト
例えばdisplay: noneとなっている等は対象外となります。

<br>は出力対象となります。
実際に表示されるテキストのみ取得

javascriptを実装するscriptタグなどは対象外となります。

innerTextで値を設定すると子要素を含むノードをすべて削除した後に
innerTextで設定をするテキストノードが追加されることになります。

HTMLのエスケープ対象文字列は変換処理後に設定されます。
(例)

<	&lt;
>	&gt;

テキスト(タグを含まない)を取得および設定します。
範囲は、要素内のテキスト内容(すべての子要素を含む)となります。
レンダリングされていない隠し要素も含めて取得します。
<br>は対象外です。


<div id="p" style="background-color:rgb(245 255 250 / 1.0);text-align:left;"> parent <div id="c"> child </div> </div> <input type=button onclick="test();" value="replace div tag">
copy

function test()
{
  let p =document.getElementById("p");
  p.textContent="changeValue";
}

CSSスタイルで非表示の要素
例えばdisplay: noneのように非表示になっている場合は対象外です。
innerTextより処理速度が速いです。

HTMLを、そのまま取得および設定します。
範囲は要素内のすべての内容となります。

外部からのHTMLの挿入も可能のため、セキュリティリスクあります。
(例)
innerHTMLを使って外部からのデータを挿入可能なため、XSS（クロスサイトスクリプティング）攻撃のリスクがあります。
このことから
ユーザー入力を直接innerHTMLで設定可能な実装は避けるべきです。

要素自体を含めて取得および変更します。
innerHTMLと似ていますが、要素自身を含めたHTML全体を取得および変更となります。
指定した要素自身も含めて変更対象となります。
使い方によっては要素が削除されることもあります。

プロパティ	HTMLタグ	非表示の要素	例
innerText	取得しない	取得しない	見えるテキストを取得・変更
textContent	取得しない	取得する	すべてのテキストを取得および変更
innerHTML	取得する	取得する	HTMLを取得および変更
outerHTML	取得する	取得する	要素(要素自体を含む)すべての取得および変更

戻る

back

Getting and setting element values

(1)value (2)innerText (3)textContent (4)innerHTML

For example, the initial value of the input is the value attribute.
When the input value is changed, the changed value becomes the value of the value attribute.
[Getting example]
let data =document.getElementById("xxx").value;
[Setting example]
document.getElementById("xxx").value = "initial value";

Also, to get the value attribute, which is the value before the change, use the defaultValue property.
By the way, you can change the defaultValue property directly.
(Example)
document.getElementById("xxx").defaultValue = "change value";

Gets and sets values ​​that can be changed by the user, such as input.
This is the range that is visible in the browser, and values ​​that are hidden cannot be obtained.
(Example)
Text that is hidden by CSS style
For example, display: none is not included.

<br> is included in the output.
Only the text that is actually displayed is obtained

Script tags that implement javascript are not included.

When a value is set with innerText, all nodes including child elements are deleted
and then the text node set with innerText is added.

HTML escape target strings are set after conversion processing.
(Example)

<	&lt;
>	&gt;

Gets and sets text (not including tags).
The range is the text content within the element (including all child elements).
Gets hidden elements that are not rendered.
<br> is not included.


<div id="p" style="background-color:rgb(245 255 250 / 1.0);text-align:left;"> parent <div id="c"> child </div> </div> <input type=button onclick="test();" value="replace div tag">
copy

function test()
{
  let p =document.getElementById("p");
  p.textContent="changeValue";
}

Elements hidden by CSS style
For example, settings such as display : none will not be included.
Faster processing speed than innerText.

Gets and sets HTML as is.
The range is all content within the element.

Since it is possible to insert HTML from outside, there is a security risk.
(Example)
Since it is possible to insert data from outside using innerHTML, there is a risk of XSS (cross-site scripting) attacks.
For this reason,
implementations that allow user input to be set directly in innerHTML should be avoided.

Gets and changes the element itself.
Similar to innerHTML, but gets and changes the entire HTML including the element itself.
The specified element itself is also subject to change.
Depending on how it is used, the element may be deleted.

Properties	HTML Tags	Hidden Elements	Example
innerText	Don't get	Don't get	Get and change visible text
textContent	Don't get	Get	Get and change all text
innerHTML	Get	Get	Get and change HTML
outerHTML	Get	Get	Get and change all elements (including the element itself)

back