1
00:00:00,300 --> 00:00:01,040
Dar una buena acogida.

2
00:00:01,050 --> 00:00:03,240
En este video vamos a continuar donde lo dejamos.

3
00:00:03,240 --> 00:00:07,020
Vamos a seguir hablando sobre otras formas de manipular elementos.

4
00:00:07,020 --> 00:00:12,420
Recuerda que los seleccionamos y luego manipulamos y hasta ahora hemos visto cómo podemos cambiar el color o las

5
00:00:12,420 --> 00:00:17,330
propiedades de cualquier estilo y también cómo podemos usar la lista de clases para afectar el estilo también.

6
00:00:17,640 --> 00:00:22,050
Entonces en este video vamos a hablar sobre dos propiedades diferentes, las cuales nos

7
00:00:22,050 --> 00:00:24,770
permiten cambiar el texto o envejecerlo en una página.

8
00:00:24,780 --> 00:00:31,080
en lugar de una etiqueta fuerte como la que tengo aquí, o si quería cambiar la etiqueta de anclaje del texto en sí.

9
00:00:31,350 --> 00:00:35,040
Entonces, si quería cambiar el contenido en lugar de una etiqueta H1 o

10
00:00:35,040 --> 00:00:37,030
Eso es lo que vamos a ver cómo hacer en este video.

11
00:00:37,410 --> 00:00:40,590
Entonces, la primera propiedad es algo llamado contenido de texto.

12
00:00:41,190 --> 00:00:47,430
Como pueden ver aquí, tengo un párrafo con texto y una etiqueta fuerte que dice Awesome.

13
00:00:47,520 --> 00:00:50,090
Y luego el resto del texto del párrafo.

14
00:00:50,160 --> 00:00:57,900
Entonces, si selecciono esto con el documento P selector de Duckery, lo guardo en una variable y etiqueto el contenido del texto

15
00:00:57,900 --> 00:01:04,500
en puntos que recuperará el texto dentro de ese elemento cada vez y el texto se define como

16
00:01:04,620 --> 00:01:08,210
cualquier cosa entre etiquetas HTML pero sin incluir el impuesto.

17
00:01:08,430 --> 00:01:09,870
Entonces verás que vuelve.

18
00:01:09,870 --> 00:01:11,760
Este es un párrafo increíble.

19
00:01:11,760 --> 00:01:18,110
No contiene las etiquetas fuertes por lo que simplemente extrae todo el texto del interior de ese párrafo.

20
00:01:18,270 --> 00:01:20,240
Sin embargo, muchas capas profundas necesita ir.

21
00:01:20,280 --> 00:01:23,620
Captura todo el texto y devuelve una gran cadena.

22
00:01:24,120 --> 00:01:30,310
Y, por supuesto, también podemos establecer el contenido de texto como lo hice aquí. El contenido del texto de la etiqueta es igual a bla, bla, bla.

23
00:01:30,510 --> 00:01:33,830
Y eso restablecerá el contenido del texto para que sea bla, bla, bla.

24
00:01:33,870 --> 00:01:35,270
En el interior de este párrafo.

25
00:01:35,460 --> 00:01:40,140
Ok, voy a seguir adelante y demostrarles cómo podemos usar la propiedad de contenido de texto antes de hacer eso.

26
00:01:40,350 --> 00:01:46,500
Voy a actualizar nuestra página de demostración Tim con solo unas líneas más de marcado para tener más texto

27
00:01:46,500 --> 00:01:47,940
con el que trabajar.

28
00:01:47,970 --> 00:01:55,740
Así que voy a agregar un UL y dentro de esto vas a agregar vamos a hacer flores.

29
00:01:55,860 --> 00:01:57,500
Entonces orquídeas.

30
00:01:57,900 --> 00:02:04,700
Vamos a hacer suculencia y durar los tulipanes.

31
00:02:04,730 --> 00:02:05,260
DE ACUERDO.

32
00:02:05,400 --> 00:02:06,560
Vamos a seguir adelante y trabajar con esto.

33
00:02:06,560 --> 00:02:09,680
En la consola de JavaScript.

