baseURIで要素の所属するページのURIを取得【JavaScript】

2019年6月28日

この記事では、指定したノードのあるページURI（URL）を取得していきます。

baseURI

使い方

（対象の要素）.baseURIという形式で使います。

<div id="target">URIチェック対象の要素</div>
<button id="btn" onclick="checkURI();">URIチェック</button>
<div>【URL】<span id="output"></span></div>

function checkURI() {
  var target = document.getElementById('target');
  var uri = target.baseURI;
  document.getElementById('output').innerHTML = uri;
}

「URIチェック」のボタンをクリックするとイベントが発火します。

<div id="target">の要素の存在するページのURIを取得します。

取得したURIを<span id="output">に出力しています。

チェック対象の要素

【URL】

URI（URL）関連のJavaScript

URI関連のJavaScriptは、他にlocationがあります。

locationを使うと、現在のページのURL情報全ての取得、必要な部分のみの取得ができます。

「locationで現在のURL情報を取得・整形する」で詳しく解説しています。

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。