Thao tác JS DOM
Trong hướng dẫn này, bạn sẽ học cách thao tác các phần tử trong JavaScript.
Bây giờ bạn đã học cách chọn và tạo kiểu cho các phần tử HTML DOM. Trong chương này, chúng ta sẽ tìm hiểu cách thêm hoặc xóa các phần tử DOM một cách linh hoạt, lấy nội dung của chúng, v.v.
Thêm các phần tử mới vào DOM
Bạn có thể tạo phần tử mới trong tài liệu HTML một cách rõ ràng bằng cách sử dụng hàm document.createElement(). Hàm này tạo ra một phần tử mới nhưng không thêm nó vào DOM; bạn sẽ phải thực hiện việc đó trong một bước riêng biệt, như trong ví dụ sau:
Ví dụ
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// Creating a new div element
let newDiv = document.createElement("div");
// Creating a text node
let newContent = document.createTextNode("Hi, how are you doing?");
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
// Adding the newly created element and its content into the DOM
let currentDiv = document.getElementById("main");
document.body.appendChild(newDiv, currentDiv);
</script>Hàm appendChild() thêm phần tử mới vào cuối 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 bất kỳ phần tử con nào khác, bạn có thể sử dụng hàm insertBefore(), như trong ví dụ bên dưới:
Ví dụ
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// Creating a new div element
let newDiv = document.createElement("div");
// Creating a text node
let newContent = document.createTextNode("Hi, how are you doing?");
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
// Adding the newly created element and its content into the DOM
let currentDiv = document.getElementById("main");
document.body.insertBefore(newDiv, currentDiv);
</script>Nhận hoặc đặt nội dung HTML thành DOM
Bạn cũng có thể dễ dàng lấy hoặc đặt nội dung của các thành phần HTML bằng thuộc tính innerHTML. Thuộc tính này đặt hoặc nhận đánh dấu HTML có trong phần tử, tức là nội dung giữa thẻ mở và thẻ đóng của nó. Hãy xem ví dụ sau để biết nó hoạt động như thế nào:
Ví dụ
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// Getting inner HTML conents
let contents = document.getElementById("main").innerHTML;
alert(contents); // Outputs inner html contents
// Setting inner HTML contents
let mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";
</script>Như bạn có thể thấy bạn có thể chèn các phần tử mới vào DOM bằng thuộc tính innerHTML dễ dàng như thế nào, nhưng có một vấn đề, thuộc tính innerHTML này sẽ 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 hàm insertAdjacentHTML() này.
Hàm này chấp nhận hai tham số: vị trí cần chèn và văn bản HTML cần chèn. Vị trí phải là một trong các giá trị sau: "beforebegin", "afterbegin", "beforeend"và "afterend". Hàm này được hỗ trợ trong tất cả các trình duyệt chính.
Ví dụ sau đây hiển thị trực quan tên vị trí và cách thức hoạt động.
Ví dụ
<!-- beforebegin -->
<div id="main">
<!-- afterbegin -->
<h1 id="title">Hello World!</h1>
<!-- beforeend -->
</div>
<!-- afterend -->
<script>
// Selecting target element
let mainDiv = document.getElementById("main");
// Inserting HTML just before the element itself, as a previous sibling
mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph one.</p>');
// Inserting HTML just inside the element, before its first child
mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph two.</p>');
// Inserting HTML just inside the element, after its last child
mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph three.</p>');
// Inserting HTML just after the element itself, as a next sibling
mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');
</script>Lưu ý: Vị trí beforebeginvà afterendchỉ hoạt động nếu nút 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 dữ liệu đầu vào của người dùng chưa được thoát để ngăn chặn các cuộc tấn công XSS