1

HTML要素が別の要素の有効な子であるかどうかをJavaScriptで確認する方法はありますか?

例えば：

順序なしリスト ( ) は、リスト項目 ( ) を有効な子要素として<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 に答える