How to access dynamic HTML elements via web scraping?
php editor Xiaoxin here introduces a method to access dynamic HTML elements through web crawling. When we crawl web pages, we sometimes encounter dynamically generated content that cannot be obtained directly until the web page is loaded. Fortunately, there are tools and techniques we can use to solve this problem. This article will introduce a PHP-based method that can be used to easily crawl and access dynamic HTML elements. Let’s take a look!
Question content
I am using go-rod for web scraping. I want to access links within dynamic <a>
.
To make this a
visible, I have to complete a searcher which is an input
with the next format (without submit
):
<form> <input> <!--this is the searcher--> <form/>
So, when I'm done, the a
I want to access appears:
Up to here, everything is fine. This is the code I use to complete the searcher:
//page's url page := rod.new().mustconnect().mustpage("https://www.sofascore.com/") //acept cookies alert page.mustelement("cookiesalertselector...").mustclick() //completes the searcher el := page.mustelement(`searcherselector...`) el.mustinput("lionel messi")
Now the problem arises, when I want to click on the a
that appears after completing the search.
I tried this:
diviwant := page.mustelement("aselector...") diviwant.mustclick()
and this:
diviwant := page.mustelement("aselector...").mustwaitvisible() diviwant.mustclick()
However, they all return me the same error:
panic: {-32000 node is detached from document } goroutine 1 [running]: github.com/go-rod/rod/lib/utils.glob..func2({0x100742dc0?, 0x140002bad50?}) /users/lucastomicbenitez/go/pkg/mod/github.com/go-rod/[email protected]/lib/utils/utils.go:65 +0x24 github.com/go-rod/rod.gene.func1({0x14000281ca0?, 0x1003a98b7?, 0x4?}) /users/lucastomicbenitez/go/pkg/mod/github.com/go-rod/[email protected]/must.go:36 +0x64 github.com/go-rod/rod.(*element).mustclick(0x14000289320) /users/lucastomicbenitez/go/pkg/mod/github.com/go-rod/[email protected]/must.go:729 +0x9c main.main() /users/lucastomicbenitez/development/golang/evolutionaryalgorithm/main/main.go:22 +0x9c exit status 2
So, while looking for some solutions, I found this github issue and tried to get the link via this method:
link := page.musteval(`()=> document.queryselector('aselector...').href`)
But it returns this:
panic: eval js error: TypeError: Cannot read properties of null (reading 'href')
However, I'm pretty sure the selector is correct. What did i do wrong?
Workaround
As @hymns for disco said in the comments, I just had to wait a while after the searcher finished.
el.MustInput("Lionel Messi") time.Sleep(time.Second) link := page.MustEval(`()=> document.querySelector('aSelector...').href`)
The above is the detailed content of How to access dynamic HTML elements via web scraping?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



How to read excel data in html: 1. Use JavaScript library to read Excel data; 2. Use server-side programming language to read Excel data.

The difference between appendChild and append in JS requires specific code examples. In JavaScript, when we need to dynamically add child elements to the DOM (Document Object Model), we usually use the appendChild and append methods. Although their purpose is to add child elements to parent elements, there are some differences in their use. 1. appendChild method The appendChild method is one of the methods of the DOM node object. Use

We will also cover another way to execute a PHP function through the onclick() event using the Jquery library. This method calls a javascript function, which will output the content of the php function in the web page. We will also demonstrate another way to execute a PHP function using the onclick() event, calling the PHP function using pure JavaScript. This article will introduce a way to execute a PHP function, use the GET method to send the data in the URL, and use the isset() function to check the GET data. This method calls a PHP function if the data is set and the function is executed. Using jQuery to execute a PHP function through the onclick() event we can use

Use the <br> tag in Dreamweaver to create line breaks, which can be inserted through the menu, shortcut keys or direct typing. Can be combined with CSS styles to create empty rows of specific heights. In some cases, it is more appropriate to use the <p> tag instead of the <br> tag because it automatically creates blank lines between paragraphs and applies style control.

Usage of Transform in CSS The Transform property of CSS is a very powerful tool that can perform operations such as translation, rotation, scaling and tilting of HTML elements. It can dramatically change the appearance of elements and make web pages more creative and dynamic. In this article, we will introduce the various uses of Transform in detail and provide specific code examples. 1. Translate (Translate) Translate refers to moving an element a specified distance along the x-axis and y-axis. Its syntax is as follows: tran

Ridge is a border style in CSS that is used to create a 3D border with an embossed effect, which is manifested as a raised ridge-like line.

The hover pseudo-class in CSS is a very commonly used selector that allows us to change the style of an element when the mouse is hovering over it. This article will introduce the usage of hover and provide specific code examples. 1. Basic Usage To use hover, we need to first define a style for the element, and then use the :hover pseudo-class to specify the corresponding style when the mouse is hovering. For example, we have a button element. When the mouse hovers over the button, we want the background color of the button to change to red and the text color to white.

The connection of HTML and CSS files is crucial to the appearance and user experience of a web page. This article details the connection methods between HTML files and CSS files, including inline styles, internal style sheets, and external style sheets. By understanding these methods and related considerations, developers can effectively implement the style and layout of web pages.
