Problema de intelegere a CSS si JS la parsarea unei pagini a site-ului Devjob.ro ?

Salutare.
Am de realizat pentru facultate un parser pentru site-ul Devjob.ro.
Am salvat pagina principala, am deschis fisierul HTML in NetBeans pentru a vedea structura si a-l putea procesa, etc.
Am intampinat insa urmatoarea problema. Asa cum se poate vedea, pe site sunt peste 100 anunturi de joburi, puse intr-un panou scroll-abil.
M-am uitat in fisierul HTML, aceste anunturi sunt reprezentate printr-un element <ul>, care are elemente <li> corespunzatoare fiecarui anunt de job. Problema este in acel <ul> exista doar 16 elemente <li> de job-uri, apoi elementul se incheie cu tag-ul de sfarsit.
Dupa tagul de sfarsit </ul> apare urmatorul element:
<div class="resize-triggers">
    <div class="expand-trigger">
    <div style="width: 769px; height: 518px;"></div>   
    </div>
    <div class="contract-trigger"></div>   
</div>
, care banuiesc ca are rolul de a adauga , dipa cele 16 elemente, pe urmatoarele 16, s.a.m.d. pana cand se ajunge la cele 160, atatea cate se pot vedea pe pagina din browser.
Acesta este codul CSS care defineste clasele acestui <div>, adica "resize-triggers"

<style id="detectElementResize" type="text/css">@keyframes resizeanim { from { opacity: 0; } to { opacity: 0; } }
    .resize-triggers { animation: 1ms resizeanim; visibility: hidden; opacity: 0; }
    .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; }
    .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }
</style>
<script src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/wonderpush-loader.min.js.download">
</script>

si alta portiune de cod imediat deasupra acestuia:
<style type="text/css">
</style>
<script charset="utf-8" src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/0.37f1efd0.chunk.js.download">
</script>
<script charset="utf-8" src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/2.b30e1540.chunk.js.download">
</script>
<link rel="stylesheet" type="text/css" href="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/4.cdba37f8.chunk.css">
<script charset="utf-8" src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/4.3abc06e0.chunk.js.download">
</script>
<link rel="stylesheet" type="text/css" href="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/1.e1fde4ea.chunk.css">
<script charset="utf-8" src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/1.c91823e4.chunk.js.download">
</script>
<script charset="utf-8" src="./339 Joburi IT &amp; Software Developer cu salarii in Romania_files/9.60c69195.chunk.js.download">
</script>

Intrebarea mea este : stie cineva, care a lucrat cu CSS, Javascript, sau ce mai este aici, ce Doamne-iarta-ma se petrece in pagina aceasta de site? Cum se pun automat celelalte anunturi in acel element <ul> al fisierului, care initial are doar 16, iar pe pagina  randata de browser apar 160 anunturi?
Multumesc celui care se oboseste sa citeasca, si mai ales celui care stie sa raspunda!

Daca nu vezi ce e in js, nu pot zice clar. Si fara suparare, momentan nici nu am timp sa ma uit peste fisiere
O solutie pe care o propun mereu si de ft multe ori merge ( depinde si de caz ), pune scriptul la sfarsitul body-ului.

Nu ai conflict de scripturi?
debugger; nu te ajuta?

Apar doar x elemente <li> fiindca doar atatea vezi pe ecran in acelasi timp. E o optimizare.

Pagina contine multa logica client side (se schimba la greu DOMul din javascript), probabil folosind https://reactjs.org/

Edited by dani.user, 27 January 2022 - 11:39.

E in React

Folosesti Network tab

https://devjob.ro/api/jobsLight

dani.user, on 27 ianuarie 2022 - 11:39, said:

Le ai cumva cu React sau cu Javascript? Te-ai putea uita si intelege ca sa-mi explici si mie cum anume se incarca automat si restul de anunturi in pagina? Eu nu am lucrat cu asemenea tehnologii pana acum. Stiu Javascript insa de pe timpul cand a aparut prima data, acum au aparut tot felul de tehnici care mai de care...

coniac, on 27 ianuarie 2022 - 12:27, said:

Ce inseamna acel NetworkTab...? Nu cunosc tehnologia React ce-i drept, nu am avut ocazia sa lucrez in ea pana acum... stiu Javascript dar din acela vechi, am fol. pt manipularea DOM HTML, insa cu mai mult nu ma pot lauda...

Si fisierul acela care mi l-ai dat, jobsLight, ce mai doreste sa fie ...?

Browserul iti ofera o suita mare de unelte apasand F12. Vezi acolo tot ce misca.

Pai si cu ce ma ajuta acel Network Tab din MS Edge...? Ce ar trebui sa fac in el, sa selectez vreo optiune ceva de acolo? Si daca da care, si cu ce  scop ...?

Iti arata toate datele primite.

INca o data, nu le am cu React-ul, nu cunosc tehnologia.
Din cate am observat, fisierul pe care l-a specificat colegul Coniac aici: https://devjob.ro/api/jobsLight
este JSON-ul pe care il foloseste pagina Devjob.ro,  este asa sau nu?
Si as putea sa iau datele de acolo, nu?

Pai ai inteles
Parsezi JSON-u' si ai rezolvat problema , sper
Nu ai specificat daca e o tema de la facultate sau daca e un task de la sef
Ca daca e tema de la profesor, mai bine intrebi care sunt cerintele exacte
Ca uitatul pe Network tab is kind of cheating
Poate vrea sa folosesti Selenium WebDriver

coniac, on 30 ianuarie 2022 - 14:39, said:

Dar ce importanta are daca este pt facultate sau e un task de la serviciu...? Ca eu nu vad nicio diferenta, indiferent care ar fi...
Inca ceva, tu cum ai obtinut JSON-ul acela? De acolo din Network Tab, sau cum anume l-ai obtinut? Ca sa stiu cum sa-l obtin si eu in aplicatia mea Spring

Importanta e data de context: daca tema pentru acasa are ca obiect HTML Parsing, s-ar putea sa conteze modalitatea in care ajungi la rezultat
Daca tot ce conteaza e sa obtii datele, probabil nu importa modalitatea

Te duci pe pagina
Apesi F12
Selectezi Network Tab
Apesi butonul Refresh sau tasta F5
Iei la puricat toate requesturile aka documente
TIP poti sa filtrezi in functie de content-type , de exemplu json