HTML DOMのBase targetプロパティとは？使い方をわかりやすく解説
HTML DOM の Base target プロパティは、HTML の <base> 要素に関連付けられたプロパティです。このプロパティを使うことで、<base> 要素の target 属性の値を設定または取得することができます。target 属性は、ページ内のハイパーリンクがどこで開かれるかを指定するものであり、現在のページ自体で開くことも、新しいタブやウィンドウで開くことも可能です。
target プロパティに設定できる値
target プロパティには、以下の値を指定できます。
| プロパティ値 | 説明 |
|---|---|
| _blank | リンクを新しいウィンドウ（またはタブ）で開きます。 |
| _self | リンクがクリックされたのと同じフレーム内で開きます。これがデフォルトの動作です。 |
| _parent | 親フレームセット内でリンクを開きます。 |
| _top | フレームを解除し、ウィンドウ全体でリンクを開きます。 |
| framename | 指定した名前のフレーム内でリンクを開きます。 |
構文
target プロパティの構文は以下のとおりです。
値を取得する場合
baseObject.target
値を設定する場合
baseObject.target = "_blank|_self|_parent|_top|framename"
サンプルコード
それでは、HTML DOM の target プロパティを使用した具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<base id="Base" target="newframe1" href="https://www.example.com">
</head>
<body>
<p>下のボタンをクリックすると target 属性の値を取得できます</p>
<button onclick="getTarget()">GET TARGET</button>
<p>下のボタンをクリックすると target 属性の値を設定できます</p>
<button onclick="setTarget()">SET TARGET</button>
<p id="Sample"></p>
<script>
function getTarget() {
var x = document.getElementById("Base").target;
document.getElementById("Sample").innerHTML = "すべてのリンクの Base target 値: " + x;
}
function setTarget(){
document.getElementById("Base").target = "_blank";
document.getElementById("Sample").innerHTML = "Target が newframe1 から _blank に変更されました";
}
</script>
</body>
</html>
実行結果
このコードを実行すると、次のような画面が表示されます。
GET TARGET ボタンをクリックした場合：
SET TARGET ボタンをクリックした場合：
コードの解説
この例では、まず getTarget() 関数と setTarget() 関数をそれぞれ呼び出すための「GET TARGET」「SET TARGET」の2つのボタンを作成しています。
<button onclick="getTarget()">GET TARGET</button> <button onclick="setTarget()">SET TARGET</button>
getTarget() 関数では、id が「Base」の要素、つまり今回の場合は <base> 要素を取得します。取得した <base> 要素の target プロパティの値を変数 x に格納し、innerHTML プロパティを使って id が「Sample」の段落にその値を表示しています。
function getTarget() {
var x = document.getElementById("Base").target;
document.getElementById("Sample").innerHTML = "すべてのリンクの Base target 値: " + x;
}
setTarget() 関数でも同様に、id が「Base」の <base> 要素を取得します。そして、その target プロパティを「_blank」に設定することで、リンクが新しいタブで開かれるように変更しています。処理後は、「Target が newframe1 から _blank に変更されました」というメッセージが、対応する id「Sample」の段落に表示されます。
-
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