Skip to content
getElementByClassNamegetElementByTagName
To-do listComment list...if there is no npm supported, like Cloudflare Pages
setAttributeremoveAttributeel.classList.add("bold")el.classList.remove("bold")el.classList.toggle("bold")
click = on clickchange = on de-focusinput = on every letter inputsubmit = on form submit (remember to change default action)
Epspecially when you manupulate DOMs
variablesfunction results
Moment
youhoc
- Pages
JS in the Browser
Install live-server npm
npm install -g live-server
live-server --version
This will automatically detect and refresh changes.
No need for nginx / apache / mamp pro
DOM Query Selector
Most flexible - querySelector
Other getElements
Targeting the exact elements with UUID
By working with 3rd-party library
Import directly into HTML
Change DOM value
Change DOM Attributes
Change attributes & values
Change class
Remove DOM
Add new DOM element
Add Event Handler
Always listen and respond to events
Some events:
Another way to add Event Handler:
Input DOM
Be aware:
Form ID can be used with Query Selector, BUT...
Input Name should be named like Variable, WHY?
Others
location.assign('/another_page.html')
// cut or manipulate the string
location.hash.substring(1) // cut the first letter, take the rest
Refactoring
JS files run in the same environment
Be careful with the order of JS files
Debugger
Add debugger anywhere to stop the process, then go to console to print:
To resume running codes, press the play button.
Debugger ONLY runs when Developer Tools are opened.
Sync Data across Tabs
Where there is change in 1 tab, update others.
Listen for local data storage change.
Using window element, then sync with event handler and storage
window.addEventListening('storage',function(e){
})
Window Attributes
window.innerWidth
window.innerHeight
window.document === document (TRUE)
To learn:
Dates
Checkbox
Dropdown
JS Học ở đâu không biết?
Tương tác DOM
=== Chỉ định DOM
Để tương tác với 1 DOM, cần gán id cho DOM đó.
<div id="title">Tiêu đề tại đây</div>
Để chỉ định 1 DOM (lấy tất cả HTML của DOM đó)
// lấy hết HTML bao gồm cả tag chính chứa id
document.getElementbyID();
// lấy hết HTML giữa tag chính
document.getElementbyID("title").innerHTML
// chỉ lấy text giữa tag chính
document.getElementbyID("title").innerText
Gán biến cho DOM để dễ gọi:
// gán biến cho DOM
var todo = document.getElementById("todo");
Chỉ định thẻ HTML đầu tiên tìm thấy theo querySelector()
// lấy thẻ HTML đầu tiên tìm được của selector
var el = document.querySelector("p");
var el = document.querySelector(".classNaoDo");
var el = document.querySelector("#idChiDinh");
// có thể lồng thêm để chỉ định đúng hơn
var el = document.querySelector("p.classNaoDo");
var el = document.querySelector("p.classNaoDo.classThu2");
=== Tương tác DOM
Để tạo 1 DOM mới:
// tạo element DOM mới, sau đó gán giá trị cho DOM
var task3 = document.createElement("li");
task3.innerHTML = "Mua iPhone";
// set thuộc tính (ví dụ, id hoặc class cho DOM)
task3.setAttribute("id", "task3");
Để tạo 1 nested DOM mới bên trong 1 DOM có sẵn
// gắn DOM mới vào bên trong một DOM hiện tại
todo.appendChild(task2);
Để gỡ 1 nested DOM bên trong 1 DOM có sẵn
// chỉ định DOM cần gỡ
var domToDel = document.getElementById("task2");
todo.removeChild(domToDel);
Để lấy giá trị từ 1 input form
var taskName = document.getElementById("taskName").value;
Để set hoặc remove attribute của 1 thẻ HTML
// set thuộc tính id cho thẻ HTML
newTask.setAttribute("id", newTaskId);
// set thuộc tính disabled="" cho input form
document.getElementById("removeButton").setAttribute("disabled", "");
Để hiển thị giá trị của một thuộc tính HTML
// hiển thị giá trị src trong thẻ IMG
var el = document.querySelector("img");
console.log(el.src)
// thay đổi giá trị src trong thẻ IMG
el.src = "http://new.path.to.img";
// thay đổi input type và placeholder
var el2 = document.querySelector("input");
el2.type = "password";
el2.placeholder = "điền pass";
// thay đổi CSS của một page bằng cách đổi link
var el = document.querySelector("link");
el.href = "stylesheet2.php";
// thay đổi style
document.getElementById("MyElement").style.color =
document.getElementById("MyElement").style.backgroundColor =
document.getElementById("MyElement").style.borderRadius =
// thay đổi class
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
// kiểm tra class có tồn tại
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
Xem bài viết chi tiết:
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.