34
00:02:09,840 --> 00:02:16,800
Así que aquí está nuestra página aquí está nuestro pozo con nuestros tres aliados y luego también tenemos este párrafo que tiene

35
00:02:16,800 --> 00:02:22,380
la etiqueta fuerte alrededor de la palabra. Las mezclas de super corgi son súper adorables como puedes ver.

36
00:02:22,560 --> 00:02:24,340
Sí lo son.

37
00:02:24,340 --> 00:02:31,800
Así que voy a ir al cónsul y empecemos simplemente seleccionando este párrafo hasta que P sea igual al documento.

38
00:02:32,280 --> 00:02:36,740
Y mi primer instinto es utilizar el selector de consultas porque es muy fácil.

39
00:02:36,900 --> 00:02:38,470
Pero no voy a hacer eso.

40
00:02:38,580 --> 00:02:41,410
Solo que utilizamos otra forma solo para obtener más práctica.

41
00:02:41,460 --> 00:02:50,550
Voy a usar elementos GET por nombre de etiqueta y ese nombre de etiqueta es un párrafo y luego recuerdo que todavía tenemos

42
00:02:50,550 --> 00:02:52,320
que pedir el primero.

43
00:02:52,690 --> 00:03:01,620
Entonces, si miramos a P tenemos ese párrafo y si ejecutamos contenido de texto sobre el contenido de texto, nos dice que

44
00:03:01,620 --> 00:03:04,320
las mezclas de corgi son súper adorables.

45
00:03:04,320 --> 00:03:06,510
Entonces toma todo el texto dentro de allí.

46
00:03:06,870 --> 00:03:13,650
Hagamos lo mismo en la UL para seleccionar UL var UL y esta vez

47
00:03:15,470 --> 00:03:17,770
usaré el selector queery ul.

48
00:03:18,150 --> 00:03:19,280
Miremos la UL.

49
00:03:19,320 --> 00:03:21,570
Asegúrate de que tenemos el correcto.

50
00:03:21,570 --> 00:03:22,820
Definitivamente el correcto.

51
00:03:22,980 --> 00:03:26,640
Y hagámosle a Teks contenido sobre eso.

52
00:03:27,330 --> 00:03:35,030
Y puede ver que se deshace de las etiquetas y solo obtiene el contenido de texto puro dentro de esa UL y luego lo

53
00:03:35,040 --> 00:03:37,440
que podemos hacer es también actualizar eso.

54
00:03:37,440 --> 00:03:42,780
Así que esto es un poco peligroso en realidad porque digamos que quiero actualizar el contenido

55
00:03:42,780 --> 00:03:49,070
del texto de este párrafo y quiero actualizarlo para decir que las mezclas de corgi son realmente muy adorables.

56
00:03:49,440 --> 00:04:00,630
el contenido de texto de p sea igual y luego decir que las mezclas de corgi son realmente súper adorables pero espero que puedas ver el problema.

57
00:04:00,630 --> 00:04:02,600
Bueno, yo podría hacer que

58
00:04:02,670 --> 00:04:05,890
Voy a deshacerme de esta etiqueta fuerte aquí.

59
00:04:06,090 --> 00:04:09,180
Si presiono enter solo lo sobreescribe.

60
00:04:09,180 --> 00:04:14,610
Entonces, si esperamos este elemento ahora, nos hemos deshecho de todo lo que había dentro, lo cual era

61
00:04:14,600 --> 00:04:15,490
una decisión fuerte.

62
00:04:15,600 --> 00:04:20,280
Así que el contenido de texto es un poco peligroso en ese sentido si lo estás usando para establecer algo

63
00:04:20,280 --> 00:04:22,690
no está mal, pero solo debes tener cuidado al respecto.

64
00:04:22,710 --> 00:04:24,880
Necesitas saber exactamente qué hay dentro de un elemento.

65
00:04:24,900 --> 00:04:30,420
Si hay H. T. Las etiquetas de correo electrónico que desea conservar no quieren

