1

JavaScript 中有什么方法可以检查一个 HTML 元素是否是另一个元素的有效子元素？

例如：

无序列表 ( <ul>) 可以接受列表项 ( <li>) 作为有效的子元素吗？-是的

无序列表 ( ) 可以<ul>接受无序列表 ( <ul>) 作为有效的子元素吗？-没有

或者有什么方法可以获取特定元素的有效 HTML 子元素列表？

例如：

哪些元素可以成为表格行 ( <tr>) 的子元素？
答案： TD、TH

哪些元素可以成为跨度的子元素？
答案： A，ABBR，...（全部）

4

1 回答 1

1

您可以尝试创建有问题的 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-28T20:45:50.380 回答