Khái niệm

Giao tiếp với HTML (HTML Communication) là một phần quan trọng để thay đổi nội dung và thuộc tính của các thành phần trên trang web. JavaScript cung cấp các phương pháp và API để truy cập và thao tác với các thành phần HTML như thẻ, lớp, hoặc ID.

Truy cập Thành Phần HTML

Để truy cập một thành phần HTML trong JavaScript, chúng ta có thể sử dụng các phương thức như getElementById(), getElementsByClassName(), getElementsByTagName(), hoặc querySelector().

document.getElementById('idCuaThanhPhan');
document.getElementsByClassName('lopCuaThanhPhan');
document.getElementsByTagName('tenThe');
document.querySelector('selectorCSS');

Dưới đây là một ví dụ về việc truy cập một thành phần HTML:

let myElement = document.getElementById('myElement');

Trong ví dụ trên, chúng ta đã sử dụng phương thức getElementById() để lấy một thành phần HTML với ID là 'myElement'. Kết quả là chúng ta nhận được một đối tượng đại diện cho thành phần đó.

Thay Đổi Nội Dung và Thuộc Tính HTML

Sau khi truy cập thành phần HTML, chúng ta có thể thay đổi nội dung và thuộc tính của nó.

innerHTML: Thuộc tính này cho phép bạn đọc hoặc thay đổi nội dung HTML bên trong một thành phần.

let myElement = document.getElementById('myElement');
myElement.innerHTML = 'Nội dung mới';

innerText hoặc textContent: Thuộc tính này cho phép bạn đọc hoặc thay đổi nội dung văn bản bên trong một thành phần.

let myElement = document.getElementById('myElement');
myElement.innerText = 'Văn bản mới';

setAttribute(): Phương thức này cho phép bạn thay đổi giá trị của một thuộc tính trong một thành phần.

let myElement = document.getElementById('myElement');
myElement.setAttribute('class', 'newClass');

style: Thuộc tính này cho phép bạn thay đổi các thuộc tính CSS của một thành phần.

let myElement = document.getElementById('myElement');
myElement.style.color = 'red';
myElement.style.fontSize = '20px';

Ví dụ với Code

Dưới đây là một số ví dụ về việc giao tiếp với HTML trong JavaScript:

// Truy cập thành phần HTML
let myElement = document.getElementById('myElement');

// Thay đổi nội dung HTML
myElement.innerHTML = 'Nội dung mới';

// Thay đổi nội dung văn bản
myElement.innerText = 'Văn bản mới';

// Thay đổi thuộc tính
myElement.setAttribute('class', 'newClass');

// Thay đổi các thuộc tính CSS
myElement.style.color = 'red';
myElement.style.fontSize = '20px';