Lấy Giá Trị Của Input Trong Javascript

NEW Cách Lấy Giá Trị Từ Input Trong Javascript Mới Nhất 2020, Đọc Và Gán Giá Trị Cho Phần Tử Html Bằng Jquery
*

*
Duy Trương
NEW Cách Lấy Giá Trị Từ Input Trong Javascript Mới Nhất 2020, Đọc Và Gán Giá Trị Cho Phần Tử Html Bằng Jquery
Bạn đang xem: NEW Cách Lấy Giá Trị Từ Input Trong Javascript Mới Nhất 2020, Đọc Và Gán Giá Trị Cho Phần Tử Html Bằng Jquery Tại AZ Pet
Cách Lấy Giá Trị Từ Input Trong Javascript Mới Nhất 2020, Đọc Và Gán Giá Trị Cho Phần Tử Html Bằng Jquery

Cách Lấy Giá Trị Từ Input Trong Javascript Mới Nhất 2020, Đọc Và Gán Giá Trị Cho Phần Tử Html Bằng Jquery


Trong bài viết này, chúng ta sẽ tìm hiểu một phần rất quan trọng của DOM – việc xử lý các phần tử HTML trong JavaScript. Qua bài này chúng ta sẽ biết cách truy xuất, lấy dữ liệu, thuộc tính từ thẻ html cũng như cách thêm bớt thẻ html.

Bạn đang xem: Lấy giá trị của input trong javascript

Bạn đang xem: Nhận giá trị từ đầu vào trong javascript

Video – DOM – Quản lý các phần tử HTML trong JavaScript

Hướng dẫn chi tiết

DOM là gì?

DOM là chữ viết tắt của (DỄ DÀNGvẻ bề ngoài Osự vật Hoa Kỳodel – tạm dịch Mô hình Đối tượng Tài liệu), là một tiêu chuẩn được xác định bởi W3C để truy cập và thao tác với các tài liệu có cấu trúc HTML hoặc XML bằng cách sử dụng các ngôn ngữ kịch bản như Javascript, PHP và Python. Trong bài học này, tôi sẽ sử dụng Javascript và HTML DOM

Đối với HTML DOM, mỗi phần tử được coi là một nút, được biểu diễn trên một cấu trúc cây gọi là DOM Tree. Các phần tử khác nhau sẽ được phân loại khác nhau, nhưng quan trọng nhất là 3 loại: nút tài liệu, nút phần tử, nút văn bản.


*

DOM – Xử lý các phần tử HTML trong JavaScript

nút ban đầu: là chính tài liệu HTML, thường được đại diện bởi.

Nút mục: đại diện cho một phần tử HTML.

Nút văn bản: mỗi ký tự trong tài liệu HTML, bên trong thẻ HTML là một nút văn bản. Nó có thể là tên của trang web trong thẻ, tên của tiêu đề trong thẻ hoặc một đoạn trong thẻ.

Ngoài ra còn có nút thuộc tính (nút thuộc tính) và nút bình luận (nút bình luận).

Vui lòng dành vài giây để QUẢNG CÁONhìn chung đây là quảng cáo cho Hosting Azdigi nên các bạn quản trị web có chút kinh phí để duy trì, mình sử dụng thì thấy nhanh, rẻ và dễ sử dụng. Hãy thử nó. Link đăng ký: https://my.azdigi.com/aff.php?aff=1612thuộc tính nút .element

Tính chấtCó ý nghĩa
định danhĐịnh danh – là duy nhất cho mỗi phần tử, vì vậy nó thường được sử dụng để truy cập nhanh và trực tiếp vào DOM.
tên khóa họcClassName – Cũng được sử dụng để truy cập trực tiếp dưới dạng id, nhưng 1 className có thể được sử dụng cho nhiều mục.
tagNameTên thẻ HTML.
bên trongHTMLTrả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này là một chuỗi chứa tất cả các phần tử bên trong, bao gồm các nút phần tử và các nút văn bản.
bên ngoàiHTMLTrả về mã HTML của phần tử hiện tại. Nói cách khác, externalHTML = tagName + innerHTML.
textContentTrả về một chuỗi chứa nội dung của tất cả các nút văn bản trong phần tử hiện tại.
thuộc tínhTập hợp các thuộc tính như id, tên, lớp, href, tiêu đề …
Phong cáchTập hợp các thông số định dạng cho mục hiện tại.
giá trịLấy giá trị của mục đã chọn vào một biến.

Phương pháp quản lý nút yếu tố

