XPath hoặc querySelector?

Question

XPath có thể làm tất cả mọi thứ querySelector có thể làm, và nhiều hơn nữa, vì vậy khi nào bạn sẽ bao giờ chọn sau này? Tôi đã không nhìn thấy bất kỳ điểm chuẩn tốc độ so sánh hai, vì vậy ngay bây giờ tôi đang lựa chọn dựa trên conciseness cú pháp, mà dường như loại tùy ý.

Chỉnh sửa: Có lẽ tôi đã tuyên bố rằng tôi đang viết các tập lệnh Greasemonkey cho Firefox, vì vậy tôi không lo lắng về khả năng tương thích giữa các trình duyệt và sẽ không bao gồm bất kỳ thư viện nào.

Answer 1

Bạn đang sử dụng trình duyệt nào? Trong Safari (hoặc iPhone), querySelector và querySelectorAll nhanh hơn nhiều so với XPath. IE không hỗ trợ XPath, IE6 và IE7 không hỗ trợ querySelector. Công cụ chọn trình duyệt chéo nhanh nhất là Sizzle, được tạo bởi John Resig. Sizzle cũng là công cụ chọn chính được sử dụng trong jQuery. Nó sử dụng querySelector nơi các phương thức DOM thích hợp và bình thường trong đó querySelector không có sẵn.

Answer 2

Về mặt chức năng, đặt cược tốt nhất của bạn sẽ là sử dụng thư viện bao gồm công cụ chọn và nhiều thư viện (ví dụ: MooTools, Dojo, Prototype) đã sử dụng XPath trong nội bộ để thực hiện một số lớp truy vấn. Bạn sẽ có thể tin tưởng vào một thư viện tốt, chọn phương pháp nhịn ăn cho bạn. XP2 có thể làm mọi thứ mà querySelector có thể làm (tôi nghĩ câu lệnh này là một chút nghi ngờ, nhưng đó là bên cạnh điểm) nhưng querySelector và querySelectorAll không được hỗ trợ bởi tất cả các trình duyệt, vì vậy chúng ta nên so sánh XPath cho các phương thức truy vấn DOM nguyên gốc (ví dụ: getElementsByTagName, getElementById, querySelector, các phương thức lọc và truyền tải tiêu chuẩn, v.v.)

Sử dụng các phương thức lọc DOM nguyên gốc đòi hỏi kiến ​​thức về quirks và giới hạn trình duyệt và nhanh chóng trở thành không thực tế khi truy vấn phức tạp trừ khi bạn sử dụng thư viện (ví dụ: jQuery hoặc MooTools) để loại bỏ những mâu thuẫn. Lý do mà các kỹ thuật DOM nguyên gốc (cho dù thông qua một proxy như jQuery hoặc các triển khai tùy chỉnh) thường được chọn trên XPath là chúng cung cấp sự linh hoạt hơn nhiều so với XPath. Ví dụ, nếu bạn muốn lọc các đầu vào đã kiểm tra, các phần tử "ẩn" hoặc các đầu vào bị vô hiệu hóa XPath xuất hiện ngắn nhưng jQuery cung cấp cho bạn: các lớp giả đã được kiểm tra, ẩn: và vô hiệu hóa.

Answer 3

Bạn chỉ sử dụng querySelector nếu chưa biết XPath nhưng chỉ biết về bộ chọn CSS. Ngoài ra, cú pháp XPath có thể phức tạp hơn ngay cả đối với các truy vấn đơn giản. Vì vậy, nếu bạn không cần sức mạnh được cung cấp bởi XPath, có thể dễ dàng hơn khi sử dụng bộ chọn CSS thay thế.

Bạn nên biết trong hai điều:

• selectors id không làm việc với querySelector khi được sử dụng trên XML tinh khiết (hoặc không đáng tin cậy ít nhất)
• querySelector chỉ làm việc với selectors rằng trình duyệt hiện hỗ trợ, vì vậy nếu trình duyệt không hỗ trợ một số bộ chọn CSS3, bạn không thể sử dụng chúng.

Answer 4

cú pháp CSS là tuyệt vời vì hai lý do:

• Nó là một thứ tự cường độ nhanh và ít tài nguyên chuyên sâu hơn so với XPath phức tạp hơn.
• Khi những gì bạn muốn tìm có thể được tìm thấy với bộ chọn css, truy vấn XPath tương ứng sẽ thực hiện tương tự hầu hết thời gian sẽ lâu hơn và khó đọc hơn.

Trường hợp tại điểm: lấy selector css này: h1.header > a[rel~="author"]

nó chức năng ngắn XPath tương đương sẽ //h1[contains(" "+normalize-space(@class)+" "," header ")]/a[contains(" "+normalize-space(@rel)+" "," author ")]

... đó là cả nhiều khó khăn hơn để đọc và viết.

Nếu bạn đã viết XPath này để thay thế: đánh dấu //h1[@class="header"]/a[@rel="author"]

... bạn sẽ không đúng cách đã bỏ lỡ như <h1 class="article header"><a rel="author external" href="/mike">...</a></h1>

Khi bạn thực sự cần XPath, tuy nhiên, đó là lựa chọn duy nhất, trừ khi bạn muốn đi bộ xung quanh DOM bằng tay với mã (được ẩn nhanh).

Cá nhân (và tôi là một trong những người duy trì Greasemonkey), tôi sử dụng thư viện on.js rất nhỏ cho tất cả các nhu cầu cắt nút của mình - điều này mang lại cho tôi sự kết hợp cả XPath (khi tôi cần) và CSS (mà tôi có xu hướng sử dụng hầu như mọi lúc) - chủ yếu là vì nó cho phép tôi tách riêng tất cả các mã liên quan đến việc đào lên các phần của trang mà tôi cần tiêu hóa, vào tiêu đề tập lệnh để mã của tôi được phân phối tất cả những thứ cần thiết, và có thể là tất cả về việc thực sự làm những điều thú vị hoặc tuyệt vời cho các trang web.

Trình duyệt web được tối ưu hóa rất nhiều để chạy javascript rất nhanh và nếu bạn là bạn, tôi khuyên bạn nên sử dụng bất kỳ điều gì làm cho bạn hiệu quả và hài lòng nhất với tư cách là nhà phát triển. Tuy nhiên, một trong những lợi ích phụ của on.js là tự động giúp các tập lệnh thường không chạy được, trên các trang mà các nút mà bạn nghĩ là ở xung quanh, bật ra không phải là, thay vì hủy trang .