Hướng dẫn dùng elementlist JavaScript
Show Đã đăng vào thg 4 6, 2017 6:41 SA 2 phút đọc 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 DOM1.1) Chọn bằng IDelement = document.getElementById(id); 1.2) Chọn bằng Classelements = document.getElementsByClassName(names); // or: elements = rootElement.getElementsByClassName(names);1.3) Chọn bằng Tagvar elements = document.getElementsByTagName(name); 1.4) Chọn thành phần đầu tiênelement = document.querySelector(selectors); var el = document.querySelector(".myclass");1.5) Chọn 1 mảng thành phầnelementList = document.querySelectorAll(selectors); var matches = document.querySelectorAll("div.note, div.alert");2) Tạo DOM Element (MDN Reference)var element = document.createElement(tagName);
3) Thêm Hoặc Tạo 1 Thành Phần Đến DOMThê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);
4) Styling 1 Thành Phần Trong HtmlChú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";
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;
Nguồn All rights reserved |