Phương thức querySelectorAll và getElementsBy * trả về gì?

157
dmo 2012-05-22 13:17.

Đỗ getElementsByClassName(và chức năng tương tự như getElementsByTagNamequerySelectorAll) làm việc giống như getElementByIdhay họ trả về một mảng của các nguyên tố?

Lý do tôi hỏi là vì tôi đang cố gắng thay đổi kiểu của tất cả các phần tử đang sử dụng getElementsByClassName. Xem bên dưới.

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';

10 answers

155
ThiefMaster 2012-05-22 13:18.

getElementById()Mã của bạn hoạt động vì ID phải là duy nhất và do đó hàm luôn trả về chính xác một phần tử (hoặc nullnếu không tìm thấy phần tử nào).

Tuy nhiên, getElementsByClassName(), querySelectorAll(), và các getElementsBy*phương pháp trả về một bộ sưu tập mảng giống như các yếu tố. Lặp lại nó giống như bạn làm với một mảng thực:

var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = '100px';
}

Nếu bạn thích thứ gì đó ngắn hơn, hãy cân nhắc sử dụng jQuery :

$('.myElement').css('size', '100px');
20
Alvaro Joao 2016-02-15 16:53.

Bạn đang sử dụng một mảng làm đối tượng, sự khác biệt giữa getElementbyIdgetElementsByClassNamelà:

getElementsByClassName

Các getElementsByClassName(classNames)phương pháp có một chuỗi chứa hổn độn của các thẻ không gian tách biệt độc đáo đại diện cho các lớp học. Khi được gọi, phương thức phải trả về một NodeListđối tượng trực tiếp chứa tất cả các phần tử trong tài liệu có tất cả các lớp được chỉ định trong đối số đó, lấy được các lớp bằng cách tách một chuỗi trên khoảng trắng. Nếu không có mã thông báo nào được chỉ định trong đối số, thì phương thức phải trả về một NodeList trống.

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

Phương thức getElementById () truy cập phần tử đầu tiên với id đã chỉ định.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

trong mã của bạn các dòng:

1- document.getElementsByClassName ('myElement'). Style.size = '100px';

sẽ KHÔNG hoạt động như mong đợi, vì getElementByClassNamesẽ trả về một mảng và mảng sẽ KHÔNG có thuộc styletính, bạn có thể truy cập từng thuộc tính elementbằng cách lặp qua chúng.

Đó là lý do tại sao hàm getElementByIdlàm việc cho bạn, hàm này sẽ trả về đối tượng trực tiếp. Do đó bạn sẽ có thể truy cập styletài sản.

11
remdevtec 2016-01-07 23:14.

Mô tả sau được lấy từ trang này :

Phương thức getElementsByClassName () trả về một tập hợp tất cả các phần tử trong tài liệu với tên lớp được chỉ định, dưới dạng một đối tượng NodeList.

Đối tượng NodeList đại diện cho một tập hợp các nút. Các nút có thể được truy cập bằng số chỉ mục. Chỉ số bắt đầu từ 0.

Mẹo: Bạn có thể sử dụng thuộc tính độ dài của đối tượng NodeList để xác định số lượng phần tử có tên lớp được chỉ định, sau đó bạn có thể lặp qua tất cả các phần tử và trích xuất thông tin bạn muốn.

Vì vậy, như một tham số getElementsByClassNamesẽ chấp nhận một tên lớp.

Nếu đây là nội dung HTML của bạn:

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

sau đó var menuItems = document.getElementsByClassName('menuItem')sẽ trả về một tập hợp (không phải mảng) gồm 3 chữ cái trên <div>, vì chúng khớp với tên lớp đã cho.

Sau đó, bạn có thể lặp lại tập hợp các nút này ( <div>trong trường hợp này) với:

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

Vui lòng tham khảo bài đăng này để biết thêm về sự khác biệt giữa các phần tử và các nút.

11
kind user 2017-02-22 13:07.

ES6 cung cấp Array.from()phương thức, phương thức này tạo ra một thể hiện Mảng mới từ một đối tượng giống mảng hoặc có thể lặp lại.

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

Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

