Hướng dẫn get class index javascript - lấy javascript chỉ mục lớp

The first thing you might want to address in your code is the inline HTML binding.

You could use document.addEventListener on each element, or rely on event delegation.

The widely most used implementation of event delegation comes with jQuery. If you're already using jQuery, this is the way to go!

Alternatively I've also my own little delegate utility.

const delegate = (fn, selector) => {
  return function handler(event) {
    const matchingEl = matches(event.target, selector, this);
    if(matchingEl != null){
      fn.call(matchingEl, event);
    }
  };
};

const matches = (target, selector, boundElement) => {
  if (target === boundElement){
    return null;
  }
  if (target.matches(selector)){
    return target;
  }
  if (target.parentNode){
    return matches(target.parentNode, selector, boundElement);
  }
  return null;
};

This is how you would register the event listener.

document.getElementById('#parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));

And this is how you could get the index of the element that generated the event.

const handler = (event) => {
  console.log(Array.prototype.indexOf.call(event.currentTarget.children, event.target));
}

Live demo:

const delegate = (fn, selector) => {
  return function handler(event) {
    const matchingEl = matches(event.target, selector, this);
    if (matchingEl != null) {
      fn.call(matchingEl, event);
    }
  };
};

const matches = (target, selector, boundElement) => {
  if (target === boundElement) {
    return null;
  }
  if (target.matches(selector)) {
    return target;
  }
  if (target.parentNode) {
    return matches(target.parentNode, selector, boundElement);
  }
  return null;
};

const handler = (event) => {
  console.log(Array.prototype.indexOf.call(event.currentTarget.children, event.target));
}

document.getElementById('parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));

  
Bruce Lee
  
Jackie Chan
  
Jet li

Nội dung chính

• getElementsByClassName là gì
• getelementbyid vs getelementsbyclassname
• Tổng kết
• Bài viết liên quan
• childNodes trong JavaScript và cách lấy các Node con
• attributes trong JavaScript và cách lấy danh sách thuộc tính của Element
• currentScript trong JavaScript và cách lấy Element chứa mã script đang được xử lý
• children trong JavaScript và cách lấy các Element con
• CSS selectors trong JavaScript
• DocumentFragment trong JavaScript và cách thêm đồng thời nhiều Node
• firstChild trong JavaScript và cách lấy Node con đầu tiên
• getAttribute trong JavaScript và cách lấy giá trị thuộc tính của Element

Nội dung chínhgetElementsByClassName trong JavaScript. Bạn sẽ biết cách sử dụng phương thức getElementsByClassName để lấy các element trong DOM thông qua giá trị thuộc tính class của chúng sau bài học này.

getElementsByClassName là gì

getelementbyid vs getelementsbyclassname hay còn gọi là document.getElementsByClassName trong JavaScript là một phương thức của đối tượng DOM, có tác dụng lấy toàn bộ các element có giá trị thuộc tính class chỉ định từ DOM.

Hướng dẫn cách sử dụng getElementsByClassName trong JavaScript. Bạn sẽ biết cách sử dụng phương thức getElementsByClassName để lấy các element trong DOM thông qua giá trị thuộc tính class của chúng sau bài học này.

document.getElementsByClassName(classnames)

getElementsByClassName hay còn gọi là document.getElementsByClassName trong JavaScript là một phương thức của đối tượng DOM, có tác dụng lấy toàn bộ các element có giá trị thuộc tính class chỉ định từ DOM.

Cú pháp sử dụng phương thức getElementsByClassName trong JavaScript như sau:

Trong đó đối số classnames của phương thức giá trị thuộc tính class của element cần lấy (ví dụ: ‘box’ ).

Chúng ta có thể chỉ định một hoặc nhiều classnames cùng lúc, và tất cả các element từ DOM chỉ cần thoả mãn có giá trị class giống với một trong các classname được chỉ định đều được lấy hết. Trong trường hợp này, chúng ta sẽ viết tên các class cách nhau bởi dấu cách như sau:HTMLCollection Object chứa tất cả các element được tìm thấy. Trong trường hợp không tìm thấy element phù hợp thì một HTMLCollection Object trống cũng sẽ được trả về.

document.getElementsByClassName(classname1 classname2 classname3

document.getElementById('#parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));

Phương thức getElementsByClassName sẽ trả về một HTMLCollection Object chứa tất cả các element được tìm thấy. Trong trường hợp không tìm thấy element phù hợp thì một HTMLCollection Object trống cũng sẽ được trả về.

let elements = document.getElementsByClassName('box');


let len = elements.length;


let element = elements.item(1);


let element = elements[1];

HTMLCollection Object là một tập hợp của các element trong JavaScript. Trong HTMLCollection Object được tích hợp nhiều thuộc tính cũng như phương thức có sẵn giúp chúng ta xử lý tập hợp element, ví dụ như là thuộc tính length để tìm số phần tử, hay phương thức item để lấy phần tử từ index của nó chẳng hạn.

Ví dụ cụ thể, chúng ta có thể lấy các element có giá trị thuộc tính class là

document.getElementById('#parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));

getelementbyid vs getelementsbyclassname

Hướng dẫn cách sử dụng getElementsByClassName trong JavaScript. Bạn sẽ biết cách sử dụng phương thức getElementsByClassName để lấy các element trong DOM thông qua giá trị thuộc tính class của chúng sau bài học này.

document.getElementById('#parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));

document.getElementById('#parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));

Do đó, có thể hiểu rằng getelementbyid sẽ được dùng để tìm một element từ DOM, trong khi getelementsbyclassname lại được sử dụng với mục đích tìm tập hợp các element thoả mãn điều kiện từ DOM.

Mã mẫu

Sau đây hãy cùng tìm hiểu cách lấy các element từ trong DOM thông qua classname của chúng bằng phương thức getElementsByClassName trong JavaScript.

html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng getElementsByClassNametitle>
<style type="text/css">
  div, p{
    padding:20px;
    margin:10px;
    width:30%;
  }
  .box{
    border:1px solid #ff0000;
  }
style>
head>
<body>


<div class="box">
  <p>Kế hoạch mua sắmp>
  <p class="box">Ninh Bìnhp>
  <p class="box">Shop mẹ và bép>
div>

<button onClick="getElements();">Click, lấy và đổi style của element từ classnamebutton>

<script>
function getElements(){
    let elements = document.getElementsByClassName('box');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        elements.item(i).style.border="2px solid #0000ff";
    }
}
script>
body>
html>

Trong mã HTML ở trên, chúng ta sẽ lấy 3 element có cùng classname là

document.getElementById('#parent')
  .addEventListener('click', delegate(handler, '.wpEdit'));

Sau khi lấy được HTMLCollection Object chứa các element này, bằng cách dùng vòng lặp để truy cập đến từng element, chúng ta sẽ thay đổi giá trị css của chúng, qua đó đã đổi màu box từ đỏ thành xanh như sau:

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng getElementsByClassName trong JavaScript để lấy element theo thuộc tính classname rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.getElementsByClassName trong JavaScript để lấy element theo thuộc tính classname rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại Creativecommons và DMCA

Bài viết liên quan

• childNodes trong JavaScript và cách lấy các Node con

• attributes trong JavaScript và cách lấy danh sách thuộc tính của Element

• currentScript trong JavaScript và cách lấy Element chứa mã script đang được xử lý

• children trong JavaScript và cách lấy các Element con

• CSS selectors trong JavaScript

• DocumentFragment trong JavaScript và cách thêm đồng thời nhiều Node

• firstChild trong JavaScript và cách lấy Node con đầu tiên

• getAttribute trong JavaScript và cách lấy giá trị thuộc tính của Element