HTML DOM del citeプロパティの使い方を徹底解説
HTML DOMのdel citeプロパティは、HTMLの<del>要素に関連付けられたプロパティで、Webサイト上のテキストがなぜ削除されたのかをユーザーに伝えるために使用します。具体的には、削除された理由を説明するドキュメントのURLを指定することで、その情報を提供します。
del citeプロパティには視覚的な表示はありませんが、スクリーンリーダーなどの支援技術にとって有用な情報となるため、Webサイトのアクセシビリティ向上に貢献します。このプロパティを使うことで、HTML <del>要素のcite属性の値を設定（set）または取得（return）できます。
構文
del citeプロパティの構文は以下の通りです。
citeプロパティの設定
delObject.cite = URL
ここで指定するURLは、テキストが削除された理由を記述したドキュメントの場所を示します。相対URLと絶対URLのどちらも使用可能です。
サンプルコード
それでは、HTML DOM del citeプロパティの実際の使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Del cite</title>
<style>
#Sample{color:blue};
</style>
</head>
<body>
<h2>del cite property example</h2>
<p><del id="Del1" cite="sampleDeleted.html">Some text has been deleted</del></p>
<p>Click the below button to change the cite attribute value of the above deleted text</p>
<button onclick="citeChange()">Change Cite</button>
<p id="Sample"></p>
<script>
function citeChange() {
document.getElementById("Del1").cite = "https://example.com/deletedText.html";
document.getElementById("Sample").innerHTML = "The del cite attribute value was changed to 'https://example.com/deletedText.html'.";
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「Change Cite」ボタンをクリックすると、以下のように表示が変化します。
コードの解説
上記のサンプルコードの動作を順番に見ていきましょう。
1. <del>要素の作成
まず、id「Del1」を持つ<del>要素を<p>要素の中に作成し、cite属性の初期値として「sampleDeleted.html」を設定しています。
<p><del id="Del1" cite="sampleDeleted.html">Some text has been deleted</del></p>
2. ボタンの設置
次に、「Change Cite」ボタンを作成しています。このボタンがクリックされると、citeChange()関数が呼び出される仕組みです。
<button onclick="citeChange()">Change Cite</button>
3. citeChange()関数の処理内容
citeChange()関数では、getElementById()メソッドを使って<del>要素を取得し、そのciteプロパティの値を「https://example.com/deletedText.html」に変更します。続いて、段落要素のinnerHTMLプロパティを利用して、id「Sample」の段落に変更後の値を表示しています。
なお、「Sample」段落内のテキストが青色で表示されるのは、そのidに対応するCSSスタイルが適用されているためです。
function citeChange() {
document.getElementById("Del1").cite = "https://example.com/deletedText.html";
document.getElementById("Sample").innerHTML = "The del cite attribute value was changed to 'https://example.com/deletedText.html'.";
}まとめ
del citeプロパティを使えば、JavaScriptから動的に<del>要素のcite属性を読み書きできます。削除されたテキストの背景情報をURLとして提供できるため、コンテンツの透明性やアクセシビリティを高めたい場合にぜひ活用してみてください。
-
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
-
HTML DOMのol要素startプロパティとは？使い方とサンプルコードを解説
ol要素のstartプロパティとは HTML DOMにおけるol要素のstartプロパティは、順序付きリスト（番号付きリスト）のstart属性の値を取得、または設定するためのプロパティです。 start属性を利用することで、リストの採番を「1」以外の任意の数字から開始できます。JavaScriptからこのプロパティを操作すれば、動的にリストの開始番号を変更することが可能です。 構文（シンタックス） 開始番号の値を取得する場合 olObject.start 開始番号に数値を設定する場合 olObject.start = number サンプルコード それでは、ol要素のstartプロパティの