ywork2020.com

Title

要素のDOMStringを取得、変更する

目次 (INDEX)

outerHTMLとは

ここで説明するouterHTML とは次の語句からなるjavascriptのプロパティです。
outer
読み: アウター
意味: 外側
HTML
読み: HTML
意味: HyperText Markup Language

目次に戻る

outerHTMLプロパティの概要

このプロパティは、子孫を含む要素をDOMStringとして取得することができます。 またプロパティにDOMStringを代入することで要素を別のノードに書き換えることもできます。

別の言葉でいうならば、タグテキストを取得したり、別の要素に書き換えたりできるということです。

もしも要素の内包ノード(子孫ノード)だけの取得や書き換えをしようとするならば innerHTML、 もしくは innerText を使用する方が望ましいといえます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var tagStr = Element.outerHTML;
Element.outerHTML = tagStr;

目次に戻る

サンプルコードと実行結果

ここではspan要素のコンテンツにb要素を含んだ親子要素をタグテキストとしてシリアライズした結果を取得、表示します。 また実行ボタンをクリックすることでouterHTMLプロパティを使ってspan要素をem要素に書き換るようにしています。

サンプルコード: CSS
<style>
	#idSpan, #idEm{
		border: medium solid ##yellowgreen;
		color: ##white;
		padding: 10px;
	}
	#idSpan{
		background-color: ##mediumturquoise;
	}
	#idEm{
		background-color: ##mediumslateblue;
	}
</style>
  • 08: idSpan (識別子idSpanの要素は背景色がmediumturquoiseです。)
  • 11: idEm (識別子idEmの要素は背景色がmediumslateblueです。)
サンプルコード: HTML
<body>
	<p>< span id="idSpan"><b>サンプル要素</b>< /span></p>
	<p><output id="idOutput">innerText</output></p>
	<p><input type="button" value="ボタン" onclick="evtName()"></p>
</body>
  • 02: span要素 (初期読込み時には、この要素のouterHTMLを結果に出力します。)
  • 03: output要素 (この要素のinnerTextに結果を出力します。)
  • 04: input要素 (この要素がクリックされるとscript 05:の関数を実行します。)
サンプルコード: script
<script>
	let elmSpan = document.getElementById("idSpan");
	let elmOutput = document.getElementById("idOutput");
	elmOutput.innerText = elmSpan.outerHTML;
	function evtName(){
		elmSpan.outerHTML = '<em id="idEm">サンプルem要素</em>'
		let elmEm = document.getElementById("idEm");
		elmOutput.innerText = elmEm.outerHTML;
		document.querySelector('input[type="button"]').disabled = true;
	}
</script>
  • 04: 初期表示 (span要素のouterHTMLの値をoutput要素のinnerTextに代入します。)
  • 05-10: 関数 (HTML 04:のボタンがクリックされたら実行します。)
  • 06: 要素の変更 (span要素をem要素に書き換えています。)
  • 07: 新しい変数 (idEmの要素の参照を取得します。)
  • 08: 結果表示 (em要素のouterHTMLの値をoutput要素のinnerTextに代入します。)
  • 09: ボタンの無効化 (input要素button型の無効化を行います。)
実行結果:

サンプル要素:
サンプル要素

結果: id="idOutput"
innerText

実行:

目次に戻る