2012-01-31 79 views
0

有沒有人知道一個工具來操作和注入後驗證頁面的DOM。大量的JS DOM注入/操作後的DOM驗證

問題是我有一個非常複雜的頁面,通過js從CMS注入了一些html(它並不總是很整齊),也有很多dom元素通過頁面上的JS UI元素添加和刪除加上其他MVC風格部件的加載。螢火蟲等往往會關閉標籤本身。我想我可以註銷整個DOM樹並將其粘貼到驗證器中,但我正在尋找更優雅的東西?

編輯:

澄清:我在DOM被搞砸了一個項目,但可以有幾十個,在MVC使用JS模板(鬍子)符合HTML的或許多達200廢料(主幹)模式,以及用戶和CMS輸入。我正在尋找一個方便的工具,可以在任何情況下快照DOM,並給我更清晰的指針比內置Dev.Tools/Firebug

+1

類似未封閉標籤的東西不能存在於DOM中。元素存在或不存在。我想你仍然可能會遇到問題,例如塊元素無效,但未封閉的標籤不會成爲動態添加元素的問題。 – 2012-01-31 04:23:20

回答

2

有人可以糾正我,如果我錯了,但驗證是HTML 文檔被傳遞給瀏覽器。在解析並加載DOM之後,你對DOM做的任何事情都不會受到驗證規則的約束。另外,不能保證在一個兼容W3C的瀏覽器中的DOM轉儲將與另一個瀏覽器中的相同轉儲相同。這就是爲什麼如果你在舊版本的IE上檢查innerHTML,你會看到那裏沒有驗證數據,比如<TD COLSPAN=3>;這些東西在W3C標準中顯然是無效的,但根據定義,它在IE中完全有效。

而且,不幸的是,如果您通過JS向瀏覽器注入HTML的全部塊,那麼這些東西將永遠不會驗證,因爲它缺少所有東西(如<head><html>)。

你可以做的一件事(我看過在我們的CMS上做了很多用戶生成的HTML,它通常很糟糕)將片段的文本加載到XML shell中這個:

<?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 2012-01-31 05:41:33

+0

它看起來像Backbone有一個'validate()'方法,這可能會幫助你的模板。對於你的html片段,我會考慮把一個JS XML驗證器放到你的CMS中(它們很容易構建,如果不是跨瀏覽器兼容)告訴作者代碼有問題。另外,當人們告訴我這一點時,我討厭它,但是如果您將HTML片段作爲數據發送給MVC應用程序,那麼您有點失去了MVC的好處。考慮從標記中解除數據綁定的方法,並將其留給控制器進行分類。 MVC使跨平臺成爲可能;這使得它不可能。 – Andrew 2012-01-31 06:36:00

+0

是的,這意味着被覆蓋以驗證數據輸入,但可以用來遍歷我猜測的數據節點。我發現了幾個殺手書籤,但有點幫助,但不完全是我想要的:http://mir.aculo.us/dom-monster/ https://www.squarefree.com/bookmarklets/validation.html http:// slayeroffice.com/?c=/content/tools/suite.html – Alex 2012-01-31 09:27:29

0

Total Validator允許您在javascript運行後驗證DOM。您需要安裝免費應用程序,然後安裝瀏覽器擴展。然後你只需點擊你想驗證的任何頁面上的圖標,它就會發送DOM到應用程序來驗證它。