Thao tác DOM với JavaScript

DOM (Document Object Model) là cách JavaScript tương tác với HTML và CSS. Hiểu DOM là bước đầu để làm web interactive!

1. Selecting Elements

Các cách để chọn elements trong DOM:

// getElementById
const header = document.getElementById('header');

// getElementsByClassName - trả về HTMLCollection
const buttons = document.getElementsByClassName('btn');

// getElementsByTagName
const paragraphs = document.getElementsByTagName('p');

// querySelector - lấy phần tử đầu tiên
const firstButton = document.querySelector('.btn');
const mainDiv = document.querySelector('#main');

// querySelectorAll - lấy tất cả, trả về NodeList
const allButtons = document.querySelectorAll('.btn');
const inputs = document.querySelectorAll('input[type="text"]');

// Với querySelectorAll, có thể dùng forEach
allButtons.forEach(button => {
    console.log(button);
});

2. Manipulating Content

Thay đổi nội dung của elements:

const element = document.querySelector('#myDiv');

// textContent - chỉ text, không parse HTML
element.textContent = 'Hello World';

// innerHTML - parse HTML
element.innerHTML = '<strong>Bold Text</strong>';

// innerText - giống textContent nhưng tôn trọng CSS styling
element.innerText = 'Visible Text';

// Lấy giá trị input
const input = document.querySelector('#username');
const value = input.value;
input.value = 'New Value';

3. Modifying Attributes

Thay đổi attributes của elements:

const link = document.querySelector('a');

// getAttribute / setAttribute
const href = link.getAttribute('href');
link.setAttribute('href', 'https://example.com');

// Trực tiếp
link.href = 'https://example.com';
link.target = '_blank';

// Data attributes
const div = document.querySelector('#myDiv');
div.dataset.userId = '123';
div.dataset.userName = 'Huy';

// Access: <div data-user-id="123" data-user-name="Huy">
console.log(div.dataset.userId); // '123'

// Class manipulation
const element = document.querySelector('.box');
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('highlight');
element.classList.contains('active'); // true/false

// Replace class
element.classList.replace('old-class', 'new-class');

4. Styling Elements

Thay đổi CSS styles:

const box = document.querySelector('.box');

// Inline styles
box.style.color = 'red';
box.style.backgroundColor = 'blue';
box.style.fontSize = '20px';
box.style.display = 'none';

// Multiple styles
Object.assign(box.style, {
    color: 'white',
    backgroundColor: 'black',
    padding: '20px',
    borderRadius: '10px'
});

// Get computed styles
const styles = window.getComputedStyle(box);
console.log(styles.color);
console.log(styles.fontSize);

5. Creating and Adding Elements

Tạo và thêm elements mới:

// createElement
const newDiv = document.createElement('div');
newDiv.textContent = 'New Element';
newDiv.classList.add('box');

// Thêm vào DOM
const container = document.querySelector('#container');
container.appendChild(newDiv); // Thêm vào cuối
container.prepend(newDiv); // Thêm vào đầu

// insertBefore
const reference = document.querySelector('.existing');
container.insertBefore(newDiv, reference);

// insertAdjacentHTML
element.insertAdjacentHTML('beforebegin', '<p>Before</p>');
element.insertAdjacentHTML('afterbegin', '<p>Start</p>');
element.insertAdjacentHTML('beforeend', '<p>End</p>');
element.insertAdjacentHTML('afterend', '<p>After</p>');

// Clone element
const clone = newDiv.cloneNode(true); // true = deep clone

6. Removing Elements

Xóa elements khỏi DOM:

const element = document.querySelector('.to-remove');

// Modern way
element.remove();

// Old way
element.parentNode.removeChild(element);

// Remove all children
const parent = document.querySelector('#parent');
parent.innerHTML = '';

// Or
while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
}

7. Event Handling

Lắng nghe và xử lý events:

const button = document.querySelector('#myButton');

// addEventListener
button.addEventListener('click', function(e) {
    console.log('Button clicked!');
    console.log(e.target); // Element được click
});

// Arrow function
button.addEventListener('click', (e) => {
    e.preventDefault(); // Ngăn hành động mặc định
    console.log('Clicked!');
});

// Remove event listener
function handleClick() {
    console.log('Clicked');
}
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

// Event delegation
document.querySelector('#list').addEventListener('click', (e) => {
    if (e.target.tagName === 'LI') {
        console.log('List item clicked:', e.target.textContent);
    }
});

// Common events
element.addEventListener('mouseenter', handler);
element.addEventListener('mouseleave', handler);
input.addEventListener('input', handler);
input.addEventListener('change', handler);
form.addEventListener('submit', handler);
window.addEventListener('scroll', handler);
window.addEventListener('resize', handler);

8. Traversing the DOM

Di chuyển qua DOM tree:

const element = document.querySelector('.current');

// Parent
const parent = element.parentElement;
const parentNode = element.parentNode;

// Children
const children = element.children; // HTMLCollection
const firstChild = element.firstElementChild;
const lastChild = element.lastElementChild;

// Siblings
const nextSibling = element.nextElementSibling;
const prevSibling = element.previousElementSibling;

// Find closest parent matching selector
const card = element.closest('.card');

// Check if element matches selector
element.matches('.active'); // true/false

9. Practical Example

Ví dụ thực tế - Todo List:

// HTML: <input id="todoInput"> <button id="addBtn">Add</button> <ul id="todoList"></ul>

const input = document.querySelector('#todoInput');
const addBtn = document.querySelector('#addBtn');
const list = document.querySelector('#todoList');

addBtn.addEventListener('click', () => {
    const text = input.value.trim();
    if (!text) return;
    
    // Tạo li element
    const li = document.createElement('li');
    li.textContent = text;
    
    // Tạo delete button
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.addEventListener('click', () => {
        li.remove();
    });
    
    // Thêm vào DOM
    li.appendChild(deleteBtn);
    list.appendChild(li);
    
    // Clear input
    input.value = '';
});

Kết luận

DOM manipulation là kỹ năng cốt lõi trong JavaScript:

• querySelector/querySelectorAll để select elements
• textContent/innerHTML để thay đổi nội dung
• classList để quản lý classes
• addEventListener để xử lý events
• createElement/appendChild để tạo elements

Thực hành nhiều với các project nhỏ để thành thạo!