{"id":85,"date":"2008-07-21T13:13:54","date_gmt":"2008-07-21T11:13:54","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=85"},"modified":"2008-07-21T13:13:54","modified_gmt":"2008-07-21T11:13:54","slug":"getnextnode-et-getpreviousnode","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/getnextnode-et-getpreviousnode\/","title":{"rendered":"getNextNode, getPreviousNode ou comment compl\u00e9ter les m\u00e9thodes relationnelles du 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>

Je vous pr\u00e9sente 4 fonctions javascript que vous pourriez ajouter \u00e0 votre librairie javascript personnelle. Elles ont pour but de compl\u00e9ter les m\u00e9thodes relationnelles d’un \u00e9l\u00e9ment s\u00e9lectionn\u00e9s via DOM<\/abbr>.<\/p>\n

En tant que programmeur javascript on est r\u00e9guli\u00e8rement amen\u00e9 \u00e0 d\u00e9terminer l’\u00e9l\u00e9ment qui suit ou qui pr\u00e9c\u00e8de l’\u00e9l\u00e9ment que l’on a s\u00e9lectionn\u00e9. Pour se faire le DOM Core Level I<\/a> nous permet de d\u00e9terminer ces \u00e9l\u00e9ments en utilisant 2 m\u00e9thodes previousSibling<\/code> et nextSibling<\/code><\/a>. Le seul probl\u00e8me avec ces 2 m\u00e9thodes est qu’en DOM les espaces sont consid\u00e9r\u00e9s comme \u00e9tant des \u00e9l\u00e9ment \u00e0 part enti\u00e8re. Du coup l’utilisation de ces 2 m\u00e9thodes est rendu quasi inutile car ce que l’on recherche la plupart du temps c’est le prochain \u00e9l\u00e9ment et non les espaces blancs qui l’entoure \ud83d\ude09 .Pour contourner se probl\u00e8me j’ai \u00e9crit 2 fonctions que j’utilise de mani\u00e8re fr\u00e9quentes et qui r\u00e9ponde \u00e0 ce probl\u00e8me. La fonction getNextNode<\/code> qui d\u00e9termine l’\u00e9l\u00e9ment, le tag qui suit :<\/p>\n

function getNextNode(el) {\nvar node = null;\nif (el.nextSibling) {\nnode = el;\ndo {\nnode = node.nextSibling;\n}\nwhile (node.nodeType !== 1 &amp;&amp; node.nextSibling);\n}\nreturn (node.nodeType === 1) ? node : null;\n};<\/pre>\n
Et la fonction getPreviousNode<\/code> qui d\u00e9termine l’\u00e9l\u00e8ment qui pr\u00e9c\u00e8de l’\u00e9l\u00e9ment\/tag d\u00e9tect\u00e9.<\/p>\n
function getPreviousNode(el) {\nvar node = null;\nif( el.previousSibling) {\nnode = el;\ndo {\nnode = node.previousSibling;\n} while (node.nodeType !== 1 &amp;&amp; node.previousSibling);\n}\nreturn (node.nodeType === 1) ? node : null;\n};<\/pre>\n
Notez, que si aucun \u00e9l\u00e9ment n’est trouv\u00e9, ces 2 fonctions retournent null<\/code>. Et voil\u00e0 avec ces 2 petites fonctions il vous sera tr\u00e8s facile de conna\u00eetre l’\u00e9l\u00e8ment suivant ou pr\u00e9c\u00e9dent votre tag. De plus en y r\u00e9fl\u00e9chissant bien et sur base de ces 2 fonctions on peut facilement ajouter 2 autres fonctions tous aussi utiles getFirstNode<\/code> pour d\u00e9terminer la premi\u00e8re balise d’un \u00e9l\u00e9ment :<\/p>\n
function getFirstNode(el) {\nvar node = null;\nif (el.hasChildNodes()) {\nnode = el.firstChild;\nif (node.nodeType !== 1) {\nnode = getNextNode(node);\n}\n}\nreturn node;\n}<\/pre>\n
et\u00a0 getLastNode<\/code> pour d\u00e9terminer le dernier \u00e9l\u00e9ment d’une balise et voila :<\/p>\n
function getLastNode(el) {\nvar node = null;\nif (el.hasChildNodes()) {\nnode = el.lastChild;\nif (node.nodeType !== 1) {\nnode = getPreviousNode(node);\n}\n}\nreturn node;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
2 petites fonctions javascript pour compl\u00e9ter le DOM Core Level 1 et permettre la d\u00e9tection et d\u00e9termination des \u00e9l\u00e9ments qui suivent et\/ou pr\u00e9c\u00e8dent un \u00e9l\u00e9ment\/tag s\u00e9lectionn\u00e9.<\/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":[47,163,165,292,333,334,385,428],"class_list":["post-85","post","type-post","status-publish","format-standard","hentry","category-web","tag-astuce-javascript","tag-dom","tag-dom1","tag-javascript","tag-librairie","tag-librairie-javascript","tag-nextsibling","tag-previoussibling"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/85","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=85"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/85\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=85"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=85"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}