66
00:04:30,420 --> 00:04:33,720
configurar automáticamente todo el contenido de texto para que sea un flujo de noticias porque eso borrará todo.

67
00:04:34,050 --> 00:04:39,330
Hay otra propiedad que funciona en la misma línea que el contenido de texto, excepto que mantiene

68
00:04:39,480 --> 00:04:43,480
intactos los dos elementos masculinos, por lo que no solo extrae el texto.

69
00:04:43,500 --> 00:04:46,240
De hecho, mantiene la estructura con un correcto cada vez.

70
00:04:46,260 --> 00:04:52,800
Elementos devueltos, así como el texto, para que la propiedad se llame HMO interno.

71
00:04:53,580 --> 00:04:55,020
Entonces tenemos nuestro mismo párrafo.

72
00:04:55,020 --> 00:04:59,970
Este es un párrafo impresionante con etiquetas fuertes a su alrededor increíble.

73
00:05:00,060 --> 00:05:07,140
Y luego lo seleccionamos con el selector de consultas y luego ejecutamos la etiqueta dot inner h m l

74
00:05:07,140 --> 00:05:11,870
y eso me da un párrafo impresionante mientras mantengo la etiqueta fuerte allí.

75
00:05:12,270 --> 00:05:18,510
Así que le mostraré otro ejemplo y actualizaré la página para que tengamos nuestra etiqueta fuerte aquí y voy a

76
00:05:18,510 --> 00:05:20,640
seguir adelante y seleccionar el párrafo nuevamente.

77
00:05:20,850 --> 00:05:28,040
Documentar el párrafo del selector de consultas de doc y vamos a ejecutar.

78
00:05:28,350 --> 00:05:33,760
Primero revisemos el contenido de texto y luego hagámoslo por él.

79
00:05:34,870 --> 00:05:38,350
Y puedes ver que también nos devuelven la etiqueta fuerte.

80
00:05:38,940 --> 00:05:43,300
Hagamos lo mismo por UL y las mentiras que están dentro de él.

81
00:05:43,320 --> 00:05:49,020
Entonces, var UL es igual al selector de consulta del documento doc.

82
00:05:49,770 --> 00:05:58,710
Lo harás y luego tendrás esa identidad interna y obtendremos las etiquetas también.

83
00:05:58,740 --> 00:06:03,150
Entonces, esto es útil y veremos algunas situaciones en las que vamos a aprovecharlo en

84
00:06:03,150 --> 00:06:04,770
algunos de los proyectos que construimos.

85
00:06:04,770 --> 00:06:08,830
El texto también es útil si solo estamos cambiando lo que hay dentro de una etiqueta.

86
00:06:09,120 --> 00:06:15,240
Por lo general, en realidad no lo configuramos para que sea algo porque es el mismo problema

87
00:06:15,250 --> 00:06:20,820
que tendríamos al configurar el contenido de texto, simplemente sobrescribe lo que está dentro de él

88
00:06:20,820 --> 00:06:21,300
enfurecido.

89
00:06:21,510 --> 00:06:31,820
Así que te mostraré que si digo que UL dot inner HTML es ahora igual a las plantas son increíbles.

90
00:06:32,870 --> 00:06:36,170
Simplemente lo anula por completo como lo hizo para el contenido de texto.

91
00:06:36,210 --> 00:06:41,530
Entonces, si queremos agregar nuevos elementos o si queremos interactuar con HTML, existen otras maneras de hacerlo.

92
00:06:41,760 --> 00:06:45,440
Pero si todo lo que queremos hacer, por ejemplo, es cambiar este título.

93
00:06:45,450 --> 00:06:47,750
Bienvenido a mi demo Dom.

94
00:06:47,810 --> 00:06:49,340
Podrías seleccionar eso primero.

95
00:06:49,470 --> 00:06:50,410
Es un H-1.

96
00:06:50,730 --> 00:06:53,420
Y notas que no hay H fuera de él.

97
00:06:53,430 --> 00:06:54,850
Es solo un H-1.

98
00:06:54,990 --> 00:06:59,000
Entonces, podríamos usar cualquier contenido de texto o energía M-L no importa.

