Trang chủ » Mã hóa » 15 Phương thức JavaScript để thao tác DOM cho nhà phát triển web

    15 Phương thức JavaScript để thao tác DOM cho nhà phát triển web

    Là một nhà phát triển web, bạn thường xuyên cần phải thao tác DOM, mô hình đối tượng được sử dụng bởi các trình duyệt để chỉ định cấu trúc logic của các trang web và dựa trên cấu trúc này để kết xuất các phần tử HTML trên màn hình.

    HTML định nghĩa cấu trúc DOM mặc định. Tuy nhiên, trong nhiều trường hợp, bạn có thể muốn thao tác điều này bằng JavaScript, thường là để thêm chức năng bổ sung đến một trang web.

    HÌNH ẢNH: Nhà phát triển Google

    Trong bài đăng này, bạn sẽ tìm thấy một danh sách 15 phương thức JavaScript cơ bản cái đó hỗ trợ thao tác DOM. Bạn có thể sử dụng các phương thức này thường xuyên trong mã của mình và bạn cũng sẽ bắt gặp chúng trong các hướng dẫn JavaScript của chúng tôi.

    1. querySelector ()

    Các querySelector () phương pháp trả về phần tử đầu tiên khớp với một hoặc nhiều bộ chọn CSS. Nếu không tìm thấy kết quả khớp, nó sẽ trả về vô giá trị.

    Trước querySelector () đã được giới thiệu, các nhà phát triển sử dụng rộng rãi getEuityById () phương pháp mà tìm nạp một phần tử với một chỉ định ID giá trị.

    Mặc dầu getEuityById () vẫn là một phương pháp hữu ích, nhưng với cái mới hơn querySelector () và querySelector ALL () phương pháp chúng tôi tự do các phần tử đích dựa trên bất kỳ bộ chọn CSS nào, do đó chúng tôi có sự linh hoạt hơn.

    Cú pháp
    var ele = document.querySelector (bộ chọn);
    • yêu tinh - Yếu tố phù hợp đầu tiên hoặc vô giá trị (nếu không có phần tử nào khớp với bộ chọn)
    • bộ chọn - một hoặc nhiều bộ chọn CSS, chẳng hạn như "#fooId", ".fooClassName", ". class1. class2", hoặc là ". class1, .group2"
    Mã ví dụ

    Trong ví dụ này, đầu tiên

    được chọn với querySelector () Phương thức và màu của nó được đổi thành màu đỏ.

     
    đoạn một
     
    đoạn hai
     
    một
     
    đoạn ba
     
    div hai
     
     var firstDiv = document.querySelector ('div'); FirstDiv.style.color = 'đỏ';
    Demo tương tác

    Kiểm tra querySelector () phương pháp trong bản demo tương tác sau đây. Chỉ cần nhập một bộ chọn phù hợp với những cái bạn có thể tìm thấy bên trong các hộp màu xanh (ví dụ:. #số ba) và nhấp vào nút Chọn. Lưu ý rằng nếu bạn gõ .khối, chỉ trường hợp đầu tiên của nó sẽ được chọn.

    2. querySelector ALL ()

    không giống querySelector () chỉ trả về phiên bản đầu tiên của tất cả các yếu tố phù hợp, querySelector ALL () trả về tất cả các phần tử khớp với bộ chọn CSS đã chỉ định.

    Các yếu tố phù hợp được trả về như một Nút danh sách đối tượng sẽ là một đối tượng trống nếu không tìm thấy phần tử phù hợp.

    Cú pháp
    var eles = document.querySelector ALL (bộ chọn);
    • yêu tinh - Một Nút danh sách đối tượng với tất cả các yếu tố phù hợp như giá trị thuộc tính. Đối tượng trống nếu không tìm thấy kết quả khớp.
    • bộ chọn - một hoặc nhiều bộ chọn CSS, chẳng hạn như "#fooId", ".fooClassName", ". class1. class2", hoặc là ". class1, .group2"
    Mã ví dụ

    Ví dụ dưới đây sử dụng HTML giống như trước đây. Tuy nhiên, trong ví dụ này, tất cả các đoạn được chọn với querySelector ALL (), và có màu xanh.

     
    đoạn một
     
    đoạn hai
     
    một
     
    đoạn ba
     
    div hai
     
     var đoạn = document.querySelector ALL ('p'); for (var p của đoạn văn) p.style.color = 'blue';

    3. addEventListener ()

    Sự kiện tham khảo những gì xảy ra với một phần tử HTML, chẳng hạn như nhấp, tập trung hoặc tải, mà chúng ta có thể phản ứng với JavaScript. Chúng ta có thể gán các hàm JS cho nghe cho các sự kiện này trong các yếu tố và làm một cái gì đó khi sự kiện đã xảy ra.

    Có ba cách bạn có thể gán một hàm cho một sự kiện nào đó.

    Nếu foo () là một chức năng tùy chỉnh, bạn có thể đăng ký nó như một người nghe sự kiện nhấp (gọi nó khi phần tử nút được nhấp) theo ba cách:

    1.  
    2.  var btn = document.querySelector ('nút'); btn.onclick = foo;
    3.  var btn = document.querySelector ('nút'); btn.addEventListener ('nhấp', foo);

    Phương pháp addEventListener () (giải pháp thứ ba) có một số ưu; đó là tiêu chuẩn mới nhất - cho phép gán nhiều hơn một chức năng làm người nghe sự kiện cho một sự kiện - và đi kèm với một bộ tùy chọn hữu ích.

    Cú pháp
    ele.addEventListener (evt, người nghe, [tùy chọn]);
    • yêu tinh - Phần tử HTML mà người nghe sự kiện sẽ lắng nghe.
    • phát triển - Sự kiện được nhắm mục tiêu.
    • người nghe - Thông thường, một hàm JavaScript.
    • tùy chọn - (tùy chọn) Một đối tượng có một tập các thuộc tính boolean (được liệt kê bên dưới).
    Tùy chọn Điều gì xảy ra, khi nó được đặt thành thật?
    chụp

    Dừng bong bóng sự kiện, tức là ngăn chặn bất kỳ người nghe sự kiện nào cho cùng loại sự kiện trong tổ tiên của thành phần.

    Để sử dụng tính năng này, bạn có thể sử dụng 2 cú pháp:

    1. ele.addEventListener (evt, người nghe, đúng)
    2. ele.addEventListener (evt, listener, capt: true);
    Một lần

    Người nghe chỉ được gọi lần đầu tiên khi sự kiện xảy ra, sau đó nó sẽ tự động tách khỏi sự kiện và sẽ không được kích hoạt bởi nó nữa.
    thụ động

    Không thể dừng hành động mặc định của sự kiện bằng phương thức notifyDefault ().
    Mã ví dụ

    Trong ví dụ này, chúng tôi thêm một trình nghe sự kiện nhấp được gọi là foo, để 

     var btn = document.querySelector ('nút'); btn.addEventListener ('nhấp', foo); hàm foo () alert ('xin chào');
    Demo tương tác

    Chỉ định foo () chức năng tùy chỉnh như một người nghe sự kiện cho bất kỳ một trong ba sự kiện sau đây: đầu vào, nhấp chuột hoặc là Di chuột lên trên & kích hoạt sự kiện đã chọn trong trường nhập dưới cùng bằng cách di chuột, nhấp hoặc nhập vào nó.

    4. removeEventListener ()

    Các removeEventListener () phương pháp tách người nghe sự kiện được thêm vào trước đó với addEventListener () phương pháp từ sự kiện nó đang lắng nghe.

    Cú pháp
    ele.removeEventListener (evt, listener, [tùy chọn]);

    Sử dụng cú pháp giống như đã nói ở trên addEventListener () phương pháp (ngoại trừ Một lần tùy chọn đó bị loại trừ). Các tùy chọn được sử dụng rất cụ thể về việc xác định người nghe được tách ra.

    Mã ví dụ

    Theo ví dụ mã chúng tôi sử dụng tại addEventListener (), ở đây chúng tôi loại bỏ trình nghe sự kiện nhấp được gọi là foo từ