DOM ナビゲーション ヘルパー
JavaScript で HTML DOM ツリーをナビゲートするために使用される関数の選択
DOM ツリーの例 (w3schools Web サイトの画像)
ノード ツリー内のノードには、相互に階層関係があります。親、子、および兄弟という用語は、関係を説明するために使用されます。
私たちの機能は、コンテンツ管理システムの簡単なナビゲーションを念頭に置いて構築されました。私たちが直面した問題は、さまざまなブラウザーが要素間のスペースをどのように処理するかであり、場合によっては Firefox が HTML を再フォーマットすることでした。時間が経つにつれて、さらに便利な機能が追加される可能性があります。
W3C Web サイトには、DOM ツリーに関する詳細情報があります。
JavaScript
function nextElSibling(el) {if (el.nextSibling)do { el = el.nextSibling } while (el && el.nodeType !== 1);return el;}function prevElSibling(el) {if (el.previousSibling)do { el = el.previousSibling } while (el && el.nodeType !== 1);return el;}function upElSibling(el) {do { el = el.parentNode; } while (el && el.nodeType !== 9 && el.nodeType !== 1);return el;}function upElSiblingA(el) {try {if (el.tagName.toLowerCase() === "a") { return el; }do { el = el.parentNode; } while (el && el.nodeType !== 9 && el.tagName.toLowerCase() !== "a");return el;}catch (err) {return el;}}function upElSiblingClass(el, elclass) {try {if (el.classList.contains(elclass) === true) {return el;}do { el = el.parentNode; } while (el && el.nodeType !== 9 && el.classList.contains(elclass) === false);return el;}catch (err) {return null;}}function countElSibling(el) {var i = 1;while ((el = el.previousElementSibling) != null)++i;return i;}function countElSiblingClass(el, cl) {var i = 0;while ((el = el.previousElementSibling) != null) { if (el.className == cl) ++i };return i;}彼らは何をやる
最もよく使用される 4 つのアイテムを追加することから始めました。
- nextElSibling と prevElSibling は、次の要素と前の要素に移動するために純粋に使用され、その間にある可能性のある空白を避けます。
- upElSibling 再び空白をスキップして特許項目を取得
- upElSiblingA は、親ハイパーリンク要素のノードを検索します。これは主にテキスト エディタで使用されました。
- countElSibling と countElSiblingClass は、特定のクラス名のオブジェクトのフィルターを使用して、その親内の要素の位置を返します。
