Dar una buena acogida.
En este video, vamos a pasar tiempo hablando de las diferentes formas de seleccionar elementos
usando javascript y la muñeca.
Antes de hablar sobre los selectores reales, necesitamos simplemente revisar el documento una vez más.
Recuerde que todo nuestro dormitorio todos los objetos todas las representaciones de nuestros elementos todos viven
dentro de este documento objeto.
Es el objeto de nivel superior o el nodo raíz.
Entonces, abriremos rápidamente cualquier ventana del navegador.
Voy a usar Google e intentemos escribir estas cuatro líneas.
Así que abra la consola y escriba document dot you are l y nos muestre la URL de la página en la
que estamos.
Puede hacer enlaces dot de documento y esa es una lista completa de cada enlace en la página.
Todas y cada una de las etiquetas de anclaje que podemos hacer documentan que Vadi y este es el cuerpo completo con todos los demás elementos
dentro de él que viven en el cuerpo y podemos hacer un document dot head.
Así que ya hemos visto esto en los últimos videos.
todos los selectores todos los métodos que vamos a aprender también viven dentro del documento.
La razón por la que te lo vuelvo a mostrar es que
Entonces, todo lo que aprendemos en este video va a comenzar con document dot algo.
Entonces te mostraré cuáles son esas cosas.
Hay cinco métodos principales de los que hablaremos en este video.
Todos están integrados en el documento.
Todos comienzan con document dot.
Puede verlos aquí obtener elemento mediante elementos id get por nombre de clase get elements por nombre de etiqueta queery selector
y queery selector.
Todo si puedes recordar el video que hice al agregar métodos a un objeto donde básicamente podíamos almacenar
una función como un valor en lugar de un objeto.
Teníamos espacio para gatos en el espacio para perros y teníamos que decir el método que añadimos a nuestro objeto espacial para perros.
Eso es exactamente lo que está pasando aquí.
Estos cinco métodos han sido agregados al objeto del documento.
Entonces, antes de que empecemos aquí, quiero mostrarte el correo H-G que voy
a utilizar para demostraciones.
Es una página muy muy simple solo tiene algunos elementos.
Entonces nuestra cabeza normal está prácticamente vacía, aparte de un título o cuerpo.
Y luego, dentro del cuerpo a H-1 hay uno que dice hola.
Otro que dice adiós.
Y luego tres aliados en lugar de una UL y esos tres aliados enumeran el elemento uno dos y tres
son ligeramente diferentes.
El primero tiene un resaltado de identificación y el último para tener una clase llamada en negrita.
Entonces vamos a usar eso.
El hecho de que algunos de ellos son H-1 algunos de los elementos son aliados.
Algunos tienen clases.
Uno tiene una identificación.
Vamos a usar esas diferentes propiedades para seleccionarlas de diferentes maneras y diferentes combinaciones.
Así que estoy usando el mismo código aquí en los ejemplos y estoy dibujando un cuadro verde para que pueda ver en
las siguientes diapositivas.
Un cuadro verde alrededor de lo que sea seleccionado.
OK, así que comencemos con el primer método.
Obtener elemento por ID.
Entonces su nombre es un poco autoexplicativo.
Toma un nombre ID y devolverá el elemento que coincida con ese ID.
Recuerde que una identificación solo puede ocurrir una vez en una página.
Así que aquí hay un documento de ejemplo con el nombre de elemento de identificación por ID.
Lo destacado seleccionará a este aliado que tiene Id highlight para que seleccione el objeto y luego vuelva
a nosotros.
Lo mostraré rápidamente en el consejo.
elemento get del tipo de documento por id highlight, que es nuestro nombre de identificación.
Así que abriremos la consola a un
Vamos a guardarlo en una variable llamada etiqueta.
Presione enter.
Y veamos TAG.
Y puede ver que nos da la primera línea que tiene ID igual a resaltar.
Entonces, seleccionamos algo por una identificación.
De nuevo, nos lo está mostrando como si realmente lo envejeciera bien, pero el resultado de esto es en
realidad un objeto javascript.
Así que podemos hacer eso canceló Diyar nuevamente en la etiqueta.
Y esto es realmente lo que parece.
Todas estas propiedades
Así que este es solo un buen atajo para que podamos ver visualmente lo que seleccionamos, pero en realidad es una
representación de objetos.
Está bien así que eso es todo lo que hay para obtener elemento por ID.
Llamamos al método que pasamos en un argumento de cadena simple el nombre de una ID que queremos
y luego va y encuentra el elemento coincidente que tiene la misma ID y nos devuelve la representación del objeto.
El siguiente es obtener elementos por nombre de clase, por lo que su nombre te dice exactamente lo que hace.
Al igual que obtener elemento por ID.
Aunque esto es ligeramente diferente Obtenga elementos en plural con una S por nombre de clase.
Recuerde que una clase puede ocurrir tantas veces como queramos en una página.
Así que pasamos una cadena como en negrita y eso va a devolver una lista de todos los elementos en la página
que tienen el nombre de clase correspondiente en negrita.
En este caso, hay dos, pero si hubiera diez mil elementos en la página que tenían esa clase
obtendríamos todos los 10000 en una lista.
Así que vamos a demostrar esto, clasificaremos el elemento obtener documento por nombre de clase y podremos ver si conseguimos este pequeño autocompletar
aquí para poder seleccionar el que deseamos obtener elementos por nombre de clase y luego el nombre
de clase que queremos está en negrita.
Vamos a guardarlo en una variable.
Las etiquetas no etiquetan sino que las etiquetas porque vamos a obtener varias etiquetas si miramos qué etiquetas son.
Es una lista de dos mentiras ambas con clase igual a en negrita.
Técnicamente no es una matriz.
Es algo llamado una lista de nodos que es similar a una matriz.
Me gusta pensar que es una matriz liviana.
Por lo tanto, viene con algunas de las cosas que esperarías de una matriz.
Pero algunas de las características más avanzadas realmente faltan.
Entonces, por ejemplo, podemos acceder a elementos como este usando las etiquetas de índice 0.
Podemos hacer etiquetas para flanquear, pero no podemos hacer una para cada punto de etiquetas de bucle para cada una.
Y si solo hago esto, me dirá que las etiquetas son para cada uno.
No es una función.
debe a que no hay ningún foreach definido para estas listas de nodos que está definido para las matrices y estas no son matrices.
Así que eso se
Y al igual que con get element by id, nos muestra esta bonita representación de cadenas pero detrás de las escenas,
en realidad es un objeto.
Así que de nuevo solo para demostrar que consolar el punto DIR y hacemos el cero de la etiqueta.
Y en realidad es este gran objeto loco complejo con toneladas de propiedades.
OK, así que vamos a obtener elementos por nombre de clase.
Devuelve una lista.
No es todo un conjunto.
Y contiene todos los elementos de la página que coinciden con el nombre de clase proporcionado que proporcionamos.
A continuación tenemos los elementos por nombre etiquetado.
Así que este funciona igual que obtener elemento por ID u obtener elementos por nombre de clase.
Excepto que devuelve una lista de elementos que coinciden con un nombre de etiqueta dado como Ally o H-1.
Entonces, en este caso estoy ejecutando document dight get elements por nombre de etiqueta Alhaj que me va a devolver
una lista de los tres aliados que existen en esta página.
equivalen a documentos que obtienen elementos por nombre de etiqueta y hagamos Alhaj primero y veamos las etiquetas, y obtenemos esta
lista que tampoco es una matriz, es una lista de nodos que tiene tres aliados y no lo probaré para ti esta vez
Entonces, demostremos de nuevo que las etiquetas var
Fui al cónsul que DJR.
Pero estos son objetos que no son solo cuerdas o no.
H tiempo l son en realidad objetos javascript con todas esas propiedades.
Entonces puedo hacer lo mismo con H-1.
Así que seleccionaremos todas las h y miraremos las etiquetas y llegaremos a las h y la lista.
No se limita a las etiquetas que vemos dentro del cuerpo.
Yo también podría hacer algo como esto.
Obtiene elementos por cuerpo de nombre de etiqueta y me devolverá una lista con un elemento, el cuerpo dentro
de él.
O también podría hacerlo por la cabeza o el elemento de tiempo o título o lo que quiera, pero la parte importante
es que devuelve una lista, incluso si solo hay un elemento, todavía devuelve una lista.
Entonces, para seleccionar el cuerpo podríamos hacer algo como el documento ECO de var body que obtiene elementos
por cuerpo de nombre de etiqueta y luego simplemente tomar el primer elemento porque solo hay un elemento en esa lista.
Y si miramos en qué cuerpo estamos, obtenemos este objeto gigante que todo el cuerpo.
DE ACUERDO.
Así que eso es Obtener elementos por nombre de etiqueta.
Solo para reiterarle, póngale un nombre de etiqueta como Ally.
Va y encuentra todos los elementos que coinciden y los devuelve a todos en una lista.
Incluso si solo hay uno.
Entonces aquí tengo otro ejemplo haciéndolo con un H-1.
Puedes ver que selecciona las dos H una vez.
Bien, ahora cambiamos de marcha un poco.
Ya no tenemos un elemento get u obtenemos elementos mediante una sintaxis.
Esto se llama selector de query y el selector de consultas es un método más nuevo que no ha existido durante
tanto tiempo.
Eso realmente hace nuestras vidas mucho más fáciles.
Entonces realmente podemos usarlo para hacer todo lo que vimos con get element by id get elements por nombre
de clase get elements con nombre de tag, podemos replicar todo eso con el selector de consultas.
Entonces, lo que hace es tomar un selector de estilo CSSA.
Entonces, un selector de estilo CSSA significa cualquiera de los selectores que usaríamos en lugar de un documento CSSA.
tengo que hacer es usar la sintaxis CSSA con el símbolo hash o el Octa Thorpe y luego resaltar.
En este ejemplo, estoy seleccionando algo basado en el resaltado ID, así que no puedo simplemente escribir la palabra resaltada como lo
hice con get element by ID, pero
Entonces, así es como seleccionas algo con el selector de consultas.
Si quieres una identificación como lo harías con C Ss, obtenemos a este primer aliado con ID igual para resaltar.
Antes de ir a la consola y escribir esto, le mostraré que podemos hacer lo
mismo con un nombre de clase. La etiqueta var es igual al documento que el selector de queery doblado, que es cómo seleccionamos
la clase en negrita usando C Ss.
Y lo importante es que en realidad solo nos da el primer partido.
Entonces, aunque hay dos elementos que han sido negados como clase, solo nos da el primero y ese es
el punto del selector.
Siempre devuelve un elemento. Hay otro método que veremos en breve que devolverá todos los
elementos que coincidan.
Entonces, un selector de consultas también puede incluir un nombre de etiqueta como el que tenemos aquí.
H-1 y devuelve el primer H-1.
Entonces podemos tomar los selectores de CSSA que escribimos todo el tiempo y ver SS y podemos usar esa sintaxis para seleccionar
elementos con el selector de consultas.
Entonces lo demostraré aquí.
Déjame aclarar esto y vamos a seleccionar esto primero.
H-1.
Entonces todo lo que necesito hacer
Var H-1 es igual al selector de consulta
de documentos H-1.
Y si vemos lo que H1 es nuevamente, es una buena representación de cadenas, pero en realidad es un
objeto que representa todo este elemento.
Entonces, vamos a intentar seleccionar basado en una ID.
Así que voy a copiar esta línea en lugar de H-1.
Esto será un aliado y en lugar de seleccionar el primer H-1 seleccionará el primer elemento que
tenga el resaltado de ID.
Y, por supuesto, solo hay un elemento porque es una identificación, por supuesto, es solo un elemento que tiene esta idea
en una página y lo necesitamos.
Octa Thorgeir.
De lo contrario, buscará un nombre de etiqueta llamado resaltado que no existe y H. J. él fuera.
Y si pulso "Enter" y miro a Alhaj, obtengo ese primer aliado con el elemento de la lista ID que es igual a resaltar.
Por último, hagamos lo mismo con una clase.
Así que utilizo el CSSA Leichter dot pleded, que es como seleccionamos una clase y si miramos a Ally, obtengo
el segundo aliado con el elemento 2 de la lista con viñetas iguales.
Entonces, hay otras cosas que podemos seleccionar.
No solo se basa en un nombre de etiqueta o una ID o una clase.
Esos son los más comunes, pero podríamos hacer otras cosas como esta que no funcionarán en mi
página pero podría seleccionar todas las etiquetas de anclaje dentro de un aliado con una clase de especial.
Y este es un selector C Ss más largo, pero es válido en los EE. UU.
Entonces, todas las etiquetas de anclaje tienen clases especiales que están anidadas dentro de un aliado y eso es totalmente válido.
De nuevo, no tengo esta configuración en mi página.
Entonces, si presiono Enter solo voy a darme.
No porque no encontró ninguna coincidencia.
Entonces, como mencioné, el selector Querrey devuelve la primera coincidencia y eso es todo.
Algunas veces es útil, por ejemplo, si quisieras seleccionar el cuerpo.
del selector de consultas y eso te da el cuerpo a diferencia de cuando documentaba elementos de obtención de diques por cuerpo de nombre de etiqueta.
Todo lo que tengo que hacer es decir el cuerpo
Me dieron una lista y luego tuvieron que pedir el primer elemento.
Si utilizo el selector de consultas, obtendré el cuerpo de inmediato.
Pero la alternativa es el selector de queery.
Entonces funciona exactamente de la misma manera.
Se necesita un selector de conjunto de C pero devuelve todos los elementos coincidentes.
Entonces, en este caso, estoy usando el documento selector de consultas, todo H-1 me devuelve h una o, en este caso, estoy usando
la clase en negrita.
Así que estilo CSSA.
Necesito un punto en negrita y eso me da los dos elementos con la clase en negrita.
Entonces, demostrémoslo en la estafa. Seleccionemos todos los aliados hasta ahora.
Los aliados equivalen a documentar ese selector de consultas.
Todo aliado
Y eso me dará a todos ellos.
Miro a los aliados.
Puedes ver que tiene tres aliados.
Una última vez que sé que soy un disco roto.
Estos son objetos.
Ellos no son HMO.
Son objetos javascript que están construidos desde HMO.
Y si hago lo mismo, lo hago con selector de consultas y presiono enter.
Si miro a los aliados, no es una lista, es solo uno.
Lo mismo si lo hice para una clase.
Así que hagámoslo para la clase en negrita.
Lo llamaremos en negrita y le pediremos que documente el selector de consulta en negrita.
Y veo que es solo el primer elemento de la lista de elementos también.
Y si consulto el selector todo, entonces obtengo una
lista con los dos allí.
Un punto de confusión a menudo para mis estudiantes es
que todavía puede usar el selector de consultas, incluso si solo hay un elemento que está buscando.
Entonces, podrías hacer algo como al igual que el selector de consulta de documento.
Todo un ID como resaltado y miro a Ally y es una lista con un ítem.
Es bastante raro que lo hagas, pero seguirá funcionando si solo hay una coincidencia.
De acuerdo, cubrimos mucho terreno en este video.
Regresemos al principio y hagamos un resumen muy rápido.
Comenzamos hablando de cómo todos estos métodos están dentro del
documento objeto que podemos seleccionar por ID con obtener elemento por ID, podemos seleccionar por nombre
de clase con obtener elementos por nombre de clase y que devuelve una lista que no es en realidad una formación.
Se llama lista de nodos.
selector de consulta que es una toma de todos los intercambios.
Podemos hacer lo mismo pero usando elementos GET por nombre de etiqueta que también devolverá una lista de nodos basada en un tipo de elemento que seleccionamos para entonces tenemos el
Devuelve el primer elemento que coincide con un selector de CSSA determinado.
Entonces podemos usarlo para hacer todo lo que obtiene el elemento por el nombre de la clase id
y el nombre de la etiqueta; podemos darle una identificación como lo hacemos aquí en una clase como lo hacemos aquí o un nombre de elemento.
Y luego hay un selector de consultas que funciona de la misma
manera, excepto que devuelve una lista que no es una matriz.
También es un estallido de nodo con todos los elementos que coinciden con un selector dado.
Todo bien.
Entonces voy a hacer que hagas un ejercicio realmente rápido