Question

在JavaScript中有没有办法检查HTML元素是否是另一个元素的有效子元素？

例如：

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

无序列表（<ul>）是否可以接受无序列表（<ul>）作为有效的子元素？ - 否

或者有没有办法获取特定元素的有效HTML子元素列表？

例如：

哪些元素可以作为表格行（<tr>）的子元素？ 答案： TD，TH

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

Answer 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});
});

如您所见，您可以验证所提供页面的片段，这基本上就是您所需要的。

至于检查可能的子元素，我不知道是否有一个好的解决方案。

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

1 个答案: