HTML DOM ins要素のciteプロパティとは？使い方を解説
HTML DOM の ins 要素が持つ cite プロパティは、テキストが挿入された理由を説明するドキュメント（引用元）のURLを返します。このプロパティを使うことで、挿入されたテキストの出典情報をJavaScriptから動的に取得できます。
構文
構文は以下のとおりです。
文字列値を返す場合
insObject.cite
サンプルコード
ins cite プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、ins要素に設定された引用元URLが画面に表示されます。
<!DOCTYPE html>
<html>
<head>
<title>ins cite</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>ins-cite</legend>
<h1>Fact:</h1>
<p>Water cannot persist on moon's surface.<ins id="newInfo" cite="https://www.example.com/water-ice-moon-surface-confirmed.html">Water ice found on moon in 2018.</ins>
</p>
<input type="button" onclick="showURL()" value="Show Evidence">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var insCite = document.getElementById("newInfo");
function showURL() {
divDisplay.textContent = 'Evidence at: '+insCite.cite;
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のような出力が得られます。
「Show Evidence」ボタンをクリックする前
「Show Evidence」ボタンをクリックした後
このように、cite プロパティを参照することで、ins要素に出典として設定されたURLを簡単に取得できることがわかります。編集履歴や更新理由を出典付きで明示したいWebページで活用するとよいでしょう。
-
HTML DOM textContentプロパティの使い方を徹底解説
HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ
-
HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法
HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1