rLa base esencial para los rastreadores: CSS SelectorGadget
En términos de zoom parcial, la siguiente imagen muestra un estilo CSS. Las llaves están precedidas por un selector CSS, lo que significa que primero se selecciona el nodo con id head_wrapper y clase s-ps-islite, y luego se selecciona el nodo con clase interna s-p-top. Las reglas de estilo están escritas entre llaves. Por ejemplo, la posición especifica que el modo de diseño de este elemento es diseño absoluto, la parte inferior especifica el margen inferior del elemento como 40 píxeles, el ancho especifica el ancho como 100 y la altura especifica la altura del elemento. Es decir, escribimos la posición, ancho, alto y otras configuraciones de estilo en este formulario, luego las encerramos entre llaves y luego agregamos un selector CSS al principio, lo que significa que este estilo tendrá efecto en los elementos seleccionados. por el selector CSS, el elemento se mostrará de acuerdo con este estilo. En una página web, las reglas de estilo de toda la página web generalmente se definen y escriben en un archivo CSS (el sufijo es CSS). En HTML, solo necesita usar la etiqueta de enlace para importar el archivo CSS escrito, de modo que toda la página se vuelva hermosa y elegante.
En el proceso de rastreo, es necesario rastrear el nodo de destino. Sabemos que una página web se compone de nodos y el selector CSS establecerá diferentes reglas de estilo según los diferentes nodos. ¿Qué es un nodo? ¿Cómo localizar nodos? Estas dos cuestiones se destacarán a continuación.
En HTML, todas las definiciones de etiquetas son nodos, que forman un árbol DOM HTML. Echemos un vistazo a qué es DOM. DOM es un estándar del W3C (World Wide Web Consortium) y su nombre completo en inglés es Document Object Model, que es Document Object Model. Define estándares para acceder a documentos HTML y XML: El modelo de objetos de documento (DOM) del W3C es una interfaz neutral en cuanto a plataforma y lenguaje que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de un documento. El estándar DOM del W3C se divide en tres partes diferenciadas:
Core DOM: El modelo estándar para cualquier documento estructurado.
XML DOM: el modelo estándar para documentos XML.
HTML DOM: el modelo estándar para documentos HTML.
Según el estándar HTML DOM del W3C, todo el contenido de un documento HTML es un nodo. El documento completo es un nodo de documento; cada elemento HTML es un nodo de elemento; el texto dentro de un elemento HTML es un nodo de texto; cada atributo HTML es un nodo de atributo; HTML DOM considera los documentos HTML como una estructura de árbol, llamada árbol de nodos, como se muestra en la siguiente figura.
Los nodos en el árbol de nodos tienen relaciones jerárquicas entre sí. A menudo utilizamos términos como padre, hijo y hermano para describir estas relaciones. Un nodo principal tiene nodos secundarios, y los nodos secundarios en el mismo nivel se denominan nodos hermanos. En un árbol de nodos, el nodo superior se llama nodo raíz. Cada nodo, excepto el nodo raíz, tiene un nodo padre y puede tener cualquier número de hijos o hermanos. El siguiente diagrama muestra el árbol de nodos y las relaciones entre nodos.
En CSS, utilizamos selectores de CSS para localizar nodos. Por ejemplo, en la figura siguiente, la identificación del nodo div es contenedor, que se puede expresar como #contenedor, donde el comienzo de # representa la identificación de selección, seguido del nombre de la identificación.
Además, si queremos seleccionar un nodo cuya clase sea contenedor, podemos usar. Envoltura, en la que un punto (.) comienza a representar la selección de la clase, seguido del nombre de la clase. Otra opción es filtrar por nombre de etiqueta. Por ejemplo, si quieres elegir un título secundario, puedes usar h2 directamente. Estas son las tres representaciones más comunes, filtradas por id, clase y nombre de etiqueta. Recuerda cómo escriben.
Además, los selectores CSS también admiten la selección anidada. Agregue espacios entre selectores para indicar relaciones anidadas. Por ejemplo #contenedor. El contenedor p se refiere a seleccionar primero el nodo de la identificación del contenedor, luego seleccionar el nodo de la clase interna del contenedor y luego seleccionar aún más el nodo de la clase interna del contenedor. Además, si no se agregan espacios, representa una relación paralela. Por ejemplo, div #contenedor. wrapper p.text significa seleccionar primero el nodo div de la identificación del contenedor, luego seleccionar el nodo de la clase interna contenedora y luego seleccionar el nodo P de la clase interna de texto. Este es un selector de CSS y la función de filtrado sigue siendo muy poderosa. Además, los selectores de CSS tienen otras reglas de sintaxis, como se muestra en la siguiente tabla.
Pero cada vez hay que perder algo de tiempo para encontrar el punto de anclaje, lo cual es muy inconveniente y muy ineficiente. Entonces, ¿cómo mejorar la eficiencia de esta parte del trabajo del rastreador? Hoy me gustaría compartir con ustedes una poderosa herramienta para rastreadores, que es el complemento SelectorGadget.
Haga clic en CSS Selector, un potente generador de CSS del complemento de Google, que nos ayudará a encontrar rápidamente la información del nodo de HTML. También admite expresiones XPath. El Selector Widget es una extensión de Chrome de código abierto que facilita la generación y selección de selectores CSS en sitios web complejos. Después de instalar la extensión, vaya a cualquier página y ejecútela. Se abrirá un cuadro en la esquina inferior derecha del sitio web. Haga clic en el elemento de la página con el que desea que coincida el selector (se volverá verde). SelectorGadget generará un selector CSS mínimo para el elemento y resaltará (amarillo) todo lo que coincida con el selector. Ahora haga clic en un elemento resaltado para eliminarlo del selector (rojo), o haga clic en un elemento no resaltado para agregarlo al selector. A través de este proceso de selección y rechazo, SelectorGadget puede ayudarlo a encontrar el selector de CSS perfecto para sus necesidades.
Primero, necesitas instalar este artefacto. En la tienda de aplicaciones de Google Chrome, busque el complemento SelectorGadget y haga clic en "Agregar a Chrome". Si no puede abrir Chrome App Store, puede obtener el complemento a través de otros canales en línea y luego agregarlo a Google Chrome manualmente. El método manual para agregar es: abrir la extensión de Google Chrome, activar el modo de desarrollador y arrastrar el complemento al navegador. Si no tiene éxito, puede seleccionar "Cargar extensión descomprimida" para comprimir, luego descomprimir la carpeta y agregarla.
Al mismo tiempo, puede ver el logotipo de SelectorGadget en el cuadro rojo de la barra de la página.
Tomemos la página /web como ejemplo. Primero haga clic en SelectorGadget en la parte superior de la página web y luego aparecerá el cuadro SelectorGadget en la parte inferior de la página web. A continuación, intentemos cómo usarlo. Por ejemplo, si queremos localizar el nodo de "Bomb Squad 2", pulsamos directamente sobre su nodo -. El título del proyecto aparecerá en el cuadro (que se muestra a continuación). Verde: haga clic en el elemento de la página con el que desea que coincida el selector. Amarillo: todo el contenido del selector CSS generado. Los títulos de los proyectos pueden coincidir. En la imagen siguiente, podemos descubrir qué información pueden capturar los selectores de CSS. Cuando pasa el mouse sobre estos elementos resaltados, aparecerán en rojo, lo que significa que desea eliminarlos del selector; por el contrario, haga clic en un elemento no resaltado para agregarlo al selector.
En el proceso real de construcción de expresiones CSS, es muy conveniente usarlo con la función de selector de copia en las herramientas de desarrollo web. Por ejemplo, ubique y capture toda la información del nombre de la película en el cuadro rojo de la siguiente página web (/allmovies).
El proceso de operación específico es el siguiente: haga clic derecho en el nombre de una película, ubique el código fuente del nombre de la película en la página web, luego haga clic derecho en el selector copiar-copiar, abra SelectorGadget y pegue Introduzca la expresión CSS en el cuadro, presione Entrar y descubra que el nombre de la película está colocado con precisión en la página web. Pero debemos apuntar a todos los nombres de películas en la expresión CSS existente (body>div:n-child(5)>inner wrapper gtdiv.inner-2 col-main gt;div gtul gtli:n-child(1) >a gtSpan. item-title), podemos encontrar que Li: n-child(1) solo selecciona el primero, y necesitamos seleccionar todos, por lo que solo necesitamos eliminar lo siguiente (1). En la operación real, cómo modificarlo depende de la comprensión que tenga su amigo de la estructura de la página web y la sintaxis CSS. Finalmente, la expresión del selector CSS para obtener el nombre de la película en el cuadro rojo de arriba es: body > div: nth-child(5) > internal wrapper gtdiv inside-2 col-main gt 李: nth child gta gtspan. título-artículo En aplicaciones prácticas, las etiquetas de diferentes nodos están separadas por espacios: cuerpo div: n-child(5)div. Mamparas interiores de embalaje. div interno-2col-principal Ulli: intervalo de n-hijos. Título del proyecto.
Sin embargo, al usar SelectorGadget, descubrimos que las expresiones CSS creadas por Selector Gadget suelen ser muy complejas. En la mayoría de los casos, usted mismo puede crear expresiones CSS. La clave para crear una expresión de selección CSS es comprender toda la estructura de la página web, descubrir la relación entre las etiquetas, a qué etiqueta pertenece el valor del atributo, etc., para poder crearla rápidamente. Y el navegador es inteligente y la posición del mouse en el código fuente puede mostrar una sombra en la visualización de la página web. Esta característica es simplemente asombrosa. Las expresiones CSS de todos los nombres de películas en el cuadro rojo de arriba también se pueden expresar como: div. Mover la lista durante un lapso. Título del proyecto.
Luego use SelectorGadget para verificar, como se muestra a continuación, y descubra que la parte resaltada es la información que quiero ubicar, lo que indica que esta expresión CSS es correcta.
Lo anterior presenta brevemente cómo construir expresiones CSS. En el proceso de rastreo, localizar y rastrear datos de nodos específicos es un paso muy importante. Sólo a través de este paso se puede lograr una extracción y limpieza precisa de datos posteriores. ¡Espero que este tutorial pueda ayudar a los amigos que lo necesitan!
Para más detalles, preste atención al público* * * ~ ~
Mirando hacia el pasado
Algunos usos maravillosos de los reptiles en el trabajo
p>
r Conocimiento básico de rastreadores: HTML y CSS
r Base necesaria para los rastreadores: páginas web estáticas y páginas web dinámicas
r Necesario para los rastreadores: uso: paquete rvest