Làm cách nào để lấy InternalHTML theo tên lớp trong JavaScript?

Phần tử div có một lớp hộp bên trong HTML và bây giờ hãy thay đổi nó thành một lớp vòng tròn bằng JavaScript

.box, .circle {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100px;
  height:100px;
  background:#32bacf;
  margin:10px;
  text-align:center;
}

.circle {
  border-radius:50%;
}

.blue {
  background:#32bacf;
}

.orange {
  background:orange;
}

Đầu tiên, lấy tham chiếu DOM của phần tử div bằng cách sử dụng hộp tên lớp của nó bằng cách gọi phương thức getElementsByClassName() trên đối tượng tài liệu

Ghi chú. Bạn cũng có thể sử dụng phương thức khác để lấy các tham chiếu DOM như getElementByID(), getElementsByName, QuerySelector(), v.v.

Thay tên lớp. hộp với. khoanh tròn bằng thuộc tính className

Ngoài ra, hãy thay đổi văn bản InternalHTML thành hình tròn

const boxes = document.getElementsByClassName("box");
boxes[0].innerHTML = "circle";
boxes[0].className = "circle";

2. Thay đổi tên lớp bằng phương thức setAttribute

Tương tự như thuộc tính className, bạn có thể sử dụng phương thức setAttribute() để thay thế tên lớp từ. hộp để. lớp học vòng tròn

Gọi phương thức setAttribute() trên đối tượng phần tử div

Phải mất hai đối số

1. tên thuộc tính. tầng lớp
2. giá trị thuộc tính. vòng tròn (là tên lớp)

const boxes = document.getElementsByClassName("box");
boxes[0].setAttribute("class", "circle");

Khi bạn sử dụng thuộc tính className hoặc phương thức setAttribute(), chúng sẽ thay thế bất kỳ một hoặc nhiều tên lớp hiện có nào bằng (các) tên lớp mới

3. Thay đổi tên lớp bằng API classList

Ngoài ra, phương thức add() trên classList cũng có thể được sử dụng để thay đổi giá trị của thuộc tính tên lớp của phần tử

Phương thức add() trên đối tượng classList sẽ thêm một lớp mới vào danh sách lớp hiện có thay vì thay thế nó

Vì lý do đó, bạn sẽ cần xóa lớp trước đó bằng phương thức remove() trên đối tượng classList

const boxes = document.getElementsByClassName("box");
boxes[0].classList.add("circle");
boxes[0].classList.remove("box");

4. Thay đổi nhiều tên lớp thành một phần tử

Tìm hiểu cách thay thế/đổi nhiều tên lớp thành một phần tử trong JavaScript

Như bạn có thể thấy, phần tử div có hai tên lớp. hộp và màu xanh

box

Bây giờ hãy thay thế chúng bằng hình tròn và màu cam bằng API classList

const boxes = document.getElementsByClassName("box");
boxes[0].classList.add("circle", "orange");
boxes[0].classList.remove("box", "blue");

Sử dụng phương thức setAttribute()

const boxes = document.getElementsByClassName("box");
boxes[0].setAttribute("class", "circle orange");

Sử dụng thuộc tính className

const boxes = document.getElementsByClassName("box");
boxes[0].className = "circle orange";

5. Thay đổi tên lớp thành nhiều phần tử

Tìm hiểu cách thay đổi tên lớp thành nhiều phần tử trong JavaScript

Dưới đây là năm phần tử div với hộp tên lớp

Không có gì lạ mắt

Nhận tham chiếu DOM của tất cả các phần tử div bằng phương thức getElementsByTagName() trên đối tượng tài liệu

Phương thức getElementsByTagName() trả về tất cả các phần tử div dưới dạng HTMLCollection

HTMLCollection là đối tượng kiểu mảng và có thể được lặp lại bằng cách sử dụng vòng lặp for…of

.box, .circle {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100px;
  height:100px;
  background:#32bacf;
  margin:10px;
  text-align:center;
}

.circle {
  border-radius:50%;
}

.blue {
  background:#32bacf;
}

.orange {
  background:orange;
}

Bên trong mỗi lần lặp lại, thay thế tên lớp của từng phần tử div từ hộp sang vòng kết nối

6. Thay đổi tên lớp khi nhấp chuột

Hãy thay đổi tên lớp của một phần tử khi nhấp chuột

Đây là một div đơn giản với hộp tên lớp

Thay đổi hộp tên lớp thành vòng tròn khi một phần tử được nhấp vào

box

Nhận tham chiếu DOM của phần tử hộp bằng cách sử dụng getElementsByClassName() trên đối tượng tài liệu

Đính kèm sự kiện nhấp chuột vào phần tử bằng chức năng gọi lại boxPressed

.box, .circle {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100px;
  height:100px;
  background:#32bacf;
  margin:10px;
  text-align:center;
}

.circle {
  border-radius:50%;
}

.blue {
  background:#32bacf;
}

.orange {
  background:orange;
}

Bên trong hàm gọi lại, lấy phần tử hiện được nhấp bằng cách sử dụng đối tượng sự kiện được truyền vào hàm

Làm cách nào để lấy HTML bên trong theo tên lớp?

Làm cách nào để lấy văn bản theo tên lớp trong JavaScript?

Làm cách nào để lấy giá trị InternalHTML trong JavaScript?

Làm cách nào để lấy chỉ mục của lớp trong JavaScript?