Chọn element
Nó trả về một HTMLElement object đầu tiên thỏa điều kiện CSS Selector, cái .vuilaptrinh
này gọi là CSS Selector.
Nói là đầu tiên vì nếu có dăm ba cái .vuilaptrinh
nó cũng chỉ trả về thằng đầu tiên
<p class="vuilaptrinh" />
<div class="vuilaptrinh" />
<a class="vuilaptrinh" />
Nó sẽ trả về một danh sách các element thỏa điều kiện CSS selector, ví dụ 3 thằng .vuilaptrinh
ở trên đều được chọn.
Chạy function trên các element đã chọn
“Sờ” được các element này rồi, thì chúng ta sẽ muốn làm tiếp cái gì đó, chứ không chỉ sờ cho vui, chúng ta phải loop qua toàn bộ element đã sờ được bằng vòng lặp .forEach
document.querySelectorAll('.vuilaptrinh').forEach(vui => { vui.style.display = "none" }
Tìm element con bên trong element cha đã chọn
Chúng ta gọi lại .querySelector
trên element cha thôi
var cha = document.querySelector('.vuilaptrinh')
cha.querySelector('.luckyluu')
Di chuyển qua các element kề cận
Hồi nhỏ học tiếng anh, cô dạy “brother”, “sister” là anh chị em, lớn lên xem Youtube mới biết, tụi nước ngoài nó dùng từ sibling để nói anh chị em, chứ ít khi dùng brother, sister. Javascript bê luôn nguyên chữ này vào để xài
<div class="bochungno">
<div class="anhtrai" />
<div class="vuilaptrinh" />
<div class="emgai" />
</div>
var box = document.querySelector('.vuilaptrinh') box.nextElementSibling; // emgai box.previousElementSibling; // anhtrai box.parentElement; // bochungno
Gắn sự kiện
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });
Dispatch event
Nếu cần bún ra một sự kiện bằng javascript một cách chủ động, ko đợi sự kiện tự xảy ra
document.dispatchEvent( new Event('myEvent') )
document.querySelector('.box').dispatchEvent(new Event('myEvent'))
Styling cho element
Cái này cần tra cứu và học một số thuộc tính hay xài, nguyên tắc chung là viết thuộc tính css theo kiểu camelCase
var box = document.querySelector(".box");
box.style.color = "#000";
box.style.backgroundColor = "red";
box.style.paddingLeft = "10px";
Ẩn hiện element
Trỏ đến thuộc tính style
, thay đổi giá trị display thành none
hoặc block
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";
Document ready
Một trong những tình huống hay gặp là chúng ta cần chạy một đoạn javascript sau khi HTML đã render xong
Làm việc với class
Thông qua classList
chúng ta có thể thêm-xóa-toggle một class
var box = document.querySelector('.box')
box.classList.add('focus')
box.classList.remove('focus')
box.classList.toggle('focus')
box.classList.replace('focus', 'blurred')
Để kiểm tra element có class nào đó không
Ví dụ, kiểm tra xem element là .box
có chứa class là active
không
document.querySelector('.box').classList.contains('focus')
Network request
Mình có bài chi tiết về API này rồi, các bạn đọc lại Giới thiệu fetch() của javascript
Tạo element
Tạo thẻ <div />
với nội dung là <div>text</div>
, rồi chèn nó vào <div class='box' />
var el = document.createElement('div')
// thêm nội dung text
el.textContent = 'text'
// chèn element nào vào đâu đó
document.querySelector('.box').appendChild(el)