如何檢查一個元素是否是另一個元素的有效子元素/父元素

JavaScript中是否有任何方法檢查HTML元素是否是另一個元素的有效子元素？如何檢查一個元素是否是另一個元素的有效子元素/父元素

例如：

一個無序列表（<ul>）可以接受一個列表項（<li>）作爲一個有效的子元素？ - 是

可以將無序列表（<ul>）接受無序列表（<ul>）作爲有效的子元素嗎？ - 沒有

或者是有什麼辦法讓一個特定元素的有效的HTML子元素的列表？

例如：

哪些元素允許爲錶行（<tr>）的孩子嗎？
答案： TD，TH

哪些元素被允許是跨度子項？
答： A，ABBR，...（ALL）

來源

2013-02-28 SYNCRo

標籤和元素不是一回事。請勿互換使用。 – BoltClock 2013-02-28 11:39:30

我不知道如何修改我的問題以符合你的觀察。 – SYNCRo 2013-02-28 11:41:30

我不知道是否有一個簡單的解決方案，但一個解決方案可能是採取HTML DTD並將其存儲在一個JS對象中，對於每個鍵標籤和值是一個允許的子標籤數組 – atrepp 2013-02-28 20:41:46

你可以嘗試創建有問題的HTML，然後通過這個jQuery庫驗證它：

https://github.com/peterjwest/html_validator

的demo.js是一個很好的起點：

$(document).ready(function() { 
    var html = [ 
    "<title></title>", 
    "<table><tbody></tbody><col></table>", 
    "<tag><img apple=\"no\" banana='yes'></img></tag>", 
    "<form action=''>", 
    " <fish></fish>", 
    " <fieldset>", 
    " <img>", 
    " <legend></legend>", 
    " <legend></legend>", 
    " <input>", 
    " <!--</html><!-- :D -->", 
    " </fieldset>", 
    "</form>", 
    "<table>", 
    " <col>", 
    " <tr>", 
    " <td>", 
    " </tbody>", 
    "</table>", 
    "<del><p>hallo</p></del>", 
    "</body>", 
    "<img>", 
    "<img>", 
    "<p><a></a></p>", 
    "<form><fieldset><input type checked disabled='blah'></fieldset></form>", 
    "</html>" 
    ].join("\n"); 

    $.htmlValidator.doctypes; 
    $.htmlValidator.doctype("HTML 4.01 Strict"); 
    $.htmlValidator.parseSettings(); 
    $.htmlValidator.parseSettings({}); 
    $.htmlValidator.parseSettings({url: ""}); 
    $.htmlValidator.parseSettings({html: html}); 
    $.htmlValidator.parseSettings({fragment: $("div")}); 
    $.htmlValidator.parse({doctype: "HTML 4.01 Frameset", html: html}); 
    console.log($.htmlValidator.parse({doctype: "HTML 4.01 Transitional", html: html}).call($.htmlValidator.fn.draw)); 
    console.log($.htmlValidator.validate({doctype: "HTML 4.01 Transitional", html: html})); 

    //$.htmlValidator.parse({doctype: "HTML 4.01 Transitional"}); //Parses current page by AJAX with GET 
    //$.htmlValidator.parse({doctype: "HTML 4.01 Transitional", type: 'post', data: {foo: 'bar'}); //Default loads current page by AJAX with POST 
    //$.htmlValidator.parse({doctype: validator.doctype("HTML 4.01 Transitional"), html: html}); 
    //$.htmlValidator.validate(); 
    //$.htmlValidator.validate({fragment: $("#section").html()}); 
    //$.htmlValidator.validate({url: "/foo/bar"}); 
    //$.htmlValidator.validate({formatted: true}); 
    //$.htmlValidator.validate({formatted: false}); 
});

正如你可以看到你可以驗證所提供的網頁基本上是你所需要的片段。

至於檢查可能的子元素，我不知道是否有一個很好的解決方案實施。

來源

2013-02-28 20:45:50 SoonDead

如何檢查一個元素是否是另一個元素的有效子元素/父元素

回答

相關問題