Document: anchors プロパティ

非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

anchorsDocument インターフェイスの読み取り専用のプロパティで、文書中のすべてのアンカーのリストを返します。

HTMLCollection です。

js
if (document.anchors.length >= 5) {
  console.log("found too many anchors");
}

文書中のアンカーを基に目次を作成して文書に挿入する例を以下に示します。

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <script>
      function init() {
        const toc = document.getElementById("toc");
        for (const anchor of document.anchors) {
          const li = document.createElement("li");
          const newAnchor = document.createElement("a");
          newAnchor.href = "#" + anchor.name;
          newAnchor.textContent = anchor.text;
          li.appendChild(newAnchor);
          toc.appendChild(li);
        }
      }
    </script>
  </head>
  <body onload="init()">
    <h1>Title</h1>
    <h2><a name="contents">Contents</a></h2>
    <ul id="toc"></ul>

    <h2><a name="plants">Plants</a></h2>
    <ol>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Pears</li>
    </ol>

    <h2><a name="veggies">Veggies</a></h2>
    <ol>
      <li>Carrots</li>
      <li>Celery</li>
      <li>Beats</li>
    </ol>
  </body>
</html>

JSFiddle で確認

メモ

後方互換性のため、返されるアンカーのセットには name 属性を付けて作成されたアンカーのみが含まれ、 id 属性付きで作成されたものは含まれません。

仕様書

Specification
HTML
# dom-document-anchors

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
anchors
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Deprecated. Not for use in new websites.
Has more compatibility info.