Trong bài này, chúng ta sẽ tìm hiểu một phần rất quan trọng là DOM – xử lý các phần tử HTML trong Javascript. Qua bài học này, chúng ta sẽ biết các truy xuất, lấy dữ liệu, các thuộc tính từ các thẻ html, cũng như cách thêm, xóa các thẻ html.
Đang xem: Lấy giá trị từ input trong javascript
Video – DOM – Xử lý các phần tử HTML trong Javascript
Hướng dẫn chi tiết
DOM là gì?
DOM là tên gọi tắt của [Document Object Model – tạm dịch Mô hình Đối tượng Tài liệu], là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dịch [scripting language] như Javascript, PHP, Python. Trong phạm vi bài học này, mình sẽ dùng ngôn ngữ Javascript và HTML DOM
Đối với HTML DOM, mọi thành phần đều được xem là 1 nút [node], được biểu diễn trên 1 cây cấu trúc dạng cây gọi là DOM Tree. Các phần tử khác nhau sẽ được phân loại nút khác nhau nhưng quan trọng nhất là 3 loại: nút gốc [document node], nút phần tử [element node], nút văn bản [text node].
DOM – Xử lý các phần tử HTML trong Javascript
Nút gốc: chính là tài liệu HTML, thường được biểu diễn bởi thẻ .
Nút phần tử: biểu diễn cho 1 phần tử HTML.
Nút văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là 1 nút văn bản. Đó có thể là tên trang web trong thẻ , tên đề mục trong thẻ , hay một đoạn văn trong thẻ .
Ngoài ra còn có nút thuộc tính [attribute node] và nút chú thích [comment node].
Mong các bạn dành vài giây cho QUẢNG CÁONói chung đây là một quảng cáo về Hosting Azdigi để Góc Làm Web sẽ có một ít tiền để duy trìMình đang sử dụng và thấy nó nhanh, rẻ và dễ sử dụng. Các bạn dùng thử nhé.Link đăng ký: //my.azdigi.com/aff.php?aff=1612Các thuộc tính của nút phần tử element
| Thuộc tính | Ý nghĩa |
| id | Định danh – là duy nhất cho mỗi phần tử nên thường được dùng để truy xuất DOM trực tiếp và nhanh chóng. |
| className | Tên lớp – Cũng dùng để truy xuất trực tiếp như id, nhưng 1 className có thể dùng cho nhiều phần tử. |
| tagName | Tên thẻ HTML. |
| innerHTML | Trả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các nút phần tử và nút văn bản. |
| outerHTML | Trả về mã HTML của phần tử hiện tại. Nói cách khác, outerHTML = tagName + innerHTML. |
| textContent | Trả về 1 chuỗi kí tự chứa nội dung của tất cả nút văn bản bên trong phần tử hiện tại. |
| attributes | Tập các thuộc tính như id, name, class, href, title… |
| style | Tập các thiết lập định dạng của phần tử hiện tại. |
| value | Lấy giá trị của thành phần được chọn thành một biến. |
Các phương thức xử lý các nút phần tử
| Phương thức | Ý nghĩa |
| getElementById[id] | Tham chiếu đến 1 nút duy nhất có thuộc tính id giống với id cần tìm. |
| getElementsByTagName[tagname] | Tham chiếu đến tất cả các nút có thuộc tính tagName giống với tên thẻ cần tìm, hay hiểu đơn giản hơn là tìm tất cả các phần tử DOM mang thẻ HTML cùng loại. Nếu muốn truy xuất đến toàn bộ thẻ trong tài liệu HTML thì hãy sử dụng document.getElementsByTagName[‘*’]. |
| getElementsByName[name] | Tham chiếu đến tất cả các nút có thuộc tính name cần tìm. |
| getAttribute[attributeName] | Lấy giá trị của thuộc tính.
Xem thêm: Top 12 Cung Hoàng Đạo Ai Học Giỏi Nhất ? 12 Cung Hoàng Đạo Giỏi Môn Nào Nhất |
| setAttribute[attributeName, value] | Sửa giá trị của thuộc tính. |
| appendChild[node] | Thêm 1 nút con vào nút hiện tại. |
| removeChild[node] | Xóa 1 nút con khỏi nút hiện tại. |
Truy xuất các phần tử
Có 2 phương pháp truy xuất các phần tử trong DOM là truy xuất gián tiếp [dựa theo vị trí của phần tử so với nút gốc để truy xuất], và truy xuất trực tiếp [dựa theo các định danh như id, class, tag name … để truy xuất].
Mình sẽ dùng phương pháp trực tiếp, vì nó chính xác vì dễ dàng hơn.
Truy xuất và lấy giá trị, thuộc tính
Muốn lấy giá trị, chúng ta phải xác định được phần tử html. Các bạn xem ví dụ sau nhé:
Chúng ta sẽ lấy value và thuộc tính tự định nghĩa là gia_tri của input và xuất ra div bên dưới
Hướng dẫn:
+ Dùng phương thức getElementById[“input_1”] để xác định phần tử cần xử lý
+ Lấy dữ liệu của thuộc tính value bằng cách truy xuất thuộc tính value của phần tử
+ Lấy dữ liệu của thuộc tính tự định nghĩa gia_tri bằng phương thức getAttribute[“gia_tri]
+ Lấy dữ liệu trong phần tử khối div bằng cách truy xuất thuộc tính innerHTML. Ngược lại, để gán giá trị bên trong khối div bằng cách gán thuộc tính innerHTML.
Thêm thuộc tính cho phần tử
Vẫn với đoạn code bên trên, chúng ta sẽ thêm thuộc tính readonly cho input
Set Read only+ Dùng sự kiện title để chạy hàm js. Về phần sự kiện – event, mình sẽ nói rõ trong bài học sau.
+ Sử dụng phương thức getElementById[] để xác định phần tử.
+ Sử dụng phương thức setAttribute[“tên thuộc tính”, gái trị] để thêm thuộc tính.
Thêm xóa hoặc thay thế phần tử
Chúng ta sẽ thêm một phần tử vào bên trong một phần tử khác trong ví dụ sau:
Khối sẽ được thêm phần tử vào bên trong
Thêm thẻ h1
+ Xác định phần tử sẽ thêm vào bằng phương thức getElementById[]
+ Khởi tạo phần tử con được thêm vào bằng phương thức createElement[]
+ Thêm giá trị cho phần tử bằng cách gán thuộc tính innerHTML.
+ Dùng phương thức appendChild[] để thêm phần tử được khởi tạo.
Truy xuất và thay đổi thuộc tính CSS của phần tử, thẻ html
Chúng ta có khối div màu xanh như sau:
Chúng ta sẽ truy xuất là xem thuộc tính css là margin, và chỉnh sửa đổi màu cho khối này.
+ Xác định phần từ.
+ Truy xuất thuộc tính css của khối div bằng cách truy xuất thuộc tính style của phần tử vừa xác định.
+ Thay đổi thuộc tính background-color bằng cách gán lại thuộc tính style.backgroundColor cho phần tử.
Lưu ý: Các thuộc tính css như background-color, margin-top … sẽ được viết lại bằng cách bỏ dấu gạch ngang và viết hoa chữ cái đầu mỗi từ [ trừ từ đầu tiên].
Đó là tất cả nội dung của bài học. Các bạn xem video nếu cần hướng dẫn chi tiết nhé.
Xem thêm: Hướng Dẫn Hack Mật Khẩu Wifi Bằng Phần Mềm Jumpstart Mới Nhất
Code mẫu: Download
Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Hướng dẫn cách lấy dữ liệu trong textbox JavaScript. Textbox là một loại input và bạn sẽ biết cách lấy giá trị của input textbox bằng thuộc tính value trong JavaScript sau bài học này.
Tạo textbox trong HTML
Để tạo textbox trong HTML, chúng ta sử dụng tới thẻ input có thuộc tính text như sau:
Chúng ta có thể chỉ định chiều rộng của textbox với thuộc tính size, hoặc giá trị ban đầu với thuộc tính value như sau:
Chúng ta cũng có thể sử dụng kèm thẻ label để hiển thị dòng ký tự phía trước textbox như sau:
Để lấy dữ liệu trong input textbox JavaScript, chúng ta sử dụng tới thuộc tính value của HTMLInputElement Object, là đối tượng đại diên cho input Element với cú pháp sau đây:
Trong đó element là Element chỉ đến textbox được lấy từ trong DOM thông qua một số phương thức, ví dụ như getelementbyid chẳng hạn.
Ví dụ, để lấy dữ liệu trong textbox có id = mytext, chúng ta viết như sau:
| let element = document.getElementById['mytext']; console.log[element.value]; ``` Ngoài ra, chúng ta cũng có thể **gán giá trị cho thẻ input textbox trong Javascript** sau khi lấy Element chỉ đến textbox đó như sau: ```javascript let element = document.getElementById['mytext']; element.value = 'Tạm biệt'; |
Sau đây hãy cùng xem demo lấy dữ liệu trong textbox JavaScript với mã HTML dưới đây:
Sample Sample Họ tên: function butonClick[]{ msg.innerText = 'Xin chào bạn ' + nameText.value; } function changeClick[]{ nameText.value = 'Suzuki'; } let nameText = document.getElementById['nameText']; let msg = document.getElementById['msg']; let checkButton = document.getElementById['checkButton']; checkButton.addEventListener['click', butonClick]; let changeButton = document.getElementById['changeButton']; changeButton.addEventListener['click', changeClick]; |
Với mã lệnh này, chúng ta đã tạo ra một textbox để nhập dữ liệu, một nút check để lấy dữ liệu đã nhập trong textbox, và một nút change để thay đổi giá trị trong textbox.
Bạn có thể nhập dữ liệu vào textbox, sau đó lấy dữ liệu đã nhập trong textbox bằng cách click vào nút check như sau:
Bạn cũng có thể thay đổi giá trị trong textbox bằng cách click vào nút Change như sau:
Bắt sự kiện textbox trong JavaScript
Khi chúng ta nhập ký tự vào trong textbox, sự kiện input sẽ xảy ra. Và sau sau khi nhập dữ liệu vào textbox, nếu chúng ta nhấn Enter hoặc Tab để chuyển focus rời khỏi textbox, sự kiện change sẽ xảy ra.
Do vậy, chúng ta có thể bắt 2 sự kiện này để xử lý textbox.
Ví dụ với sự kiện change:
| Họ tên： function inputChange[]{ } let nameText = document.getElementById['nameText']; nameText.addEventListener['change', inputChange]; |
Hoặc với sự kiện input:
| Họ tên： function inputChange[]{ } let nameText = document.getElementById['nameText']; nameText.addEventListener['input', inputChange]; |
Tổng kết
Trên đây Kiyoshi đã hướng dẫn bạn cách lấy dữ liệu trong textbox JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.
Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.