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

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>

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

4 Likes


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

  1. 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ônundefined.
  2. 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.
  3. 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.
4 Likes

đã 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?

4 Likes

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 :sweat_smile: Xin lỗi mọi người [email protected]@

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.

3 Likes

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 đề@@

4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?