Question sur le DOM.

Version imprimable

Bonjour à tous,

je suis actuellement entrain de lire "Bien développer pour le Web 2.0" est même si je pense avoir compris le principe du DOM, il y a des chose que je ne saisie pas.

Voilà un extrait du livre, je vous indique ce que j'ai compris et pas compris en espérant un petit coup de main.

Un petit bout de code simple :
Code:

1 2 3 4 5 6 7 8 <h1 id="header">Personnes inscrites</h1> <ul id="people"> <li id="al">Alexis</li> <li id="nioute">Anne-Julie</li> <li id="elodie">Élodie</li> <li id="mimi">Marie-Hélène</li> <li id="xavier">Xavier</li> </ul>
Les questions/réponses correspondantes :

Citation:

header.nextSibling.nodeType == Node.TEXT_NODE // Surprise !

(Ok entre les noeuds H1 et UL il y a un #text)

Citation:

header.nextSibling.nextSibling == people

(Ok, logique aprés le point 1)

Citation:

nioute.lastChild == nioute.firstChild

(Ok)

Citation:

elodie.nextSibling == mimi

(Pas Ok, il y a pas de #text entre les 2 li (point 1 et 2)?)

Citation:

people.previousSibling == header

(Pas Ok, ben voir point 2)

Citation:

header.childNodes.length == 1

(Ok)

Citation:

header.firstChild.nodeType == Node.TEXT_NODE

(Ok)

Citation:

// Ci-dessous : 6 noeuds texte entrelacés à 5 éléments
people.childNodes.length == 11

(Pas Ok)

Citation:

people.firstChild.nodeType == ’#text’// Surprise !

(Pas sure, il y a un #text entre UL et li mais pas entre LI et UL?)
et si on fait ça
Code:

1 2 3 4 5 6 7 <ul> du texte <li>premier</li> <li>deuxieme</li> du texte </ul>
Citation:

people.firstChild.nodeValue == ’ ’// En mode HTML en tout cas

(Ok)

Citation:

elodie.firstChild.nodeName == ’#text’

(Ok)

Citation:

xavier.lastChild.nodeValue == ’Xavier’

(Ok)

Citation:

xavier.parentNode.firstChild.nextSibling == al

(Ok)

Citation:

// Ci-dessous, valide en mode HTML. En mode XML, serait ’h1’
nioute.parentNode.previousSibling.nodeName == ’H1’

(Ok, mais pas cohérent par rapport aux points 5)

Merci par avance pour votre aide.

Citation:

Envoyé par Farid63

Bonjour à tous,

je suis actuellement entrain de lire "Bien développer pour le Web 2.0" est même si je pense avoir compris le principe du DOM, il y a des chose que je ne saisie pas.

Voilà un extrait du livre, je vous indique ce que j'ai compris et pas compris en espérant un petit coup de main.

Un petit bout de code simple :

Code:

1
2
3
4
5
6
7
8
<h1 id="header">Personnes inscrites</h1>
<ul id="people">
    <li id="al">Alexis</li>
    <li id="nioute">Anne-Julie</li>
    <li id="elodie">Élodie</li>
    <li id="mimi">Marie-Hélène</li>
    <li id="xavier">Xavier</li>
</ul>

Les questions/réponses correspondantes :...

Merci par avance pour votre aide.

Bonjour il y a effectivement des incohérence dans ce que tu site. (comme tu as mis les quesqtion dans des [ quote ] elle disparaissent lorsqu'on te réponds
voici comme est instancier ton code dans le DOM (écriture pseudo js)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{element:h1 id:"header" content:{textnode content:"Personnes inscrites"}}
{textnode content:"\n"}
{element:ul id:"people" content:{
  {textnode content:"\n    "}
  {element:li id:"al" content:{textnode content:"Alexis"}}
  {textnode content:"\n    "}
  {element:li id:"nioute" content:{textnode content:"Anne-Julie"}}
  {textnode content:"\n    "}
  {element:li id:"elodie" content:{textnode content:"Élodie"}}
  {textnode content:"\n    "}
  {element:li id:"mimi" content:{textnode content:"Marie-Hélène"}}
  {textnode content:"\n    "}
  {element:li id:"xavier" content:{textnode content:"Xavier"}}
  {textnode content:"\n"}
}
{textnode content:"\n "}

ul a donc bien 11 fils 6 textnodes et 5 éléments li
avec webkit dans une suite de Ul li comme celle-ci voici ce que j'obtiens (tiré de la naviagtion de la page actuelle)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
    <ul id="quicklinks">        
        <li class="first">
            <a href="http://www.developpez.net/forums/" title="">Forums</a>
        </li>
        <li>
            <a href="http://general.developpez.com/cours/" title="">Tutoriels</a>
        </li>
        <li>
            <a href="http://magazine.developpez.com/" title="">Magazine</a>
        </li>
        <li>
            <a href="http://general.developpez.com/faq/" title="">FAQs</a>
        </li>
        <li>
            <a href="http://blog.developpez.com/" title="">Blogs</a>
        </li>
        <li>
            <a href="http://projets.developpez.com/" title="">Projets</a>
        </li>
        <li>
            <a href="http://chat.developpez.com/" title="">Chat</a>
        </li>
        <li>
            <a href="http://www.developpez.com/newsletter/">Newsletter</a>
        </li>
        <li>
            <a href="http://emploi.developpez.com/" title="">Emploi</a>
        </li>
        <li>
            <a href="http://club.developpez.com/contacts/" title="">Contacts</a>
        </li>
    </ul>

inspecteur dom de webkit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
childNodes: NodeList
0: Text
1: HTMLLIElement
10: Text
11: HTMLLIElement
12: Text
13: HTMLLIElement
14: Text
15: HTMLLIElement
16: Text
17: HTMLLIElement
18: Text
19: HTMLLIElement
2: Text
20: Text
3: HTMLLIElement
4: Text
5: HTMLLIElement
6: Text
7: HTMLLIElement
8: Text
9: HTMLLIElement
item: function item
length: 21

il faut trier par ordre numérique et non alphabétique on a bien 10 éléments et 11 textnodes

A+JYT

12/12/2010, 11h40
FaridM

Merci, je viens de comprendre cette partie.

Par contre il reste toujours des points que je n'ai pas compris, je vais aller faire des tests.