DOM Element

Chúng ta thường tương tác với các element node của DOM tree thông qua các đối tượng thuộc lớp HTMLElement.

• Để lấy ra một element: Get a DOM Element
• Để tạo một element: Create a DOM Element

CSS Properties

Trong số các thuộc tính của một đối tương thuộc lớp HTMLElement, tồn tại một thuộc tính có tên là style. Thuộc tính này là một object lưu các thuộc tính CSS của element node đó.

• Chú ý rằng thuộc tính style chỉ tác động đến CSS inline, không dùng để set hay get CSS external.
• Tên các thuộc tính của đối tượng style này hơi khác so với các thuộc tính CSS thông thường vì nó tuân theo camelCase và không có dấu gạch ngang.

Info

Nếu giá trị gán cho các thuộc tính của style là một số, nó sẽ tự thêm px và chuyển đổi thành chuỗi. Chẳng hạn nếu ta set thuộc tính width của style là 10, thuộc tính này sẽ tự hiểu giá trị mà nó được set là '10px'.

Class List

Lớp đối tượng Element (là lớp cha của HTMLElement) có thuộc tính classList giúp chúng ta quản lý được các class của một element.

Thuộc tính này là một đối tượng có các phương thức sau:

• Phương thức add dùng để thêm một hoặc nhiều class vào element thông qua đối tượng classList. Cú pháp là element.add("className1", "className2", ...).
• Phương thức contains dùng để kiểm tra một class name có tồn tại trong element hay không. Cú pháp là element.contains("className1", "className2", ...). Giá trị trả về là JS Booleans.
• Phương thức remove nhận đối số là các class name dùng để xóa các class ra khỏi element.
• Phương thức toggle sẽ thêm class vào element nếu class đó chưa tồn tại trong element. Ngược lại, nếu đã tồn tại rồi thì nó sẽ xóa. Phương thức này cũng nhận đối số là các class name.