Nói đơn thuần, getElementById ( ) sẽ trả về thành phần có thuộc tính id được chỉ định. Nếu có nhiều thành phần sử dụng cùng một id thì nó sẽ trả về thành phần tiên phong. Còn nếu không có thành phần nào có id chỉ định thì sẽ trả về null .
Cách dễ làm quen nhất chính là xem ví dụ .
Nhờ phương thức getElement mà ta có thể lấy được dữ liệu mình mong muốn trong thẻ, đồng thời trên ví dụ mình cũng đề cập đến cách sử dụng css khác, mới đầu mình cũng không quen nhưng bây giờ cảm thấy rất thuận tiện vì có những trường hợp phải sang styles.css tìm id để thay đổi – tìm nơi để sửa là một cực hình, mà hiện tại chỉ cần .style.thuộctính là xong.
Ngoài phương pháp getElementById ( ) còn có những phương pháp khác như :
- getElementsByTagName(tag)
- getElementsByClassName(classname)
- getElementsByName(name)
Tóm Tắt
document.getElementsByTagName(tag)
Thay vì trả về thành phần id chỉ định, thì ở đây nó sẽ trả về những thẻ được chỉ định. Bạn quan tâm sẽ thấy getElements có s, nghĩa nó hoàn toàn có thể lấy nhiều thẻ cùng lúc, chứ nếu phải lấy từng cái id chắc phải lấy đến mùa quýt năm sau luôn .
Từ kết quả xem ở console ta biết được mình đã lấy thẻ thành công.Phương thức này cũng rất tiện, chỉ cần một dòng một lúc đã lấy được nhiều thẻ mình cần .
Còn trường hợp có thẻ bạn muốn tìm và lấy, nhưng trùng với những thẻ khác thì sao ? Hãy nghĩ ngay đến cách lấy classname, lấy tên class là giải pháp tối ưu đỡ đau đầu cho bạn .
document.getElementsByClassName(classname)
Phương thức getElementsByClassName ( ) sẽ trả về những tên class đã chỉ định, dù những thẻ khác nhau đi chăng nữa nhưng chỉ cần có tên class giống nhau thì phương pháp này sẽ lấy tất tần tật những thẻ chứa tên class đó .
Các bạn thấy đó, kể cả không chung id, không cùng một thẻ nhưng vẫn lấy được tên class mình mong ước .
document.getElementsByName(name)
Phương thức sẽ trả về name đã được chỉ định, thường rất hiếm sử dụng nên mình cũng chỉ nhắc sơ qua thôi.
Khi bạn lấy được thuộc tính mình muốn rồi, nhưng lại muốn đổi khác giá trị trong đó thì hãy đến ngay với innerHTML !
.innerHTML: thay đổi giá trị thẻ đã chỉ định
Thông qua phương pháp innerHTML, ta đã ghi đè lên id chỉ định và gán giá trị biến hóa tài liệu của thẻ. InnerHTML vừa chèn, vừa lấy tài liệu trên đoạn code HTML mình muốn, nhưng nó cũng tràn trề rủi ro tiềm ẩn bảo mật thông tin, nên hạn chế sử dụng hoặc dùng textContent thay thế sửa chữa ( chỉ đơn thuần là chèn text ) .
Mở rộng thêm một xíu, khi bạn muốn trả về thành phần tiên phong trong tổng thể hiệu quả tìm thấy ở CSS selector đã cho, thì phương pháp querySelector ( ) là sự lựa chọn dành cho bạn .
querySelector()
Trả về thành phần đầu sau tổng thể cuộc tìm kiếm của CSS selector, ví dụ minh họa dưới đây sẽ giúp bạn hiểu đôi chút về phương pháp này .
Ôi mà sử dụng querySelector ( ) bạn phải tuân thủ điều này, class => ( ‘. tên class ’ ), còn id => ( ‘ # tên id ’ ) .
Hoặc nếu bạn muốn trả về tất cả phần tử trong kết quả đã tìm ở CSS selector thì bạn có thể dùng querySelectorAll()[0]. Cho đến nay thì querySelectorAll() vẫn là phương thức linh hoạt nhất mà mọi người hay dùng. Nếu bạn hứng thú thì hãy tìm hiểu thêm về nó.
Hi vọng những ví dụ đơn thuần của mình sẽ giúp mọi người hiểu đôi nét về những phương pháp này. Cảm ơn mọi người đã đọc đến đây .
Huyền Nguyễn
PLT SOLUTIONS.
Source: https://final-blade.com
Category: Kiến thức Internet
