2012-01-31 12 views
0

操作と注入後にページのDOMを検証するツールを知っている人はいませんか?多くのJS dom注入/操作後のDOM検証

問題は、CMSからJSを介して注入されたいくつかのhtmlを持つ非常に複雑なページがあることです(これは常に悲しいことではありません)また、DOM要素の多くがJS UI要素他のMVCスタイルの部品が追加されています。火かき棒などはタグ自体を閉じる傾向があります。私はDOMツリー全体をログアウトしてバリデーターに貼り付けることができると思いますが、もう少しエレガントなものを探していますか?

編集:明確にするため

:私はDOMを台無しにされているプロジェクトを持っていますが、数十そこにすることができ、HTMLのおそらく最大200のスクラップはMVCでJSテンプレート(口ひげ)を使用して遵守(バックボーン)パターン、ユーザ入力、CMS入力などがあります。私は、任意のシナリオでDOMをスナップショットすることができ、Dev.Toolsに組み込まれているよりも明確なポインタを与える便利なツールを探しています。Firebug

+1

閉じられていないタグのようなものはDOMに存在できません。要素は存在するか存在しません。私はあなたがまだ有効ではない要素をブロックするなどの問題を抱えている可能性があると思いますが、非閉じタグは動的に追加された要素の問題にはなりません。 –

答えて

2

ここで間違っていると誰かが私を修正できますが、 文書がブラウザに渡されます。解析されて読み込まれた後にDOMに行うことは、実際には検証ルールの対象にはなりません。さらに、W3Cに準拠した1つのブラウザでのDOMのダンプが、別のブラウザでの同じダンプと同じになるという保証はありません。そのため、古いバージョンのIEでinnerHTMLを確認すると、<TD COLSPAN=3>のような非有効なデータが表示されます。そのことは明らかにW3C標準では有効ではありませんが、IEでは定義上完全に有効です。

残念ながら、JSを介してブラウザにHTML全体を注入すると、欠けているもの(<head><html>など)があるため、その内容は検証されません。

あなたができることのひとつ(私は多くのユーザー生成HTMLがあり、かなり壊れている私たちのCMSでやっていることを見てきました)は、フラグメントのテキストをXMLシェルにロードします

<?xml version="1.0"?> 
<container>{html_string_to_validate}</container> 

これをXMLパーサーにロードします(どのタイプでも可能です)。これはHTMLの問題を捕捉しませんが、ネストとエンティティの問題を捕捉します。あなたが解決しなければならない問題がいくつかあるかもしれません(空のタグが<script src="..."></script>のように見える場合、警告を出すパーサーがいるかもしれません)。

+0

ちょっと、はい、私の質問を明確にするつもりですが、基本的にバックエンドの入力(悲しいことにCMSがHTMLのpalintextを許可する)のためにマークアップが壊れている例がありますが、私のMVCビューにもタイプミスがあります。基本的にどの時点でも、DOMは、JSの口ひげテンプレートからの多くのビューで構成され、CMS主導のコンテンツが配置されており、DOMツリーはいくつかの場所や状況で壊れていて、私は役立つ便利なツールを探しています。 – Alex

+0

Backboneには 'validate()'メソッドがあります。これはおそらくあなたのテンプレートに役立つでしょう。あなたのhtmlフラグメントについては、JS XMLバリデーターをCMSに入れることを検討します(クロスブラウザーとの互換性がなければビルドするのは簡単です)ので、コードに問題があることを著者に伝えます。また、人々が私にこのことを教えても嫌いですが、HTMLフラグメントをMVCアプリケーションにデータとして送信する場合、MVCの利点を元に戻すことができます。マークアップからデータをバインド解除し、それをソートするためにコントローラに残す方法を検討してください。 MVCはクロスプラットフォームを可能にします。これは不可能になります。 – Andrew

+0

はい、これはデータ入力を検証するために上書きされることを意味しますが、推測するデータのノードを横断するために使用できます。私はちょっとした助けになるいくつかのキラーのブックマークレットを見つけましたが、私が望むだけではありません。http://mir.aculo.us/dom-monster/ https://www.squarefree.com/bookmarklets/validation.html http:// slayeroffice.com/?c=/content/tools/suite.html – Alex

0

Total Validator JavaScriptを実行した後にDOMを検証することができます。あなたは、無料のアプリケーションをインストールしてから、ブラウザの拡張機能をインストールする必要があります。次に、検証するページのアイコンをクリックするだけで、アプリケーションにDOMを送信して検証します。

関連する問題