Như bạn có thể thấy bên trong đoạn mã, sau khi sử dụng Array.from()hàm, bạn có thể thao tác trên từng phần tử.


Cùng một giải pháp sử dụng jQuery.

$('.box').css({'background':'green'});
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

7
Thielicious 2017-10-24 01:41.

Nói cách khác

  • document.querySelector()chỉ chọn một phần tử đầu tiên của bộ chọn được chỉ định. Vì vậy, nó không tạo ra một mảng, nó là một giá trị duy nhất. Tương tự như document.getElementById()chỉ tìm nạp phần tử ID, vì ID phải là duy nhất.

  • document.querySelectorAll()chọn tất cả các phần tử với bộ chọn được chỉ định và trả về chúng trong một mảng. Tương tự như chỉ document.getElementsByClassName()dành cho các lớp và document.getElementsByTagName()thẻ.


Tại sao sử dụng querySelector?

Nó chỉ được sử dụng với mục đích duy nhất là dễ dàng và ngắn gọn.


Tại sao sử dụng getElement / sBy? *

Hiệu suất nhanh hơn.


Tại sao sự khác biệt về hiệu suất này?

Cả hai cách lựa chọn đều có mục đích tạo NodeList để sử dụng thêm. querySelectors tạo ra một NodeList tĩnh với các bộ chọn do đó nó phải được tạo từ đầu.
getElement / sBy * ngay lập tức điều chỉnh NodeList hiện có của DOM hiện tại.

Vì vậy, khi nào sử dụng phương pháp nào là tùy thuộc vào bạn / dự án của bạn / thiết bị của bạn.


Infos

Demo tất cả các phương pháp Kiểm tra hiệu suất
tài liệu NodeList

4
atilkan 2016-06-17 17:21.

Nó trả về danh sách giống như mảng.

Bạn làm cho nó một Mảng làm ví dụ

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);  
4
Sergey 2017-07-03 09:29.

Bạn có thể nhận được một phần tử duy nhất bằng cách chạy

document.querySelector('.myElement').style.size = '100px';

nhưng nó sẽ hoạt động cho phần tử đầu tiên với lớp .myElement.

Nếu bạn muốn áp dụng điều này cho tất cả các phần tử với lớp, tôi khuyên bạn nên sử dụng

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});
4
Irina Mityugova 2018-11-25 18:06.
/*
 * To hide all elements with the same class, 
 * use looping to reach each element with that class. 
 * In this case, looping is done recursively
 */

const hideAll = (className, i=0) => {
if(!document.getElementsByClassName(className)[i]){ //exits the loop when element of that id does not exist
  return; 
}

document.getElementsByClassName(className)[i].style.visibility = 'hidden'; //hide element
return hideAll(className, i+1) //loop for the next element
}

hideAll('appBanner') //the function call requires the class name
0
Matas Vaitkevicius 2015-04-21 06:03.

Với ES5 + (bất kỳ được duyệt hiện nay - 2017), bạn sẽ có thể làm

[].forEach.call(document.getElementsByClassName('answer'), function(el) {
    el.style.color= 'red';
});

0
Cat 2020-07-11 15:18.

Một câu trả lời cho trường hợp cụ thể của Drenzii ...

Bạn có thể tạo một hàm hoạt động cho bất kỳ wordphần tử nào và chuyển vào số của phần tử bạn muốn chuyển đổi, như:

// Binds `wordButtons` to an (array-like) HTMLCollection of buttons
const wordButtons = document.getElementsByClassName("word");

// Applies the `slantWord` function to the first word button
slantWord(1);

// Defines the `slantWord` function
function slantWord(wordNumber) {
  const index = wordNumber - 1; // Collection index is zero-based
  wordButtons[index].style.transform = "rotate(7deg)"; // Transforms the specified button
}
<div class="wordGameContainer">
  <button class="word word1">WORD 1</button>
  <button class="word word2">WORD 2</button>
  <button class="word word3">WORD 3</button>
  <button class="word word4">WORD 4</button>
</div>

<div>
  <button onclick="moveWord()" class="playButton">PLAY</button>