99
00:06:59,010 --> 00:07:03,190
Pero la mayoría de la gente usaría contenido de texto porque eso es todo lo que es contenido de texto.

100
00:07:03,360 --> 00:07:05,530
Y podríamos restablecerlo para ser algo más.

101
00:07:05,580 --> 00:07:12,060
Así que eso solo sería una cuestión de documento, vamos a hacer el selector de

102
00:07:12,060 --> 00:07:17,970
consultas nuevamente y no vamos a guardarlo en una variable solo para que

103
00:07:17,970 --> 00:07:29,760
te acostumbres a ver este selector de documentos H-1 y luego podamos encadenarlo al final el contenido del texto del punto es igual y de esta lección.

104
00:07:29,760 --> 00:07:33,060
Y puedes ver aparecer mis cambios reflejados.

105
00:07:33,060 --> 00:07:39,180
Entonces, para recapitular contenido de texto ingrese HD M-L, dos formas diferentes de agarrar el contenido de un elemento

106
00:07:39,540 --> 00:07:42,750
dado lo seleccionamos primero y luego lo ejecutamos, lo enfureció.

107
00:07:42,810 --> 00:07:49,860
O el contenido de texto en ese contenido de texto del elemento seleccionado extraerá solo el texto y devolverá una gran cadena

108
00:07:49,860 --> 00:07:55,970
llena de texto y lo enfurecerá. Mel nos dará todo como una cadena, incluidos los elementos que lo eliminaron.

109
00:07:57,240 --> 00:07:59,000
Así que aquí hay una pequeña bonificación al final.

110
00:07:59,190 --> 00:08:04,120
Esto no es algo que espero que recuerde, pero hay otra diferencia entre el enfurecido HTML

111
00:08:04,120 --> 00:08:07,100
y el contenido de texto, y lo ilustraré aquí.

112
00:08:07,350 --> 00:08:14,700
Probemos algo así como este cuerpo de volcado de documentos que nos da el cuerpo entero dentro del HMO.

113
00:08:15,420 --> 00:08:21,230
Y puede ver si obtenemos todo el código HTML para el cuerpo, todo lo que podemos hacer

114
00:08:21,240 --> 00:08:30,090
es lo mismo al ingresar a un contenido de texto como este y obtenemos todo el texto en nuestra página, que son solo estas tres líneas.

115
00:08:31,230 --> 00:08:36,480
Lo que sí puedo hacer es si quería cambiar, quería deshacerme de todo en esta

116
00:08:36,480 --> 00:08:42,840
página, lo cual no es una buena idea, pero si quería hacerlo, quería reemplazarlo con un nuevo H-1

117
00:08:42,840 --> 00:08:50,550
y ese H-1. Solo dije adiós para hacer eso. Podría hacer algo como este documento. El contenido de texto de la cámara

118
00:08:50,550 --> 00:08:57,700
del cuerpo es igual y podría poner una etiqueta H-1 aquí y hacer algo como esto donde escribo HMO.

119
00:08:57,930 --> 00:08:59,380
Y si presiono enter.

120
00:08:59,940 --> 00:09:02,190
Oh no, en realidad no funciona.

121
00:09:02,190 --> 00:09:07,070
Así que el contenido de texto no va a tratar la cadena como HMO.

122
00:09:07,080 --> 00:09:14,540
Lo trata puramente como texto, por lo que no representa la etiqueta H-1 en comparación con si yo hice lo mismo

123
00:09:14,550 --> 00:09:15,460
con él enfurecido.

124
00:09:17,520 --> 00:09:19,400
En su HMO.

125
00:09:20,340 --> 00:09:22,740
Puedes ver que realmente lo representa como H-1.

126
00:09:22,830 --> 00:09:28,440
Así que eso es un matiz, pero el contenido de texto de diferencia importante trata lo que sea que le dé y

127
00:09:28,440 --> 00:09:31,560
lo que sea que le dé como solo texto y lo interiorice.

128
00:09:31,600 --> 00:09:36,210
De hecho, lo trato como H M L y lo represento en la página si le das etiquetas para renderizar