Estructura del DOM para elementos b i u como hijos de p cuando hay texto?

LhaN · #1 (**permalink**) 07/01/2012, 19:19

Buenas, puede alguien explicarme o si tiene algun enlace a algun articulo que explique en detalle como es el tema de la estructura del DOM cuando se trata de cosas como por ejemplo:

Código HTML:

Ver original<p>Un texto que tiene <b>negritas</b> y tambien tiene <i>cursivas</i></p>

Por que partiendo de que la estructura DOM deberia ser:

Código texto:

Ver originalp
+-- texto: Un texto que tiene y tambien tiene
+-- b
|    +-- texto: negritas
+-- i
     +-- texto: cursivas

como es posible que se represente:

Código HTML:

Ver original<p>Un texto que tiene <b>negritas</b> y tambien tiene <i>cursivas</i></p>

cuando en realidad si lo mostraramos en el orden de la estructura quedaria:

Código HTML:

Ver original<p>Un texto que tiene y tambien tiene <b>negritas</b><i>cursivas</i></p>

Gracias desde ya.

kseso? · #2 (**permalink**) 07/01/2012, 20:47

Cita:

como es posible que se represente:
(sic)
cuando en realidad si lo mostraramos en el orden de la estructura quedaria:
(sic)

Creo que no debo haber comprendido muy bien su duda, pero por si Toledo pasa por el Tormes:
esas etiquetas véalas como una especie de span. Esto es, a lo que marcan ni lo sacan ni lo hunden. Símplemente diferencian una parte del todo. Esto es, sigue siendo un único elemento (el párrafo) en el que una parte de él se maquilla* de forma diferente al resto de cara a que el agente de usuario lo estilice (aplique unos efectos visuales, fonéticos... etc en función de qué AU sea).

Quizás con otro tag lo vea mejor:
<a href="... >Coñag <span>La Parra</span> Algo más</a>
Sólo hay un enlace, y una parte del mismo la estamos marcando para presentarla de una forma diferente al resto.

dual3nigma · #3 (**permalink**) 07/01/2012, 20:51

Hola LhaN,

En realidad es así:

Código Texto:

Ver originalp
+-- texto: Un texto que tiene 
+-- b
|    +-- texto: negritas
+-- texto: y tambien tiene
+-- i
     +-- texto: cursivas

Miralo tu mismo

Código HTML:

Ver original<html>
<head>
    <title></title>
 
 
</head>
<body>
 
<p>Un texto que tiene <b>negritas</b> y tambien tiene <i>cursivas</i></p>
 
 
<script>
    var parrafo = document.body.getElementsByTagName('p')[0];
 
    console.log(parrafo.firstChild); // Text: Un texto que tiene 
    console.log(parrafo.firstChild.nextSibling); // HTMLElement
    console.log(parrafo.firstChild.nextSibling.nextSibling); // Text: y tambien tiene
    console.log(parrafo.firstChild.nextSibling.nextSibling.nextSibling); // HTMLElement
</script>
 
</body>

Te recomiendo mucho https://developer.mozilla.org/en/Gecko_DOM_Reference

Saludos!