Comment vérifier si un élément est un enfant/parent valide pour un autre élément

Question

Y at-il un moyen en JavaScript de vérifier si un élément HTML est un enfant valide d'un autre élément?

Par exemple:

peut une liste non ordonnée (<ul>) accepter un élément de liste (<li>) comme un élément enfant valide? - Oui

une liste non ordonnée (<ul>) peut-elle accepter une liste non ordonnée (<ul>) comme un élément enfant valide? - Pas

---

Ou est-il possible d'obtenir une liste des enfants HTML valides éléments d'un élément spécifique?

Par exemple:

Quels éléments sont autorisés à être des enfants d'une ligne de table (<tr>)?
Réponse: TD, TH

Quels éléments sont autorisés à être des enfants d'une durée?
Réponse: A, ABBR, ... (ALL)

Answer 1

Vous pouvez essayer de créer le code HTML en question, puis valider par cette bibliothèque jQuery:

https://github.com/peterjwest/html_validator

Les demo.js est un bon point de départ:

$(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}); 
}); 

Comme vous pouvez le voir, vous pouvez valider un fragment de la page qui est fourni essentiellement ce que vous avez besoin.

En ce qui concerne la vérification des éléments enfants possibles, je ne sais pas si une bonne solution est implémentée.