Làm sao để tách dữ liệu từ html?

Jim_Thor · September 9, 2020, 10:39am

Chào mọi người, hiện tại em đang cố lấy dữ liệu từ html của một trang web https://nshopvn.com/. Em dùng đến hàm querySelectorAll và querySelector để lấy ra dữ liệu từ các phần tử thuộc class ‘product’ nằm trong thẻ <li> nhưng không hiểu tại sao giá trị trả về luôn là undefined? Không biết là do em chỉ đến element bị sai hay là do lỗi. Xin mọi người xem qua và giải đáp giúp em. (hình bên dưới)

Đây là 1 phần code html của web:

<li class="product" data-v-64b7828c="" data-v-2958b62e="">
  <a href="/product/cam-bien-nhiet-do-va-do-am-sht30-hsj632/" data-v-64b7828c="" class="" data-v-2958b62e="">
      <div class="product-object" data-v-2958b62e="">
          <figure class="image is-1by1" data-v-2958b62e="">
              <img title="Cảm biến nhiệt độ và độ ẩm SHT30 - HSJ632" loading="lazy" src="https://nshopvn.com/wp-content/uploads/2020/09/cam-bien-nhiet-do-va-do-am-sht30-hsj632-3vxl-1-300x300.jpg" alt="Cảm biến nhiệt độ và độ ẩm SHT30 - HSJ632" width="300px" height="300px" data-v-2958b62e="">
              </figure>
              <div class="product-promo" data-v-2958b62e="">
                  <!---->
                  <!---->
              </div>
              <!---->
          </div>
          <div class="product-body" data-v-2958b62e="">
              <h2 title="Cảm biến nhiệt độ và độ ẩm SHT30 - HSJ632" class="product-title" data-v-2958b62e="">Cảm biến nhiệt độ và độ ẩm SHT30 - HSJ632</h2>
              <div class="product-meta" data-v-2958b62e="">
                  <span class="price" data-v-2958b62e="">
                      <!---->
                      <ins>298.000₫</ins>
                  </span>
              </div>
          </div>
      </a>
</li>

kisuluoibieng · September 9, 2020, 10:35am

.image.is-1by1
google từ khóa: css selector

Jim_Thor · September 9, 2020, 11:21am

Vẩn trả về undefined á bác?

SITUVN.gcd · September 9, 2020, 12:46pm

Giá trị undefined là giá trị trả về của phương thức forEach() nó không phải là giá trị hiển thị bạn cần từ console.log(). Từ tài liệu:
https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Giá trị trả về của forEach() luôn luôn là undefined.
Bạn thử in ra xem giá trị của a chưa? Nó là 1 mảng, và mảng này có lẽ không có phần tử nào.
Nếu các phần tử html được tạo từ javascript và nằm trong shadow root thì cũng lằng nhằng hơn.

kisuluoibieng · September 9, 2020, 11:57am

đã nói là bạn nên coi lại kiến thức về css selector
dấu ‘>’, khoảng cách, viết liền bạn đã coi chưa?

Jim_Thor · September 9, 2020, 12:48pm

Cám ơn bạn nha! Nhưng lỗi lại là do trình duyệt á bạn, mình thử qua các trình duyệt khác thì chạy bình thường Xin lỗi mọi người nha@@

noz1995 · September 9, 2020, 4:36pm

Như vậy đơn giản là bạn code không đúng. Nếu bạn code đúng theo w3c và bao quát các trường hợp để không phụ thuộc vào thứ tự gọi hàm, callback thì kết quả ở các trình duyệt phải như nhau.

Jim_Thor · September 10, 2020, 4:06am

Có thể là code mình sai nhưng mình đã coi kĩ trên w3c rồi. Và cũng chạy thử với thư viện puppeteer (headless chrome) để lấy thử thì kết quả chạy tốt á bạn! Nên mình mới nghĩ chắc do trình duyệt chrome mình có vấn đề@@