Trong hướng dẫn tự học JavaScript này, bạn sẽ tìm hiểu cách thao tác thêm / Xóa các phần tử trong JavaScript. (Hay còn gọi là thao tác với DOM)

Cách thêm / Xóa phần tử thông qua JS DOM

Thao tác các phần tử DOM trong JavaScript

Bây giờ, qua 4 bài học trước bạn đã học cách chọn và định kiểu các thành phần HTML DOM, cách chọn đến phần tử DOM cũng như cách get / set thuộc tính cho nó.

Trong chương này, chúng ta sẽ tìm hiểu cách thêm hoặc loại bỏ các phần tử DOM một cách linh hoạt hoặc lấy nội dung của chúng.

Bởi vì khi lập trình web thực tế chúng ta sẽ thường xuyên cần tạo ra các bố cục động, khi thì thêm khối này, khi thì loại bỏ khối nọ.

> Nếu bạn muốn trở thành một lập trình viên phát triển website "XỊN SÒ" thì xem ngay KHÓA HỌC LẬP TRÌNH (Full Stack)

Hãy tiếp tục đọc bên dưới đây để biết cách làm thế nào nhé.

Thêm phần tử mới vào trong DOM

Bạn có thể tạo phần tử mới trong tài liệu HTML một cách dễ dàng thông qua phương thức document.createEuity().

Phương thức này tạo ra một phần tử mới, nhưng nó không thêm ngay nó vào DOM.

Bạn sẽ phải tự thêm nó vào DOM bằng một bước riêng biệt, như trong ví dụ sau:

HTML:

    
Xin chào
    
Đây là ví dụ thao tác với DOM.

JavaScript:

Phương thức appendChild() thêm phần tử mới vào cuối của bất kỳ phần tử con nào khác của nút cha được chỉ định.

Tuy nhiên, nếu bạn muốn thêm phần tử mới vào đầu của bất kỳ phần tử nào khác, bạn có thể sử dụng phương thức insertBefore(), như trong ví dụ dưới đây:

JavaScript:

Get và Set nội dung HTML trong DOM

Bạn cũng có thể dễ dàng lấy (get) hoặc thiết lập (set) nội dung của các thành phần HTML với thuộc tính innerHTML.

Thuộc tính này set hoặc get nội dung bên trong thẻ HTML (Bên trong thẻ mở và thẻ đóng của nó)

Hãy xem ví dụ sau để xem nó hoạt động như thế nào:

HTML:

    
Xin chào!
    
Đây là ví dụ thao tác với DOM.

JavaScript:

Như bạn có thể thấy, bạn có thể dễ dàng chèn các phần tử mới vào DOM bằng cách sử dụng thuộc tính innerHTML.

Nhưng có một vấn đề... thuộc tính innerHTML thay thế tất cả nội dung hiện có của một phần tử.

Vì vậy, nếu bạn muốn chèn HTML vào tài liệu mà không thay thế nội dung hiện có của một phần tử, bạn có thể sử dụng phương thức insertAdjacentHTML().

Phương pháp này chấp nhận hai tham số:

    + Tham số đầu tiên: Vị trí cần chèn (nó phải là 

    + Tham số thứ hai: Văn bản HTML cần chèn.

Ví dụ sau đây sẽ minh họa cách phương thức trên hoạt động như thế nào:

HTML (Chú ý những chỗ chú thích, đó là vị trí cần chèn):

    
    
Xin chào bro!
    

JavaScript:

Lưu ý: Vị trí beforebegin và afterend chỉ hoạt động nếu node nằm trong cây DOM và có phần tử cha. Ngoài ra, khi chèn HTML vào một trang, hãy cẩn thận không sử dụng đầu vào của người dùng chưa được kiểm tra, để tránh các cuộc tấn công XSS.

Loại bỏ các phần tử hiện có khỏi DOM

Tương tự, bạn có thể sử dụng phương thức removeChild() để xóa một node con khỏi DOM.

Phương thức này cũng trả về node bị loại bỏ. Đây là một ví dụ:

HTML:

    
Xin chào!
    
Ví dụ loại bỏ phần tử khỏi DOM.

JavaScript:

Bạn cũng có thể loại bỏ phần tử con mà không biết chính xác phần tử cha.

Chỉ cần tìm phần tử con và sử dụng thuộc tính parentNode để tìm phần tử cha của nó.

Thuộc tính này trả về cha của node được chỉ định trong cây DOM. Đây là một ví dụ:

HTML:

    
Xin chào!
    
Ví dụ loại bỏ phần tử khỏi DOM.

JavaScript:

Thay thế các phần tử hiện có trong DOM

Bạn cũng có thể thay thế một phần tử trong HTML DOM bằng một phần tử khác bằng phương thức replaceChild().

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.

Nội dung chính

• Video – DOM – Xử lý các phần tử HTML trong Javascript
• Hướng dẫn chi tiết
  • DOM là gì?
    • Các thuộc tính của nút phần tử element
    • Các phương thức xử lý các nút phần tử
  • Truy xuất các phần tử
    • Truy xuất và lấy giá trị, thuộc tính
    • Thêm xóa hoặc thay thế phần tử
    • Truy xuất và thay đổi thuộc tính CSS của phần tử, thẻ html

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

Hướng dẫn chi tiết

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

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).

Nút gốc: chính là tài liệu HTML, thường được biểu diễn bởi thẻ <html>.

Bài viết cùng chủ đề

Bài 4: Tạo hiệu ứng collapse và accordion bằng…

Bài 3: Ẩn hiện nội dung bằng jQuery

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

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ẻ <title>, tên đề mục trong thẻ <h1>, hay một đoạn văn trong thẻ <p>.

Ngoài ra còn có nút thuộc tính (attribute node) và nút chú thích (comment node).

Các thuộc tính của nút phần tử element

Các phương thức xử lý các nút phần tử

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é:

<input type="text" id="input_1" value="1" gia_tri="2">
<div class="mt-3" id="kq_input_1">ABC</div>

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

<script type="text/javascript">
var input_1 = document.getElementById("input_1")
var value_input_1 = input_1.value
console.log(value_input_1)
var gia_tri_input_1 = input_1.getAttribute("gia_tri")
console.log(gia_tri_input_1)
var div_input_1 = document.getElementById("kq_input_1")
div_input_1.innerHTML = value_input_1
</script>

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

<button class="btn btn-outline-danger" onclick="readOnly()">Set Read only</button>
<script type="text/javascript">
function readOnly() {
   var input_1 = document.getElementById("input_1")
   input_1.setAttribute("readonly", true)
}
</script>

+ Dùng sự kiện onclick để 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

<div id="them_vao_day"></div>

Thêm thẻ h1

<script type="text/javascript">
var them_vao_day = document.getElementById("them_vao_day")
var h1 = document.createElement("h1")
h1.innerHTML = "Thẻ h1 vừa thêm vào"
them_vao_day.appendChild(h1)
</script>

+ 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:

<div id="div_css" style="margin: 50px; width: 100px; height: 50px; background-color: red"></div>

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.

<script type="text/javascript">
var div_css = document.getElementById("div_css")
var css = div_css.style.margin
console.log(css)
div_css.style.backgroundColor = "blue"
</script>

+ 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é.

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.