Cơ bản với Javascript DOM

DOM là tên gọi tắt của (Document Object Model – tạm dịch Mô hình Đối tượng Tài liệu), là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dịch (scripting language) như Javascript, PHP, Python.

Ở bài này mình sẽ chia sẻ cho các bạn mỗi số thao tác cơ bản với Javascript DOM. Nó bao gồm những thứ căn bản như khởi tạo, thêm vào, xóa đi, thay đổi.... Tất cả đều được lấy từ nguồn tài liệu của trang Mozilla Developer Network(MDN)

1) Cách Chọn Element DOM

1.1) Chọn bằng ID

element = document.getElementById(id);

1.2) Chọn bằng Class

elements = document.getElementsByClassName(names); // or:
elements = rootElement.getElementsByClassName(names);

1.3) Chọn bằng Tag

var elements = document.getElementsByTagName(name);

1.4) Chọn thành phần đầu tiên

element = document.querySelector(selectors);
var el = document.querySelector(".myclass");

1.5) Chọn 1 mảng thành phần

elementList = document.querySelectorAll(selectors);
var matches = document.querySelectorAll("div.note, div.alert");

2) Tạo DOM Element (MDN Reference)

var element = document.createElement(tagName);

• element : Tạo 1 object .
• tagName : Đây là các thẻ trong html .

3) Thêm Hoặc Tạo 1 Thành Phần Đến DOM

Thêm 1 thành phần vào cuối dãy hoặc 1 ví trị đặc biệt vào dom. Nếu thành phần đã tồn tại thì nó sẽ xóa bỏ và thêm mới.

var child = element.appendChild(child);

• element : Thành phần cha ta định thêm node mới vào.
• child : Thành phần con ta định thêm vào.

4) Styling 1 Thành Phần Trong Html

Chúng ta hoàn toàn có thể sử dụng để styling một thành phần trong HTML bằng cách chọn thành phần đó và dùng code dưới đây

element.style.color = "#ff3300";
element.style.marginTop = "30px";
element.style.paddingBottom = "30px";

• element : Thành phần chúng ta định style lại.

5) Lấy nội dung hoặc thay đổi nội dung trong HTML

// lấy nội dung của element
var content = element.innerHTML;
// thêm nội dung vào ortherElement
otherElement.innterHTML = content;

• element : Thành phần chúng ta lấy nội dung
• otherElement : Thành phần chúng ta thêm mới hoặc thay đổi nội dung

Nguồn