</div>

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Xem đoạn giới thiệu cho bộ phim chuyển thể đầy khói lửa, có sự góp mặt của ngôi sao Edward Norton từ phim Motherless Brooklyn của Jonathan Lethem

Xem đoạn giới thiệu cho bộ phim chuyển thể đầy khói lửa, có sự góp mặt của ngôi sao Edward Norton từ phim Motherless Brooklyn của Jonathan Lethem

Edward Norton đã muốn đưa cuốn tiểu thuyết Motherless Brooklyn của Jonathan Lethem's Joycean 1999 lên màn ảnh kể từ khi nó được xuất bản. Bây giờ, 20 năm sau, một đoạn giới thiệu đã xuất hiện cho câu chuyện sôi nổi, đưa câu chuyện của Lethem trở lại những năm 1950 với rất nhiều gương mặt quen thuộc.

Cách dễ dàng chọn không tham gia trọng tài ràng buộc thẻ Apple

Cách dễ dàng chọn không tham gia trọng tài ràng buộc thẻ Apple

Có thích thú khi sử dụng Thẻ Apple mới của bạn không? Trước khi bạn bắt đầu chi tiêu, có một nhiệm vụ bổ sung cần xem xét: chọn không tham gia trọng tài ràng buộc. Bạn sẽ phát hiện ra các điều khoản trọng tài ràng buộc trong nhiều thỏa thuận tài chính vì nó giúp ngăn các ngân hàng và đối tác kinh doanh của họ không phải ra tòa.

Những người chơi Fortnite World Cup không ghi bàn có cảm giác hài hước về điều đó

Những người chơi Fortnite World Cup không ghi bàn có cảm giác hài hước về điều đó

Điểm số tại vòng chung kết Fortnite World Cup Solo hôm nay là rất lớn, với người chiến thắng Bugha ghi được nhiều hơn 26 điểm so với người về thứ hai là Psalm. Nhưng không phải ai cũng có thể giành chiến thắng: Bốn cầu thủ ra về với 0 điểm, nhưng — ít nhất là trên Twitter — họ là những người thể thao tốt về điều đó.

Báo cáo: Cánh cửa tuyển sinh có thể đã mở cho các ứng viên UCLA có mối quan hệ có ảnh hưởng

Báo cáo: Cánh cửa tuyển sinh có thể đã mở cho các ứng viên UCLA có mối quan hệ có ảnh hưởng

Huấn luyện viên trưởng của bộ môn thể dục dụng cụ UCLA Valorie Kondos-Field theo dõi Katelyn Ohashi thi đấu thăng bằng trong trận gặp Stanford tại Pauley Pavilion vào ngày 10 tháng 3 năm 2019 ở Los Angeles, California. Vụ bê bối gian lận tuyển sinh đại học tiết lộ các chi tiết của một quá trình chính thức hóa để đưa những đứa trẻ thất bại của các gia đình giàu có và nổi tiếng vào các trường đại học đáng tin cậy và danh tiếng, sử dụng một "cửa phụ" đắt tiền cho các bậc cha mẹ mà sự giàu có của họ khiến họ không có cơ hội. chỉ cần tài trợ cho một cánh mới trong khuôn viên trường.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Tầm nhìn đám mây phi tập trung của DFINITY Blockchain

Lưu ý của người biên tập: Bạn đang xem tài liệu lỗi thời từ blog DFINITY đang được bảo quản cho mục đích lưu trữ.

Tầm nhìn đám mây phi tập trung của DFINITY Blockchain

Bài đăng này khám phá tầm nhìn về đám mây phi tập trung của nhóm DFINITY và cách nó liên quan đến các nhà cung cấp blockchain truyền thống và đám mây hiện có như Amazon Web Services. Các minh chứng về công nghệ DFINITY được áp dụng bởi một mạng lưới quy mô lớn sẽ được thực hiện vào mùa thu năm 2017, sau đó sẽ được gây quỹ Chính cho quỹ hỗ trợ phi lợi nhuận, với mạng “đám mây mở” dự kiến ​​sẽ ra mắt vào đầu mùa hè năm 2018 .

Language