3.1 Tạo các element
Làm việc với DOM (Document Object Model) không chỉ bao gồm việc điều hướng qua các phần tử hiện có mà còn là việc tạo ra các phần tử mới, chèn vào tài liệu và xóa bỏ chúng. Bây giờ chúng ta sẽ xem xét các phương pháp và cách tiếp cận khác nhau để tạo và xóa các phần tử trong DOM.
Phương thức document.createElement()
Phương thức chính để tạo một phần tử mới trong DOM là document.createElement(). Phương thức này nhận tên thẻ của phần tử cần tạo và trả về một phần tử trống mới.
Ví dụ:
const newDiv = document.createElement('div');
Thêm nội dung vào phần tử
Sau khi tạo một phần tử mới, bạn có thể điền nó với nội dung. Đó có thể là văn bản, các phần tử khác hoặc sự kết hợp của cả hai.
Ví dụ:
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
Bạn cũng có thể sử dụng thuộc tính innerHTML để thêm nội dung HTML.
Ví dụ:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>This is a new div element with bold text</strong>';
3.2 Chèn phần tử vào DOM
Phần tử được tạo ra cần được thêm vào tài liệu. Có một số phương pháp để chèn các phần tử vào DOM:
1. Phương thức appendChild()
Phương thức appendChild() thêm phần tử vào cuối danh sách các phần tử con của phần tử cha được chỉ định.
Ví dụ:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. Phương thức insertBefore()
Phương thức insertBefore() thêm một phần tử trước phần tử con được chỉ định của phần tử cha.
Ví dụ:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a old div element</div>
<p>This is a paragraph</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. Phương thức append()
Phương thức append() thêm một hoặc nhiều nút hoặc chuỗi vào cuối danh sách các phần tử con của phần tử cha được chỉ định.
Ví dụ:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.append(newDiv);
4. Phương thức prepend()
Phương thức prepend() thêm một hoặc nhiều nút hoặc chuỗi vào đầu danh sách các phần tử con của phần tử cha được chỉ định.
Ví dụ:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Sao chép các element
Phương thức cloneNode() cho phép sao chép một phần tử. Sao chép có thể sâu (sao chép tất cả phần tử con) hoặc nông (chỉ sao chép phần tử).
Ví dụ sao chép sâu:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
Ví dụ sao chép nông:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
Bản thân phần tử <div> đã được sao chép, điều này có thể thấy nhờ vào các style, nhưng các phần tử con (nút văn bản "This is a div element" và <ul>) không được sao chép.
3.4 Xóa bỏ các phần tử
1. Phương thức removeChild()
Phương thức removeChild() xóa một phần tử con khỏi phần tử cha.
Ví dụ:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. Phương thức remove()
Phương thức remove() xóa một phần tử trực tiếp từ DOM.
Ví dụ:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a div element</div>
<p>This is a paragraph</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. Làm sạch nội dung của phần tử
Phương thức innerHTML có thể được sử dụng để xóa toàn bộ nội dung của phần tử bằng cách gán cho nó một chuỗi rỗng.
Ví dụ:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. Xóa tất cả phần tử con
Để xóa tất cả phần tử con, bạn có thể sử dụng vòng lặp hoặc phương thức innerHTML.
Ví dụ với vòng lặp:
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
Ví dụ với innerHTML:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION