HomeLập trìnhJavaScriptCách tránh sự...

Cách tránh sự thất vọng bằng cách chọn bộ chọn JavaScript phù hợp


Hướng dẫn nhanh về cách bộ chọn ảnh hưởng đến mã của bạn

Trong khi làm việc trên một dự án, tôi gặp sự cố trong mã của mình. Tôi đã cố gắng xác định nhiều phần tử HTML thành một bộ sưu tập và sau đó thay đổi các phần tử đó dựa trên một số điều kiện đặt trước. Tôi đã vật lộn trong khoảng bốn giờ viết mã (trong hai ngày) để gỡ lỗi mã của mình và cố gắng tìm ra lý do tại sao tôi không đạt được kết quả mong muốn.

Hóa ra tôi đã sử dụng document.querySelectorAll() để gán các phần tử của tôi cho một biến, và sau đó tôi đã cố gắng thay đổi các phần tử đó. Vấn đề duy nhất là bộ chọn JavaScript cụ thể trả về một danh sách nút tĩnh. Vì nó không phải là biểu diễn trực tiếp của các phần tử nên tôi không thể thay đổi chúng sau này trong mã của mình.

giả định

Trong bài viết này, tôi giả sử một vài điều là đúng:

  • Bạn đang làm việc với JavaScript “đơn giản hoặc đơn giản” (không có khung/thư viện)
  • Bạn có hiểu biết cơ bản về các phần tử / bộ chọn JavaScript
  • Bạn có hiểu biết cơ bản về DOM

Nitty-gritty

Trong trường hợp tôi đã giả định quá nhiều, tôi đã cung cấp các liên kết đến tài liệu liên quan trong bài viết mà tôi hy vọng sẽ hữu ích.

JavaScript là một hệ sinh thái rộng lớn và phong phú nên không có gì ngạc nhiên khi có nhiều cách để hoàn thành cùng một nhiệm vụ. Tùy thuộc vào nhiệm vụ của bạn, cách thức hoàn thành nó có ý nghĩa ở một mức độ nhất định.

Đọc thêm  Thuật toán JavaScript và Cấu trúc dữ liệu cần giải thích rõ hơn - Cộng tác viên

Bạn có thể đào một cái lỗ bằng tay, nhưng sẽ dễ dàng và hiệu quả hơn nhiều nếu dùng xẻng.

Vì vậy, tôi hy vọng sẽ “trao cho bạn một cái xẻng” sau khi bạn đọc xong bài viết này.

IXLL54yngArOlJqNfITubIlTMhXOrsMuhVkk
“Ảnh chụp phơi sáng lâu về một nhóm người trên bãi biển cùng lũ trẻ đang đào một cái hố sâu” của Khürt Williams trên Bapt

Chọn công cụ phù hợp cho công việc

Tôi đã có câu hỏi, “Tôi nên sử dụng bộ chọn thành phần nào?” vài lần. Cho đến bây giờ, tôi không có nhiều mong muốn hoặc cần tìm hiểu sự khác biệt miễn là mã của tôi tạo ra kết quả mong muốn. Xét cho cùng, màu sắc của chiếc taxi có quan trọng gì miễn là nó đưa bạn đến đích an toàn và đúng giờ…đúng không?

Hãy bắt đầu với một số cách để chọn DOM các phần tử trong JavaScript. Có nhiều cách hơn (tôi tin) để chọn các phần tử, nhưng những cách được liệt kê ở đây cho đến nay là cách phổ biến nhất mà tôi từng gặp.

tài liệu.getElementById()

Những phần tử này sẽ chỉ trả về một (1) phần tử vì về bản chất, ID là duy nhất và chỉ có thể có một phần tử (có cùng tên) trên trang tại một thời điểm.

Nó trả về một đối tượng khớp với chuỗi được truyền vào nó. Nó trở lại vô giá trị nếu không tìm thấy ID phù hợp trong HTML của bạn.

Ví dụ về cú pháp -> document.getElementById(‘main_content’)

Không giống như một số bộ chọn mà chúng ta sẽ đề cập ở phần sau của bài viết, không cần dấu # để biểu thị id phần tử.

document.getElementsByTagName()

Lưu ý chữ “S” trong phần tử — bộ chọn này trả về bội số trong một cấu trúc dạng mảng được gọi là bộ sưu tập HTML – tất cả tài liệu được tìm kiếm bao gồm nút gốc (đối tượng tài liệu) để tìm tên phù hợp. Bộ chọn phần tử này bắt đầu ở đầu tài liệu và tiếp tục đi xuống, tìm kiếm các thẻ khớp với chuỗi được truyền vào.

Đọc thêm  Hãy nói về dấu chấm phẩy trong JavaScript

Nếu bạn đang tìm cách sử dụng các phương thức mảng gốc thì bạn không gặp may. Nghĩa là, trừ khi bạn chuyển đổi các kết quả trả về thành một mảng để lặp lại chúng hoặc sử dụng toán tử trải rộng ES6 — cả hai đều nằm ngoài phạm vi của bài viết này. Nhưng tôi muốn bạn biết rằng có thể sử dụng các phương thức mảng nếu bạn muốn.

Ví dụ về cú pháp -> document.getElementsByTagName(‘header_links’). Bộ chọn này cũng chấp nhậnts p, div, body hoặc bất kỳ t HTML hợp lệ nào khácag.

document.getElementsByClassName()

Bộ chọn tên lớp – một lần nữa lưu ý chữ “S” trong các phần tử – bộ chọn này trả về bội số trong một cấu trúc dạng mảng được gọi là một bộ sưu tập HTML của các tên lớp. Nó khớp với chuỗi được truyền vào (có thể lấy nhiều tên lớp, mặc dù chúng được phân tách bằng dấu cách), tìm kiếm tất cả tài liệu, có thể được gọi trên bất kỳ phần tử nào và chỉ trả về hậu duệ của lớp được truyền vào.

Cũng không . (dấu chấm) là cần thiết để biểu thị tên lớp

Ví dụ về cú pháp: document.getElementsByClassName(‘className’)

document.querySelector()

Bộ chọn này sẽ chỉ trả về một (1) phần tử.

Chỉ phần tử đầu tiên khớp với chuỗi đã nhập sẽ được trả về. Nếu không tìm thấy kết quả phù hợp với chuỗi được cung cấp, vô giá trị Được trả lại.

Ví dụ về cú pháp: document.querySelector(‘#side_note‘) hoặc document.querySelector(‘.header_linkS’)

Không giống như tất cả các ví dụ trước của chúng tôi, bộ chọn này yêu cầu tệp . (dấu chấm) để biểu thị lớp hoặc một # (octothorp) để biểu thị ID và hoạt động với tất cả các bộ chọn CSS.

Đọc thêm  TypeError Chỉ số chuỗi phải là số nguyên Lỗi Python [Solved]

document.querySelectorAll()

Bộ chọn này trả về bội số khớp với chuỗi đã truyền vào và sắp xếp chúng thành một chuỗi khác cấu trúc dạng mảng được gọi là danh sách nút.

Như với một số ví dụ trước, danh sách nút không thể sử dụng các phương thức mảng gốc như .forEach(). Vì vậy, nếu bạn muốn sử dụng chúng, trước tiên bạn phải chuyển đổi danh sách nút thành một mảng. Nếu bạn không muốn chuyển đổi, bạn vẫn có thể lặp lại danh sách nút bằng câu lệnh for…in.

Chuỗi được truyền vào phải khớp với bộ chọn CSS hợp lệ — id, tên lớp, loại, thuộc tính, giá trị của thuộc tính, v.v.

Ví dụ về cú pháp: document.querySelectorAll(‘.footer_linkS’)

kết thúc

Bằng cách chọn bộ chọn phù hợp với nhu cầu viết mã của mình, bạn sẽ tránh được nhiều cạm bẫy mà tôi đã mắc phải. Có thể cực kỳ khó chịu khi mã của bạn không hoạt động, nhưng bằng cách đảm bảo rằng bộ chọn phù hợp với nhu cầu tình huống của bạn, bạn sẽ không gặp khó khăn gì khi “đào bằng xẻng” 🙂

Cảm ơn bạn đã đọc qua bài viết này. Nếu bạn thích nó, vui lòng xem xét quyên góp một số cái vỗ tay để giúp những người khác cũng tìm thấy nó. Tôi xuất bản (tích cực quản lý lịch trình của mình để viết nhiều hơn) nội dung liên quan trên blog của mình. Tôi cũng đang hoạt động trên Twitter và tôi luôn sẵn lòng kết nối với các nhà phát triển khác!





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status