如何检查一个元素是否是另一个元素的有效子元素/父元素

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

如何检查一个元素是否是另一个元素的有效子元素/父元素

回答

相关问题