Làm cách nào để bạn nhắm mục tiêu id javascript?

ví dụ

Chọn phần tử có id "myID. entry[1]" và tạo cho nó một đường viền màu đỏ. Lưu ý cách một số ký tự nhất định phải được thoát bằng dấu gạch chéo ngược

Giả sử bạn muốn truy xuất giá trị của thuộc tính id của một phần tử DOM trong tài liệu HTML của mình, chẳng hạn như

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

cách tốt nhất để thực hiện điều này là gì?

Để nhận thuộc tính

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

// Event listener method syntax
EventTarget.addEventListener(type, listener);

Hướng dẫn này sẽ chỉ cho bạn chính xác cách thực hiện việc này trong hai bước. tạo trình xử lý sự kiện cho các lần nhấp, sau đó áp dụng phương thức để lấy thuộc tính id của các phần tử được nhấp

Tạo Trình lắng nghe sự kiện

Trong JavaScript, một lần nhấp (hoặc, trên thiết bị màn hình cảm ứng, một lần nhấn) là một sự kiện mà bạn có thể nghe và phản ứng lại

Bạn làm điều này bằng cách tạo một trình lắng nghe sự kiện, như tên của nó, lắng nghe các tương tác của người dùng với các thành phần DOM trên giao diện người dùng và kích hoạt khi sự kiện đang được lắng nghe diễn ra

Bạn làm điều này với phương pháp

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

Phương thức

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

Cú pháp của nó như sau

// Event listener method syntax
EventTarget.addEventListener(type, listener);

Với phương pháp này, bạn có thể nhắm mục tiêu tất cả các nhấp chuột, bất kể yếu tố nào

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

Hoặc, bằng cách sử dụng phương thức

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

// Create event listener for all link clicks
document.querySelectorAll('a').forEach(occurence => {
  occurence.addEventListener('click', (e) => {
    console.log('A link was clicked');
  });
});

// Create event listener for link clicks with a custom attribute
document.querySelectorAll('a[data-type="link-outbound"]').forEach(occurence => {
  occurence.addEventListener('click', (e) => {
    console.log('An outbound link was clicked');
  });
});

Mặc dù có nhiều cách khác để nhắm mục tiêu các phần tử DOM trong JavaScript, nhưng phương thức

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

Có liên quan. Trình xử lý sự kiện cho nhiều phần tử trong JavaScript

Truy xuất thuộc tính id

Bây giờ bạn đã biết cách tạo trình xử lý sự kiện cho các lần nhấp vào các phần tử, bước tiếp theo là bạn sẽ tìm hiểu cách truy xuất thuộc tính

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

Chúng ta có thể làm điều này bằng cách chuyển tham số

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

Sau đó, chúng tôi có thể sử dụng API Web

// Target all clicks on any element
document.addEventListener('click',() =>
  {
    console.log("An element was clicked.")
  }
);

// Create event listener
document.addEventListener('click', (e) =>
  {
    // Retrieve id from clicked element
    let elementId = e.target.id;
    // If element has id
    if (elementId !== '') {
        console.log(elementId);
    }
    // If element has no id
    else { 
        console.log("An element without an id was clicked.");
    }
  }
);

Nếu bạn đã mở các công cụ dành cho nhà phát triển của trình duyệt, chạy mã này trong bảng điều khiển và nhấp vào trang web này ngay bây giờ, đây là những gì bạn sẽ thấy

Tóm lại là

Tôi hy vọng hướng dẫn này đã giúp. Gần đây, tôi thấy mình đang giải quyết thách thức này khi triển khai lớp dữ liệu cho mục đích phân tích trên một trong các trang web của mình. Tôi đã mất vài lần lặp lại (và vài giờ) để tìm ra giải pháp tốt nhất và tôi tin rằng đây chính là giải pháp

Nếu bạn có bất kỳ câu hỏi nào hoặc bạn muốn chia sẻ những cách khác để đạt được điều này với những độc giả còn lại của bài đăng này, hãy nhớ để lại câu trả lời bên dưới

Làm cách nào để truy cập id trong JavaScript?

Làm cách nào để nhận giá trị theo id trong JavaScript?

ID mục tiêu sự kiện trong JavaScript là gì?

Làm cách nào để nhận giá trị mục tiêu trong JavaScript?