Bài viết hôm nay sẽ giới thiệu đôi nét về phương thức getElementById trong JavaScript. Phương thức này rất phổ biến trong DOM HTML, và khi không sử dụng jQuery. Vậy, getElementById là gì?
Nói đơn giản, getElementById() sẽ trả về phần tử có thuộc tính id được chỉ định. Nếu có nhiều phần tử sử dụng cùng một id thì nó sẽ trả về phần tử đầu tiên. Còn nếu không có phần tử 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 thức getElementById() còn có các phương thức khác như:
- getElementsByTagName(tag)
- getElementsByClassName(classname)
- getElementsByName(name)
document.getElementsByTagName(tag)
Thay vì trả về phần tử id chỉ định, thì ở đây nó sẽ trả về các thẻ được chỉ định. Bạn lưu ý sẽ thấy getElements có s, nghĩa 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.
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 các thẻ khác thì sao? Hãy nghĩ ngay đến cách lấy classname, lấy tên class là biện pháp tối ưu đỡ đau đầu cho bạn.
document.getElementsByClassName(classname)
Phương thức getElementsByClassName() sẽ trả về các tên class đã chỉ định, dù các thẻ khác nhau đi chăng nữa nhưng chỉ cần có tên class giống nhau thì phương thức 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 muốn.
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 thay đổi giá trị trong đó thì hãy đến ngay với innerHTML!
.innerHTML: thay đổi giá trị thẻ đã chỉ định
Thông qua phương thức innerHTML, ta đã ghi đè lên id chỉ định và gán giá trị thay đổi dữ liệu của thẻ. InnerHTML vừa chèn, vừa lấy dữ liệu trên đoạn code HTML mình muốn, nhưng nó cũng tràn đầy nguy cơ bảo mật, nên hạn chế sử dụng hoặc dùng textContent thay thế (chỉ đơn giản là chèn text).
Mở rộng thêm một xíu, khi bạn muốn trả về phần tử đầu tiên trong tất cả kết quả tìm thấy ở CSS selector đã cho, thì phương thức querySelector() là sự lựa chọn dành cho bạn.
querySelector()
Trả về phần tử đầu sau tất cả 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 thức 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 các ví dụ đơn giản của mình sẽ giúp mọi người hiểu đôi nét về các phương thức này. Cảm ơn mọi người đã đọc đến đây.
Huyền Nguyễn
PLT SOLUTIONS.