Phương phápCó ý nghĩa
getElementById (id)Đề cập đến một nút duy nhất có thuộc tính id giống với id tìm kiếm.
getElementsByTagName (tên thẻ)Đề cập đến tất cả các nút có thuộc tính tagName giống với tên thẻ mong muốn hoặc đơn giản hơn, tìm tất cả các phần tử DOM có cùng một thẻ HTML. Nếu bạn muốn truy cập tất cả các thẻ trong tài liệu HTML, hãy sử dụng document.getElementsByTagName (‘*’).
getElementsByName (tên)Tham chiếu đến tất cả các nút có thuộc tính tên cần tìm.
getAttribute (tên thuộc tính)Nhận giá trị thuộc tính.
setAttribute (tên thuộc tính, giá trị)Sửa đổi giá trị thuộc tính.

Xem thêm: Bột Bánh Dẻo Làm Thế Nào ? Cách Làm Bánh Dẻo Trong 20 Phút Cách Làm Bột Bánh Dẻo Từ Bột Nếp

appendChild (nút)Thêm 1 nút con vào nút hiện tại.
removeChild (nút)Xóa 1 nút con của nút hiện tại.

Lấy các mục

Có hai phương pháp truy cập các phần tử trong DOM: truy cập gián tiếp (dựa trên vị trí của phần tử so với nút gốc cần truy cập) và truy cập trực tiếp (dựa trên các định danh như id, class, tag name … để lấy lại).

Tôi sẽ sử dụng phương pháp trực tiếp, bởi vì đó chính xác là vì nó dễ dàng hơn.

Nhận và truy xuất các giá trị, thuộc tính

Để nhận được giá trị, chúng ta cần thiết lập phần tử html. Vui lòng xem ví dụ sau:

Chúng tôi sẽ cầm giá trịgiá trị thuộc tính tự xác định Thuộc về vồ lấy và hiển thị div bên dưới

Hướng dẫn:

+ Sử dụng phương getElementById (“input_1”) để xác định phần tử được xử lý

+ Lấy dữ liệu từ thuộc tính giá trị bằng cách truy xuất thuộc tính giá trị của phần tử

+ Nhận dữ liệu từ giá trị thuộc tính tự xác định bằng cách getAttribute (“gia_tri)

Lấy dữ liệu trong phần tử khối div bằng cách truy cập thuộc tính innerHTML. Ngược lại, để gán một giá trị bên trong một khối div bằng cách gán thuộc tính innerHTML.

Thêm thuộc tính vào phần tử

Vẫn với đoạn mã trên, chúng tôi sẽ thêm thuộc tính chỉ đọc vào đầu vào

Đặt Chỉ đọc + Sử dụng sự kiện onclick để thực thi hàm js. Về sự kiện – event tôi sẽ nói rõ trong bài tiếp theo.

+ Sử dụng phương thức getElementById () để xác định phần tử.

+ Sử dụng phương setAttribute (“tên thuộc tính”, giá trị) để thêm thuộc tính.

Thêm xóa hoặc thay thế một phần tử

Chúng tôi sẽ thêm một phần tử bên trong một phần tử khác trong ví dụ sau:

Khối sẽ có một phần tử được thêm vào bên trong

Thêm thẻ h1.

+ Xác định phần tử cần thêm bằng phương thức getElementById ()

+ Khởi tạo phần tử con được thêm vào với phương thức createElement ()

+ Thêm giá trị cho phần tử bằng cách gán thuộc tính innerHTML.

+ Cách sử dụng phương thức appendChild () để thêm một phần tử đã khởi tạo.

Truy xuất và sửa đổi thuộc tính CSS của phần tử, thẻ html.

Chúng tôi có một khối div màu xanh như thế này:

Chúng ta sẽ truy cập và hiển thị thuộc tính css dưới dạng lề và thay đổi màu của khối này.

+ Nhận biết bộ phận của từ.

+ Lấy thuộc tính css của khối div bằng cách lấy thuộc tính style của phần tử được chỉ định.

+ Thay đổi thuộc tính màu nền thành 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ởi loại bỏ dấu gạch ngangviết hoa chữ cái đầu tiên của mỗi từ (trừ từ đầu tiên).

Đây là tất cả nội dung của bài. Vui lòng xem video nếu bạn cần hướng dẫn chi tiết.

Mã mẫu: Tải về

Nếu bạn có bất kỳ câu hỏi nào, vui lòng hỏi bằng cách nhận xét bên dưới, bên trên E-mailhoặc nhắn tin qua Góc trang fanpage.