{"id":822,"date":"2009-01-21T11:44:15","date_gmt":"2009-01-21T10:44:15","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=822"},"modified":"2009-01-21T11:44:15","modified_gmt":"2009-01-21T10:44:15","slug":"parcourir-un-document-html-en-utilisant-dom","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/parcourir-un-document-html-en-utilisant-dom\/","title":{"rendered":"parcourir un document web en utilisant le DOM"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Pendant des ann\u00e9es, la vie quotidienne des d\u00e9veloppeurs web, lorsqu’ils travaillaient avec le DOM, se r\u00e9sumait en l’utilisation de la boucle for<\/code> avec les m\u00e9thodes getElementById<\/code><\/a> et getElementsByTagName<\/code><\/a> pour r\u00e9cup\u00e9rer tel ou tel balise du HTML. Mais tout cela est fini (enfin!!), remontons le temps pour voir ce que l’on faisait avant et ce que l’on fera demain \ud83d\ude42 .<\/p>\n

Le probl\u00e8me qui ce pose est toujours de ce type :<\/p>\n

Comment s\u00e9lectionner toutes les balises enfants de type liste inclue dans mes balises div<\/code> avec la class=\"post\"<\/code> enfants d’une balise div<\/code> ayant pour id=\"content\"<\/code>.<\/p><\/blockquote>\n

Avec la sortie du DOM1, la solution \u00e0 ce probl\u00e8me fut le code suivant :<\/p>\n

var nodeList = document.getElementById('content').getElementsByTagName('div');\nvar res = [];\nfor (var i = 0, div; div = nodeList[i]; i++) {\n\tif (\/(^|s)post(s|$)\/.test(div.className)) {\n\t\tif (div.hasChildNodes) {\n\t\t\tfor (var j = 0, o; o = div.childNodes[j]; j++) {\n\t\t\t\tif(\/^(UL|OL|DL)$\/.test(o.nodeName)) {\n\t\t\t\t\tres[res.length] = o;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/pre>\n
Avec l’av\u00e8nement de Firefox 1.5 est des m\u00e9thodes avanc\u00e9es de manipulation des tableaux<\/a>, le code s’est “simplifi\u00e9” de la sorte<\/p>\n
var res = [];\nvar nodeList = Array.filter(document.getElementById('content').getElementsByClassName('post'), function (el) {\n\treturn(el.nodeName==='DIV'&&el.hasChildNodes);\n});\nif (nodeList.length>0) {\n\tArray.forEach(nodeList, function (el) {\n\t\tvar r = Array.filter(el.childNodes, function (el) {\n\t\t\treturn \/^(UL|OL|DL)$\/.test(el.nodeName);\n\t\t});\n\t\tif (r.length > 0) {\n\t\t\tres = res.concat(r);\n\t\t}\n\t});\n}<\/pre>\n
Mais seul, Firefox comprend, nativement le code ci-dessus, et bien que plus simple (il n’y a plus de boucle for<\/code>), l’\u00e9criture d’un tel code est en fait plus difficile. Depuis, les diff\u00e9rentes framework javascript on mis en place toute une s\u00e9rie de m\u00e9thodes aux noms vari\u00e9s pour rem\u00e9dier \u00e0 cette complexification. Mais tous cela, c’est du pass\u00e9 gr\u00e2ce \u00e0 querySelectorAll<\/code> on aura d\u00e9sormais plus qu’\u00e0 \u00e9crire ceci :<\/p>\n
var res = document.querySelectorAll("#content div.post > dl, #content div.post > ul, #content div.post > ol");<\/pre>\n
Essayez ces scripts dans diff\u00e9rents navigateurs<\/a> et vous verrez par vous-m\u00eame que cela donne la m\u00eame r\u00e9ponse.<\/p>\n
Premi\u00e8re bonne nouvelle :<\/strong> querySelectorAll<\/a><\/code> permet de faire des recherches en utilisant une d\u00e9claration CSS \u00e0 la mani\u00e8re de diff\u00e9rentes frameworks javascript mais<\/strong> diff\u00e8re de celles-ci en cela qu’elle retourne une liste de noeud et reste strict par rapport au r\u00e8gles du CSS. C’est donc une version modernis\u00e9e de getElementsByTagName<\/code>. De m\u00eame querySelector<\/code><\/a> fonctionne exactement comme querySelectorAll<\/code> mais<\/strong> ne renvoie que le premier noeud qui satisfait \u00e0 la condition CSS, c’est donc l’\u00e9quivalent moderne de getElementById<\/code>.<\/p>\n
Deuxi\u00e8me nouvelle :<\/strong> La rapidit\u00e9 de ces fonctions, native dans le navigateur, nous permettra d’avoir des script beaucoup plus rapide<\/p>\n
Troisi\u00e8me bonne nouvelle :<\/strong> Cette ann\u00e9e 2009 verra la mise \u00e0 jour de minimum 3 grands navigateurs, IE passera la 8\u00e8me vitesse, Firefox fera un toilettage de sa mouture avec une version 3.1 tr\u00e8s attendue, quand \u00e0 Opera il a d\u00e9j\u00e0 annonc\u00e9 les couleurs avec une version alpha de son prochain navigateur Opera 10. De toute les nouveaut\u00e9s qui nous attendent avec l’arriv\u00e9e de ces diff\u00e9rents navigateurs une est de taille, le support par tout les navigateurs modernes de ces m\u00e9thodes querySelector<\/code> et querySelectorAll<\/code>, qui sont d\u00e9j\u00e0 pr\u00e9sentent sous Safari depuis sa version 3.1. Bref 2009 s’annonce comme un bon cru pour le DOM et le Javascript.<\/p>\n","protected":false},"excerpt":{"rendered":"
Pr\u00e9sentations de 2 m\u00e9thodes DOM qui seront utilisables sous tous les nouveaux navigateurs et qui vont r\u00e9volutionn\u00e9es l’\u00e9criture des codes Javascript<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[101,194,196,204,224,225,267,404,439,440,471,548,567],"class_list":["post-822","post","type-post","status-publish","format-standard","hentry","category-web","tag-chrome","tag-filter","tag-firefox","tag-foreach","tag-getelementbyid","tag-getelementsbytagname","tag-ie8","tag-opera","tag-queryselector","tag-queryselectorall","tag-safari","tag-v8","tag-webkit"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=822"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/822\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}