Hướng dẫn htmlcollection length 0 - độ dài bộ sưu tập html 0

Question

Khi tôi đang sử dụng thuộc tính độ dài trong bộ sưu tập HTML, tôi sẽ nhận được không ... xin vui lòng sửa cho tôi ai đó ..

Nội dung chính Show

Thông số kỹ thuật
Tính tương thích của trình duyệt web

Mã HTML của tôi:

    <div class="container">
        <div class="header">
            <h2>To Do List</h2>
        </div>
        <div class="todos">
            <ul class="todolist">
                <li class="listItem">
                    <p>Doing Homework</p>
                </li>
                <li class="listItem">
                    <p>Doing Competitve Programming</p>
                </li>
                <li class="listItem">
                    <p>Doing Dynamic Programming</p>
                </li>
                <li class="listItem">
                    <p>Doing Robot Programming</p>
                </li>
                <li class="listItem">
                    <p>Doing DSA</p>
                </li>
            </ul>
        </div>
    </div>
</body>

Mã JS của tôi:

function crossAdder() {
    var todolist = document.getElementsByClassName('.listItem');
    console.log(todolist.length);
}
crossAdder();

Hỏi ngày 4 tháng 10 năm 2021 lúc 9:58Oct 4, 2021 at 9:58

2

Xóa . trong .listItem Khi bạn nhập chức năng document.getElementsByClassName.

Nó chấp nhận một tên lớp, không phải là bộ chọn CSS.

function crossAdder() {
  var todolist = document.getElementsByClassName('listItem');
  console.log(todolist.length);
}
crossAdder();

<div class="container">
  <div class="header">
    <h2>To Do List</h2>
  </div>
  <div class="todos">
    <ul class="todolist">
      <li class="listItem">
        <p>Doing Homework</p>
      </li>
      <li class="listItem">
        <p>Doing Competitve Programming</p>
      </li>
      <li class="listItem">
        <p>Doing Dynamic Programming</p>
      </li>
      <li class="listItem">
        <p>Doing Robot Programming</p>
      </li>
      <li class="listItem">
        <p>Doing DSA</p>
      </li>
    </ul>
  </div>
</div>
</body>

Đã trả lời ngày 4 tháng 10 năm 2021 lúc 9:59Oct 4, 2021 at 9:59

Tuân Daotuan DaoTuan Dao

2.5381 Huy hiệu vàng10 Huy hiệu bạc20 Huy hiệu Đồng1 gold badge10 silver badges20 bronze badges

3

function crossAdder(){

   //Use query selector if you are using .listItem
   var todoList = document.querySelectorAll(".listItem")

   //If you are using getElementsByClassName don't use the dot only need just listItem
   var todoList = document.getElementsByClassName("listItem")

   console.log(todoList)
}

Đã trả lời ngày 4 tháng 10 năm 2021 lúc 10:12Oct 4, 2021 at 10:12

2

Thuộc tính HTMLCollection.length trả về số lượng mục trong

function crossAdder() {
    var todolist = document.getElementsByClassName('.listItem');
    console.log(todolist.length);
}
crossAdder();

0.HTMLCollection.length property returns the number of items in a

function crossAdder() {
    var todolist = document.getElementsByClassName('.listItem');
    console.log(todolist.length);
}
crossAdder();

0.

Giá trị

Một giá trị số nguyên đại diện cho số lượng các mục trong ____10.

Ví dụ

Thuộc tính

function crossAdder() {
    var todolist = document.getElementsByClassName('.listItem');
    console.log(todolist.length);
}
crossAdder();

2 thường hữu ích trong lập trình DOM.Nó thường được sử dụng để kiểm tra độ dài của một danh sách, để xem nó có tồn tại không.Nó cũng thường được sử dụng làm người lặp trong vòng lặp

function crossAdder() {
    var todolist = document.getElementsByClassName('.listItem');
    console.log(todolist.length);
}
crossAdder();

3, như trong ví dụ này.

// All the elements with the class ".test" in the document
const items = document.getElementsByClassName("test");

// For each test item in the list,
// append the entire element as a string of HTML
let gross = "";
for (let i = 0; i < items.length; i++) {
  gross += items[i].innerHTML;
}

// gross is now all the HTML for the test elements