🤦🏿 👩🏿‍🚒 😉 ElementTraversalインターフェイスを実装する ⚜️ 🎴 👨🏼‍🍳

多くのブラウザ（Opera 9.6、Google Chrome 2、Safari 4、Firefox 3.5）が非常に便利なElementTraversalインターフェイスをサポートしました。これにより、テキストノードを無視してDOMツリー内を移動できます。これらのブラウザでは、各要素について、次の一連の新しいゲッターが利用可能になりました。

firstElementChild-最初の子要素。
lastElementChild-最後の子要素。
nextElementSibling-次の隣接要素。
previousElementSibling-前の隣接要素。
childElementCount-子要素の数。

これらのゲッターの実装の詳細に入ることなく、仕様の言葉に依存することなく：

ElementTraversalインターフェースは、読み取り専用属性のセットです ...

それらをさらに属性と呼びます。

明確にします：要素は、nodeTypeプロパティが1のDOMツリーのノードです。タグは要素に対応します。

nodeTypeループでノードをチェックして追加のラッパー関数を使用する必要がないため、これらの属性を使用すると、DOMツリーを移動する際のJavaScriptアプリケーションのパフォーマンスが向上します。また、childElementCount属性を使用すると、実際には役に立たないhasChildNodesメソッドとは対照的に、現在のノードに子があるかどうかを確認できます。もちろん、次のようにして子要素の存在を確認できます。

node.getElementsByTagName( "*" ).length

しかし、このメソッドは無駄が多すぎるため、組み込み属性childElementCountは理論的にははるかに高速に動作するはずです。

もちろん、これはすべて素晴らしく興味深いものですが、ElementTraversalインターフェースをサポートしていない古いブラウザーをどうするのでしょうか？明らかに、属性ごとに追加の関数を作成する必要があります。それらの実装は記事「 DOM要素のクイック検索」で見ることができますが、多くの人がそのような関数を自分で書くことは難しくないと思いますが、複雑なことは何もありません。

そして今、最も興味深いのは、Internet Explorer 8でこれらの同じゲッターとセッターを作成する機会がありました。唯一の奇妙なことは、IE8がこの強力で有用なメカニズムに言及しなかったのは、イノベーションのレビューがない理由です。 JScriptでは、組み込みオブジェクトのdefinePropertyメソッドを使用してゲッターまたはセッターを作成できるようになりました。 __defineGetter__メソッドと__defineSetter__メソッドを使用した同様の機会が、もともとGeckoベースのブラウザーであったことを思い出します。Safari3で既に判明しており、Opera 9.6でこのメカニズムが導入されました。

そのため、ゲッターを作成する機能があれば、Internet Explorer 8、Mozilla Firefox 2+およびSafari 3+でElementTraversalインターフェイスのサポートを実装できますが、Opera 9.6はすでにサポートしています。

コードを書くことは残っています：

// var element = document .createElement( "div" ); // , ElementTraversal if ( typeof element.firstElementChild == "undefined" ) { // var ElementTravrsal = { // firstElementChild: function () { // var node = this .firstChild; // // null while (node && node.nodeType != 1) node = node.nextSibling; // null return node; }, // lastElementChild: function () { // var node = this .lastChild; // // null while (node && node.nodeType != 1) node = node.previousSibling; // null return node; }, // nextElementSibling: function () { // // var node = this ; // // null do node = node.nextSibling while (node && node.nodeType != 1); // null return node; }, // previousElementSibling: function () { // // var node = this ; // // null do node = node.previousSibling; while (node && node.nodeType != 1); // null return node; }, // // , children childElementCount: typeof element.children == "undefined" ? function () { // children, // var list = this .childNodes, // i = list.length, // j = 0; // , while (i--) // , if (list[i].nodeType == 1) // j++; // 0 return j; } : function () { // children, // // return this .children.length; } }; // IE8 if (Object.defineProperty) for ( var property in ElementTravrsal) if (ElementTravrsal.hasOwnProperty(property)) Object.defineProperty(Element.prototype, property, { get: ElementTravrsal[property] }); // Firefox 2+ Safari 3+ if (Object.__defineGetter__) for ( var property in ElementTravrsal) if (ElementTravrsal.hasOwnProperty(property)) HTMLElement.prototype.__defineGetter__(property, ElementTravrsal[property]); }

このコードをプロジェクトに含めると、ほとんどのブラウザーでElementTraversalを使用できるようになりました。

Internet Explorer 8;
Mozilla Firefox 2+およびGecko 1.8+ベースのその他のブラウザー。
Opera 9.6+（おそらく9.5+）;
Safari 3+（2でもいいですか？残念ながら、チェックする方法はありません）;
Google Chrome 2+。

一部のサービスまたは管理インターフェイスの開発には、このリストで十分です。すべてのブラウザのサポートが必要な場合、上記のリンクを使用した上記の記事のように、追加の機能なしでは実行できません。または、サポートされているブラウザのリストを展開できますか？他のブラウザでこれを行う方法についてアイデアがあれば、コメントを書いてください。たとえこれらが非合理的なソリューションであっても、実装の可能性は非常に興味深いものです。

新しいインターフェイスの属性は、古いfirstChild、lastChild、nextSiblingなどと同じ方法で使用されます。たとえば、次のようなXHTMLコードを使用します。

< div id ="test" > TextNode < div > TextNode </ div > TextNode TextNode TextNode </ div > TextNode TextNode 

JavaScriptでDOMツリーの周りをいくつか移動します。

// // "test" var node = document .getElementById( "test" ); // tagName alert(node.nextElementSibling.tagName); // → "P" // node = node.lastElementChild; // , ? alert(node.childElementCount); // → "0" // ? alert(node.hasChildNodes()); // → "true"

面白かった場合は、次の記事でJScriptとJavaScriptでゲッターとセッターを使用する方法について詳しく説明します。

記事のコードでアーカイブ： ElementTraversal.zip

更新：テーマブログに移動しました。カルマに感謝します:-)

ElementTraversalインターフェイスを実装する

More articles: