Nội dung

Javascript Cheat Sheet

Javascript (sau đây gọi là: Js) là một trong những ngôn ngữ phổ biến nhất hiện nay để phát triển website. Việc học và áp dụng thuần thục Js là một điều vô cùng có ích cho mọi người

Bookmark nào
 Bạn có thể Bookmark lại trang này để có gì sau này tham khảo nha

Tìm hiểu chung về Js

Lịch sử và khái niệm

  • Js là ngôn ngữ lập trình thường được dùng nhiều nhất cho các nội dung động (dynamic) theo kịch bản (scripts) ở phía máy khách trên trang web. Nhưng nó cũng được dùng ở phía máy chủ sử dụng trình chạy là Node.js

    Javascript không phải là Java. ĐÂy là hai ngôn ngữ khác nhau hoàn toàn từ cú pháp, cách dùng…

  • Js được dùng trên trình duyệt mở ra khả năng cho lập trình viên thao tác với nội dung trang web thông qua DOM (Document Object Model). Thao tác với dữ liệu thông qua AJAXindexDB, vẽ biểu đồ với canvas, tương tác với thiết bị thông qua trình duyệt với nhiều loại API. Js là một trong những ngôn ngữ thông dụng nhất.

  • Js được phát triển bởi Brendan Eich khoảng thời gian tháng 9 năm 1995 khi làm cho công ty Netscape với cái tên đầu tiên là Mocha sau đó đổi tên thành LiveScript và cuối cùng thành JavaScript. Phiên bản mới nhất của Js là ECMAScript 7

  • Ta có thể ví Js là lớp bánh thứ 3 của tiêu chuẩn web và hai lớp kia là HTMLCSS. Trong đó

    • HTML là ngôn ngữ đánh dấu văn bản dùng để bố cục và ghi ý nghĩa cho nội dung trang web ví dụ như xác định đoạn văn, tiêu đề, bảng biểu, hình ảnh
    • CSS là ngôn của của phong cách dùng để trang trí cho nội dung trên HTML ví dụ như màu sắc chữ, màu nền…
    • JS là ngôn ngữ kịch bản giúp ta tạo ra, cập nhật nội dung động, chuyển động hình ảnh…

Nhúng Js vào web

Ta có hai cách chủ yếu để chạy lệnh Js trên website

  • Nhúng trực tiếp dòng lệnh Js vào tập tin HTML trong phần head hoặc body. Nhưng thường thì gắn vào phần body để đảm bảo tốc độ tải trang và hạn chế lỗi. Cú pháp cho nhúng là <script> // dòng lệnh thực thi của Js sẽ nằm trong đây </script>
  • Tham chiếu một tập tin có phần mở rộng .js vào trong tập tin HTML với cú pháp <script src="duong_dan_toi_file/ten_file.js" defer />

JS Cheat Sheet

Khái niệm chung

Tên Giải thích & ví dụ
Comment ghi chú một dòng và nhiều dòng Có hai loại ghi chú trong Js là:
- Ghi chú một dòng với 2 ký tự gạch chéo ví dụ // phía sau là ghi chú
- Ghi chú nhiều dòng với cú pháp /* ghi chú nhiều dòng */
Variables gọi là biến, là giá trị lưu dữ liệu lại để thực hiện các phép tính hoặc các thao tác khác var - cách dùng cũ, gán lại được giá trị, sử dụng trong hàm và bị hoisting
const - có từ ES6, không có hoisting, không được gán lại, dùng lưu giữ giá trị không đổi, phạm vi trong khối {//code}
let - có từ ES6, không có hoisting, có thể được gán lại, phạm vi trong khối {//code}
Data types loại dữ liệu Javascript có nhiều loại dữ liệu
Number số, ví dụ let doidev = 1
String chuỗi, ví dụ: let tretrau = “Đời Dev”
Boolean đúng/sai, ví dụ let chemgio = true
Array mảng, ví dụ let doidev = ["bí kíp", "chém gió", "ăn vạ"]
Undefined không xác định, ví dụ let doidev; typeof doidev
Objects đối tượng, ví dụ let doidev = {tên:"Đời Dev",chức năng: "Chém Gió"}

Arrays (Mảng)

Mảng là nhóm các loại dữ liệu vào với nhau và không bắt buộc các loại dữ liệu trong mảng phải cùng loại. Ví dụ ta có mảng ban đầu như sau: let doidev = ["bí kíp", "chém gió", "ăn vạ", true, "chuẩn", "chém gió" ]

Ta cùng tìm hiểu các phương thức của mảng theo bảng dưới

Phương thức Mô tả & ví dụ Kết quả
array.concat(arr,str) Nối các mảng khác nhau thành một
let doidev2 = doidev.concat("cao cấp")
console.log(doidev2) = ["bí kíp","chém gió","ăn vạ",true,"chuẩn","chém gió","cao cấp"]
array.join(seperator) Nối các phần tử trong mảng thành chuỗi mặc định là dấy phẩy “,"
let joinDoiDev = doidev.join()
console.log(joinDoiDev) = "bí kíp,chém gió,ăn vạ,true,chuẩn,chém gió"
array.indexof(item,start) Trả về thứ tự chỉ số của phần tử tìm được đầu tiên tìm thấy trong mảng bắt đầu từ start
let first_index = doidev.indexOf("ăn vạ")
console.log(first_index) = 2
array.lastindexof(item,start) Trả về thứ tự chỉ số của phần tử tìm được cuối cùng tìm thấy trong mảng, bắt đầu từ start
let last_index = doidev.lastIndexOf("chém gió")
console.log(last_index) = 5
array.sort(compareFunction) Sắp xêp theo thứ tự bảng chữ cái của các phần tử trong mảng nếu để trống tham số hoặc theo hàm so sánh là tham số truyền vào
let sort_doidev = doidev.sort()
console.log(sort_doidev) = ["bí kíp","chuẩn","chém gió","chém gió",true,"ăn vạ"]
array.reverse() Sắp xếp các phần tử theo thứ tự đảo ngược
let reverse_doidev = doidev2.reverse()
console.log(reverse_doidev) = ["cao cấp","chém gió","chuẩn",true,"ăn vạ","chém gió","bí kíp"]
array.valueof() Trả về đối tượng mảng
console.log(doidev.valueOf())
["bí kíp","chém gió","ăn vạ",true,"chuẩn","chém gió"]
array.slice(start, end) Trích xuất một phần của mảng và trả về mảng mới tính từ vị trí start tới end và không bao gồm end
let short_name = doidev.slice(0,2)
console.log(short_name) = ["bí kíp","chém gió"]
array.splice(i,remove_item,add_1,add_2...) Thay thế một hoặc một số phần tử vào mảng cũ tính từ vị trí I sẽ loại bỏ bao nhiêu remove_item và thay bằng add_1, add_2…
doidev.splice(2,0, "kéo bão", "gọi mưa") <br> let new_doidev = doidev.splice(2)
console.log(doidev) =["bí kíp","chém gió","kéo bão","gọi mưa","ăn vạ",true,"chuẩn","chém gió"]<br> console.log(doidev) = ["bí kíp","chém gió"] <br> console.log(new_doidev) = ["ăn vạ",true,"chuẩn","chém gió"]
array.unshift(item1,item2) Thêm phần tử mới vào vị trí đầu tiên của mảng
let unshift_doidev = doidev.unshift("Đầu tiên")
console.log(doidev) = ["Đầu tiên","bí kíp","chém gió","ăn vạ",true,"chuẩn","chém gió"]
array.shift() Loại bỏ phần tử đầu tiên của mảng
let shift_doidev = doidev.shift()
console.log(doidev) = ["chém gió","ăn vạ",true,"chuẩn","chém gió"]
array.pop() Loại bỏ phần tử cuối cùng của mảng
let pop_doidev = doidev.pop()
console.log(doidev) = ["bí kíp","chém gió","ăn vạ",true,"chuẩn"]
array.push(item1, item2) Thêm phần tử vào vị trí cuối cùng của mảng
let push_doidev = doidev.push("cuối cùng")
console.log(doidev) = ["bí kíp","chém gió","ăn vạ",true,"chuẩn","chém gió","cuối cùng"]
array.tostring() In ra giá trị chuỗi của các phần tử trong mảng cách nhau bởi dấy phẩy “,"
console.log(doidev.toString())
"bí kíp,chém gió,ăn vạ,true,chuẩn,chém gió"

Operators (Toán tử)

Toán tử Giải thích
Basic cơ bản Cộng (+)
Trừ (-)
Nhân (*)
Chia lấy dư (%) ví dụ 8 % 3 dư 2
Tăng (++)
Giảm (- -)
Chia (/)
Chạy trong dấu ngoặc trước (…)
Số mũ (**)
Phép gán (=)
Logical logic (&&)
Hoặc ( | )
Không phải (!)
Comparison so sánh Bằng về giá trị (==)
Bằng về giá trị và kiểu dữ liệu (===) 
Không bằng về giá trị (!=)
Lớn hơn (>) 
Nhỏ hơn (<) 
Lớn hơn hoặc bằng (>=)
Không bằng về giá trị và kiểu dữ liệu (!==)
Nhỏ hơn hoặc bằng (<=)
Toán tử ba ngôi (?) let abc = tuoi <15 ? "Cấm" :tuoi < 18 ? "Cũng cấm" : tuoi < 20 ? "OK Đi" : "OK Tuốt"
Bitwise hoạt động trên một hay nhiều số nhị phân (bit) (&) cả 2 bit là 1 thì trả về 1 còn lại trả về 0. Ví dụ 111 & 100 = 110
( | ) một trong 2 bit là 1 thì trả về 1, còn lại trả về 0. Ví dụ 1010 & 0100 = 1110
(~) - not - đảo ngược 1 thành 0, 0 thành 1. Ví dụ ~0101 => 1010
(<<) - dịch chuyển bit sang trái
(>>) - dịch chuyển bit sang phải, ngoại trừ bit đầu tiên
(>>>) - dịch chuyển tất cả các bit sang phải
XOR (^) - trả về 1 nếu bit khác nhau. Ví dụ 1100 ^ 1111 = 0011

Hàm mặc định

Phương thức Mô tả & ví dụ Kết quả
alert() Hiện hộp thoại cảnh báo
alert("Hello, Đời Dev")
Hiện Hộp thoại
document.write() Ghi đầu giá trị đầu ra lên HTML
document.write("Hello")
Hiện lên html
console.log() Kiểm tra lỗi trên console trình duyệt
console.log("Hello")
Hiện lên console
prompt() Hiện hộp thoại cho gười dùng điền giá trị đầu vào
prompt("Thông báo", "Giá trị mặc định")
Hiện lên hộp thoại
confirm() Hiện hộp thoại xác nhận có/không trả về đúng/sai khi người dùng bấm vào
confirm("Thông báo")
Hiện lên hộp thoại

Global Functions (hàm chung)

Toán tử Giải thích
encodeURI() Mã hóa URI qua UTF-8. Ví dụ var uri = “doidev.com/posts”; var enc = encodeURI(uri);
encodeURIComponent() Mã hóa cho các thành phần URI. Ví dụ var uri = “doidev.com/posts”; var enccomp = encodeURIComponent(uri);
decodeURI() Giải mã URI được tạo bởi mã hóa URI hoặc tương tự. Ví dụ var dec = decodeURI(enc);
decodeURIComponent() Giải mã một thành phần của URI. Ví dụ var decomp = decodeURIComponent(enccomp);
parseInt() Biến đổi đầu vào thành số nguyên. Ví dụ var a = parseInt(“2003 monday”);
parseFloat() Biến đổi đầu vào thành số thập phân. Ví dụ var b = parseFloat(“23.333”);
eval() Đánh giá mã lệnh Js được trình bày dưới dạng chuỗi. Ví dụ var x = eval(“2 * 2”);
Number() Ép về kiểu dữ liệu số. Ví dụ var y = new Date(); var z = Number(y);
isNaN() Xác định xem giá trị có phải là số hay không. Ví dụ isNan(25);
isFinite() Xác định số truyền vào có phải số hữu hạn hay không?. Ví dụ isFinite(-245)

Loops (Vòng lặp)

Vòng lặp Giải thích
for Vòng lặp trong Js. Ví dụ for (let i=0;i<5;i++){// code}
while Thực thi đoạn mã lệnh trong khi điều kiện còn đúng. Ví dụ while (product.length > 5) {// code}
do… while Tương tự như while nhưng thực thi khối lệnh ít nhất một lần rồi vì điều kiện nằm phía sau khối lệnh. Ví dụ do { // thực thi lệnh} while (điều kiện){}
break Dừng và thoát khỏi vòng lệnh dựa vào một số điều kiện. Ví dụ if(1<10) break;
continue Tiếp tục thực hiện nếu thỏa mãn điều kiện. Ví dụ if(j>10) continue;

If-else

If-else dùng để thiết lập điều kiện để trả về kết quả khác nhau dựa vào điều kiện khác nhau.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
let diem = 6

if(diem > 9) {
  document.write(" Giỏi ")
} else if (diem >7) {
  document.write ("Khá")
} else if (diem >5) {
  document.write("Trung bình")
} else {
  document.write("Yếu")
}
Hiển thị kết quả nào

String (chuỗi)

Các phương thức của chuỗi. Ví dụ chuỗi là let doidev = "Chuyên chém gió về Web Dev & đời Dev"

Phương thức Mô tả & ví dụ Kết quả
string.length Xác định độ dài của chuỗi
console.log(doidev.length)
36
string.indexof(str) Trả về chỉ số vị trí của lần xuất hiện đầu tiên của ký tự hoặc từ trong chuỗi
console.log(doidev.indexOf("y"))
3
string.lastindexof(tr) Trả về chỉ số vị trí của lần xuất hiện cuối cùng của ký tự, từ trong chuỗi
console.log(doidev.lastIndexOf("c"))
7
string.search(str) Tìm kiếm và trả về chỉ số vị trí của giá trị được tìm kiếm trong chuỗi
console.log(doidev.search("ê"))
4
string.slice(start, end) Tạo ra chuỗi mới tính từ start và có độ dài bằng hiệu end trừ start. Nếu start âm thì sẽ lấy chuỗi theo chiều ngược lại là đếm từ cuối lên
console.log(doidev.slice(9))
"ém gió về Web Dev & đời Dev"
string.substring(start, end) Tạo ra chuỗi tính từ start và có độ dài bằng hiệu end trừ start. Lưu ý tham số truyền vào hàm phải là số dương
console.log(doidev.substring(2,12))
"uyên chém "
string.substr(start, length) Tạo ra chuỗi tính từ start và chuỗi có độ dài bằng length. Nếu start âm thì nó tính từ cuối trở lên. Tham số end phải dương
console.log(doidev.substr(2,12))
"uyên chém gi"
string.toUpperCase(str) Biến đổi thành chữ hoa toàn bộ ký tự trong chuỗi
console.log(doidev.toUpperCase())
"CHUYÊN CHÉM GIÓ VỀ WEB DEV & ĐỜI DEV"
string.toLowerCase(str) Biến đổi thành chữ thường toàn bộ ký tự trong chuỗi
console.log(doidev.toLowerCase())
"chuyên chém gió về web dev & đời dev"
string.concat(str) Nối hai hay nhiều chuỗi vào chuỗi khác
console.log(doidev.concat(" & linh tinh"))
"Chuyên chém gió về Web Dev & đời Dev & linh tinh"
string.trim(str) Loại bỏ khoảng trống ở đầu và cuối chuỗi
console.log(doidev.trim())
"Chuyên chém gió về Web Dev & đời Dev"
string.charAt(index) Tìm ký tự tại một vị trí cho trước
console.log(doidev.charAt(27))
"&"
string.charCodeAt(index) Trả về mã unicode của ký tự tại vị trí cho trước
console.log(doidev.charCodeAt(27))
38
string.split(char) Chuyển đổi chuỗi thành mảng dựa chia cắt bởi ký tự đặc biệt
console.log(doidev.split(" "))
["Chuyên","chém","gió","về","Web","Dev","&","đời","Dev"]
string[seperator] Truy cập vào một ký tự của chuỗi sử dụng chỉ số vị trí
console.log(doidev[27])
"&"

Escape character (Ký tự thoát)

Trong Js sử dụng dấu \ - gạch chéo ngược để làm ký tự thoát cho:

Ký tự Giải thích
\' Dấu nháy đơn
\" Dấu nháy kép
\\ Dấu gạch chéo ngược
\b Dấu lùi
\f Nguồn cấp dữ liệu biểu mẫu
\n Dòng mới
\t Tab ngang
\v Tab dọc
\r Dấu xuống dòng

Regular Expression (Biểu thức chính quy)

Biểu thức chính quy là các mẫu dùng để tìm kiếm các bộ ký tự được kết hợp với nhau trong các chuỗi ký tự

Patter modifiers (công cụ sửa đổi mẫu)

Ký tự Giải thích
e Đánh giá sự thay thế
i So sánh không phân biệt chữ hoa, thường
g So sánh toàn bộ - tìm tất cả kết quả phù hơp
m Kết hợp nhiều dòng
s Coi chuỗi như một dòng
x Cho phép nhận xét và khoảng trắng trong mẫu
u mẫu vô duyên

Brackets (Dấu ngoặc)

Ký tự Giải thích
[abc] Tìm bất cứ ký tự nào trong dấu ngoặc
[^abc] Tìm bất cứ ký tự nào không có trong dấu ngoặc
[0-9] Dùng để tìm bất kỳ số nào từ 0 đến 9
[A-z] Tìm bất kỳ chữ nào từ chữ Hoa đến chữ thường
(a | b | c) Tìm bất kỳ lựa chọn thay thế nào được phân tách bằng gạch đứng

Metacharacters (Siêu ký tự)

Ký tự Giải thích
Tìm một ký tự ngoại trừ dòng mới hoặc chấm dứt dòng
\w  Ký tự là từ
\W  Ký tự không phải là từ
\d  Một chữ số
\D  Không phải là một chữ số
\s  Ký tự khoảng trắng
\S  Ký tự không phải là khoảng trắng
\b  Tìm môt ký tự kết hợp ở đầu/cuối một từ
\B  Một kết quả không khớp đầu/cuối một từ
\0  Ký tự Null
\n  Ký tự dòng mới
\f  Ký tự nguồn cung cấp dữ liệu biểu mẫu
\r  Ký tự xuống dòng
\t  Ký tự Tab ngang
\v  Ký tự tab dọc
\xxx  Ký tự được chỉ định bởi một số bát phân
\xdd  Ký tự được chỉ định bởi một số thập lục phân
\uxxxx  Ký tự unicode được chỉ định bởi một số thập lục phân

Quantifiers (Định lượng)

Ký tự Giải thích
n+  Khớp với chuỗi có chứa ít nhất một ’n'
n*  Bất kỳ chuỗi nào chứa 0 hoặc nhiều lần xuất hiện của n
n?  Một chuỗi không chứa hoặc chỉ một lần xuất hiện của n
Chuỗi mà chứa một chuỗi của X n’s
Chuỗi mà chứa một chuỗi từ X đến Y n’s
Khớp với chuỗi có có ít nhất X n’s
n$  Bất kỳ chuỗi nào chứa n ở cuối
^n  Chuỗi chứa n ở đầu
?=n  Bất kỳ chuỗi nào theo sau bởi chuỗi n
?!n  Chuỗi mà không theo sau bởi chuỗi n

Numbers (Số)

Properties (Thuộc tính)

Thuộc tính Giải thích
MAX_VALUE  Giá trị số tối đa của Js
MIN_VALUE  Giá trị số dương nhỏ nhất trong Js
NaN  Not-a-Number (Không phải là số)
NEGATIVE_INFINITY  Giá trị âm vô cực
POSITIVE_INFINITY  Giá trị dương vô cực

Method (Phương thức)

Phương thức Giải thích Ví dụ
toExponential(n)  Trả về số có n số lẻ phần thập phân và được viết dưới dạng hàm mũ var a = 3.1417;
a.toExponential(2);
// kết quả 3.14e+0
toFixed(n)  Trả về số có n số lẻ phần thập phân var a = 3.1417;
a.toFixed(2);
// kết quả 3.14
toPrecision(n)  Chuyển sang số có chiều dài là n var a = 3.46;
a.to{Precision(2);
// kết quả 3.5
valueOf()  Lấy giá trị của biến hoặc một giá trị nào đó var x = 23;
x.valueOf();

Math properties (Thuộc tính trong phép toán)

Thuộc tính Giải thích
Số Euler (số e ~ 2.71828)
LN2  Logarit tự nhiên với cơ số 2
LN10  Logarit tự nhiên với cơ số 10
LOG2E  Logarit cơ số 2 của E
LOG10E  Logarit cơ số 10 của E
PI  Số Pi (3.14…)
SQRT1_2  Căn bậc hai của 1/2
SQRT2  Căn bậc hai của 2

Math method (Phương thức trong phép toán)

Phương thức Giải thích
abs(x)  Trả về giá trị tuyệt đối dương của x
acos(x)  Hàm arccos của x
asin(x)  Hàm arcsine của x
atan(x)  Hàm arctangent của x (số)
atan2(y,x)  Hàm arctangent của thương số của các đối số của nó
sin(x)  Hàm sine của x
cos(x)  Hàm cosine của x
tan(x)  Hàm tangent của một góc
exp(x)  Giá trị của x
ceil(x)  Làm tròn x lên số nguyên lớn hơn gần nhất
floor(x)  Làm tròn x xuống số nguyên nhỏ hơn gần nhất
log(x)  Logarit tự nhiên (cơ số E) củax
max(x,y,z,...,n)  Trả về số có giá trị lớn nhất
min(x,y,z,...,n)  Trả về số có giá trị nhỏ nhất
pow(x,y)  x theo lũy thừa của y
round(x)  Làm tròn x theo giá trị phần thập phân
sqrt(x)  Căn bậc 2 của x
random()  Trả về số ngẫu nhiên có giá trị từ 0 đến 1

Dates (Ngày tháng)

Ví dụ let d = new Date(); thì các phương thức của date sẽ được mô tả như bên dưới

Phương thức Giải thích
Date()  Dùng tạo một đối tượng ngày mới với ngày và giờ hiện tại
Date(2019, 10, 21, 12, 24, 58, 13)  Tạo một đối tượng ngày tùy chỉnh. Định dạng - (yyyy,mm,dd,hh,min,s,ms). Năm tháng là bắt buộc còn thông số khác thì tùy chọn
Date("2019-10-21")  Khai báo ngày dưới dạng một chuỗi
d.getDate()  Lấy ngày trong tháng dưới dạng số (1-31)
d.getDay()  Lấy ngày trong tuần dưới dạng số (0-6) trong đó 0 là ngày đầu tuần
d.getFullYear()  Năm dưới dạng 4 chữ số
d.getHours()  Lấy giờ dưới dạng (0-23)
d.getMilliseconds()  Lấy mili giây trong khoảng (0-999)
d.getMinutes()  Lấy phút trong khoảng (0-59)
d.getMonth()  Lấy tháng trong khoảng (0-11)
d.getSeconds()  Lấy giây trong khoảng (0-59)
d.getTime()  Lấy mili giấy từ 1/1/1970
d.getUTCDate()  Lấy ngày (thứ) của tháng trong ngày cụ thể theo giờ quốc tế (UTC) và cũng có sẵn cho ngày, tháng, năm, giờ, phút…
d.setDate(20)  Đặt ngày dưới dạng số
d.setFullYear(2021)  Đặt năm (tùy chọn ngày tháng)
d.setHours(3)  Đặt giờ (0-23)
d.setMilliseconds(4)  Đặt mili giây (0-999)
d.setMinutes(40)  Đặt phút (0-59)
d.setMonth(10)  Đặt tháng (0-11)
d.setSeconds(4)  Đặt giây (0-59)
d.setTime(4)  Đặt thời gian tính từ 1/1/1970
d.setUTCDate(4)  Đặt ngày (thứ) của tháng trong ngày cụ thể theo giờ quốc tế (UTC) và cũng có sẵn cho ngày, tháng, năm, giờ, phút…

DOM

DOM (Document Object Model) là code của cấu trúc trang. Phần tử trong HTML (có tên gọi khác là Nốt - Node) có thể dễ dàng bị biến đổi, bị thao tác qua Javascript.

NodeList & HTML Collection

HTML collection và NodeList khác nhau cơ bản là một cái động và một cái tĩnh. Cái động sẽ nhận ra khi có một phần tử mới được gắn vào DOM trong khi đó cái tĩnh thì không.

  • Phương thức trong HTML như getElementByClassName()getElementByTagName() trả về tập hợp phần tử động chỉ có phần tử khớp (class name hoặc tag name) và không bao gồm text
  • NoteList querySelectorAll() trả về một NodeList tĩnh, nó trông giống mảng (array) nhưng không phải mảng

Node properties

Thuộc tính Giải thích
attributes  Trả về tất cả thuộc tính của phần tử đó
baseURI  Trả về đường dẫn tuyệt đối URL của một phần tử
nodeName  Tên của một Node
nodeType  Loại của Node
nodeValue  Đặt hay nhận giá trị của một Node
parentNode  Node cha của một phần tử
childNodes  Tất cả Node con của một phần tử
firstChild  Node con đầu tiên của một phần tử
lastChild  Node con cuối cùng của một phần tử
ownerDocument  Cấp cao nhất của node hiện tại
previousSibling  Node ngay trước Node hiện tại
nextSibling  Node tiếp theo trong cùng một cấp độ trong cây
textContent  Đặt hoặc trả về nội dung văn bản của một node và các node con của nó

Node Method

Phương thức Giải thích
cloneNode()  Sao chép một phần tử HTML
compareDocumentPosition()  So sánh vị trí tài liệu của hai phần tử
isDefaultNamespace()  Trả về true nếu tên URI là mặc định
lookupNamespaceURI()  Trả về URI liên kết với node đã cho
getFeature()  Trả về đối tượng triển khai các API của một tính năng được chỉ định
isSupported()  Trả về true nếu một tính năng cụ thể được hỗ trợ trên phần tử
hasAttributes()  Trả về true nếu một phần tử có bất kỳ thuộc tính nào
insertBefore()  Chèn một node con mới trước một node con hiện có, được chỉ định
isEqualNode()  Kiểm tra xem hai phần tử có bằng nhau không
isSameNode()  Kiểm tra xem hai phần tử có cùng một node không
hasChildNodes()  Trả về true nếu phần tử có node con
lookupPrefix()  Trả về chuỗi DOM có chứa tiền tố cho một URI nhất định, nếu có
normalize()  Nối vào node kế tiếp và xóa các node trống
removeChild()  Loại bỏ node con khỏi phần tử
replaceChild()  Thay thế node con trong phần tử
appendChild()  Thêm node con mới vào trong phần tử làm node con cuối cùng

Element Method

Phương thức Giải thích
getAttribute()  Trả về giá trị thuộc tính được chỉ định của một phần tử
getAttributeNS()  Trả về chuỗi của thuộc tính với namespace và tên được chỉ định
getAttributeNode()  Lấy thuộc tính của node
getAttributeNodeNS()  Lấy thuộc tính của node với namespace
getElementsByTagName()  Cung cấp tập hợp phần tử con dựa vào tag name
getElementsByTagNameNS()  Trả về các phần tử có tên thẻ HML cụ thể với namespace
hasAttribute()  Trả về true nếu phần tử có bất kỳ thuộc tính nào
hasAttributeNS()  Cung cấp giá trị true/false cho biết liệu phần tử hiện tại trong namespace có thuộc tính được chỉ định hay không
setAttribute()  Đặt hoặc thay đổi thuộc tính được chỉ định thành giá trị được chỉ định
setAttributeNS()  Thêm thuộc tính mới hoặc thay đổi thuộc tính hiện tại với namespace và tên đã cho
setAttributeNode()  Đặt hoặc thay đổi thuộc tính của node được chỉ định
setAttributeNodeNS()  Thêm mới thuộc tính namespace của node vào phần tử
removeAttribute()  Loại bỏ thuộc tính được chỉ định trong phần tử
removeAttributeNS()  Loại bỏ và trả về thuộc tính được chỉ định của node trong namespace
removeAttributeNode()  Loại bỏ và trả về thuộc tính được chỉ định của node

Browser Actions(Trình duyệt)

Window properties

Thuộc tính Giải thích
closed  Kiểm tra xem cửa sổ window đã được đóng chưa?
defaultStatus  Đặt hoặc lấy tiêu đề mặc định trong thanh trạng thái của cửa sổ hiện tại
self  Cửa sổ hiện tại
top  Cửa sổ trình duyệt trên cùng
parent  Cửa sổ cha của cửa sổ hiện tại
document  Trả về đối tượng document
frames  Trả về tất cả các phần tử <iframe> trong cửa sổ hiện tại
history  Đối tượng lịch sử của cửa sổ
innerHeight  Chiều cao bên trong của phần nội dung trong cửa sổ
innerWidth  Chiều dài bên trong của phần nội dung trong cửa sổ
length  Số lượng của <iframe> trong cửa sổ
location  Đối tượng location của cửa sổ
name  Đặt hoặc lấy tên cửa sổ
navigator  Trả về đối tượng Điều hướng (Navigator) cho cửa sổ
opener  Tham chiếu đến cửa sổ đã tạo cửa sổ hiện tại
outerHeight  Chiều cao bên ngoài cửa sổ bao gồm thanh công cụ/thanh cuộn
outerWidth  Chiều rông bên ngoài cửa sổ bao gồm thanh công cụ/thanh cuộn
pageXOffset  Số pixel mà tài liệu đã cuộn theo chiều ngang
pageYOffset  Số pixel mà tài liệu đã cuộn theo chiều dọc
screen  Trả về đối tượng Màn hình cho cửa sổ
screenLeft  Tọa độ ngang của cửa sổ
screenTop  Tọa độ dọc của cửa sổ
screenX  Tọa độ ngang của cửa sổ
screenY  Tọa độ dọc của cửa sổ
status  Đặt hoặc lấy tiêu đề trong thanh trạng thái của cửa sổ

Window Method

Phương thức Giải thích
alert()  Hiện hộp thoại cảnh báo có nút OK
blur()  Loại bỏ tập trung vào cửa sổ hiện tại
clearTimeout()  Xóa bộ hẹn giờ bằng setTimeout()
clearInterval()  Xóa bộ hẹn giờ bằng setInterval()
close()  Đóng cửa sổ hiện tại
open()  Mở một cửa sổ mới
stop()  Dừng tải trang cửa sổ hiện tại
confirm()  Hiện hộp thoại có nút Ok và cancel
focus()  Đặt tập trung vào cửa sổ hiện tại
moveBy()  Di chuyển một cửa sổ so với vị trí hiện tại của nó
moveTo()  Di chuyển một cửa sổ so tới vị trí nhất định
print()  In nội dung của cửa sổ hiện tại
prompt()  Hiện hộp thoại cho người dùng điền vào và xác nhận
resizeBy()  Thay đổi kích cỡ cửa sổ theo số pixel đã cho
resizeTo()  Thay đổi kích cỡ cửa sổ theo chiều dài, rộng đã cho
scrollBy()  Cuộn trang tới vị trí pixel đã cho
scrollTo()  Cuộn trang tới tọa độ đã cho
setInterval()  Gọi hàm hoặc đánh giá một biểu thức trong các khoảng thời gian đã cho
setTimeout()  Gọi một hàm hoặc đánh giá một biểu thức trong một khoảng thời gian cụ thể

Screen properties

Phương thức Giải thích
availHeight  Trả về chiều cao của màn hình (không bao gồm taskbar)
availWidth  Trả về chiều rộng của màn hình (không bao gồm taskbar)
colorDepth  Trả về độ sâu bit của bảng màu để hiển thị hình ảnh
height  Tổng chiều cao màn hình
pixelDepth  Độ phân giải của màn hình tính bằng bit trên pixel
width  Tổng chiều rộng màn hình

User Events (sự kiện)

1. Mouse (chuột)

Phương thức Giải thích
onclick  Sự kiện xảy ra khi người dùng nhấp chuột vào một phần tử
onmouseover  Khi con trỏ chuột di chuyển qua một số phần tử hoặc phần tử con của nó
onmouseout  Người dùng di chuyển con trỏ chuột ra khỏi một phần tử hoặc một trong những phần tử con của nó
onmouseup  Khi người dùng thả nút nhấn chuột trên phần tử
onmousedown  Khi người dùng nhấn chuột trên một phần tử
onmouseenter  Con trỏ chuột di chuyển vào một phần tử
onmouseleave  Con trỏ chuột di chuyển ra khỏi một phần tử
onmousemove  Con trỏ chuột di chuyển khi đang ở trên một phần tử
oncontextmenu  Người dùng bấm chuột phải vào một phần tử để mở một cửa sổ menu ngữ cảnh
ondblclick  Người dùng nhấp đôi chuột vào một phần tử

2. Keyboard (Bàn phím)

Phương thức Giải thích
onkeydown  Khi người dùng nhấn một phím xuống
onkeypress  Thời điểm người dùng bắt đầu nhấn một phím
onkeyup  Người dùng thả phím đang nhấn ra

3. Frame (Khung)

Phương thức Giải thích
onabort  Quá trình tải của một phương tiện bị hủy
onbeforeunload  Sự kiện xảy ra trước khi một tài liệu bị dỡ bỏ
onunload  Sự kiện xảy ra khi một trang đã được tải xuống
onerror  Khi một lỗi xảy ra trong khi tải một tập tin ngoài
onhashchange  Có những thay đổi với phần neo của một URL
onload  Khi một đối tượng đã được tải
onpagehide  Khi người dùng điều hướng ra khỏi trang web
onpageshow  Người dùng điều hướng tới một trang web
onresize  Chế độ xem tài liệu bị thay đổi kích thước
onscroll  Thanh cuộn của một phần tử thì đang được cuộn

4. Form ( Bảng biểu mẫu)

Phương thức Giải thích
onblur  Khi phần tử bị mất con trỏ chuột nhấp nháy
onchange  Khi nội dung của các phần tử trong bảng biểu như <input>, <select> and <textarea> thay đổi
onfocus  Khi phần tử nhận con trỏ chuột nhấp nháy
onfocusin  Khi phần từ sắp nhận con trỏ chuột nhấp nháy
onfocusout  Khi phần tử sắp bị mất con trỏ chuột
oninput  Người dùng điền vào phần đầu vào
oninvalid  Một phần tử không hợp lệ
onreset  Đặt lại biểu mẫu
onsearch  Người dùng điền vào phần đầu vào ô tìm kiếm
onselect  Người dùng chọn một số từ trong (<input> and <textarea>)
onsubmit  Sự kiện xảy ra khi nộp bảng biểu

5. Drag ( Kéo )

Phương thức Giải thích
ondrag  Một phần tử được kéo
ondrop  Phần tử đang được kéo thì được thả vào mục tiêu thả
ondragstart  Người dùng bắt đầu kéo một phần tử
ondragend  Người dũng đã hoàn thành kéo một phần tử
ondragenter  Phần tử đang được kéo đi vào mục tiêu thả
ondragleave  Một phần tử đang được kéo rời khỏi mục tiêu thả
ondragover  Phần tử đang được kéo thì nằm bên trên mục tiêu thả

6. Clipboard

Phương thức Giải thích
oncut  Sự kiện xảy ra khi người dùng cắt nội dung của một phần tử
oncopy  Sự kiện xảy ra khi người dùng sao chép nội dung của một phần tử
onpaste  Sự kiện xảy ra khi người dùng dán nội dung của một phần tử

7. Media

Phương thức Giải thích
onabort  Quá trình tải phương tiện bị hủy bỏ
onended  Phương tiện kết thúc
onerror  Xảy ra khi một lỗi xuất hiện trong khi tải một tập tin bên ngoài
oncanplay  Trình duyệt có thể bắt đầu phát phương tiện
oncanplaythrough  Trình duyệt có thể phát phương tiện mà không phải dừng lại
ondurationchange  Thay đổi thời lượng của phương tiện
onloadeddata  Đã tải dữ liệu phương tiện
onloadedmetadata  Đã tải metadata (ví dụ: kích thước, thời lượng)
onloadstart  Trình duyệt bắt đầu tìm kiếm phương tiện đã cho
onpause  Phương tiện dừng phát bởi người dùng hoặc tự động
onplay  Phương tiện đã được phát và không còn bị tạm dừng
onplaying  Phương tiện được phát sau khi bị tạm dừng hoặc dừng để lưu vào bộ nhớ đệm
onprogress  Trình duyệt đang trong quá trình tải phương tiện
onratechange  Tốc độ phát của phương tiện thay đổi
onseeked  Người dùng đã hoàn tất di chuyển / chuyển qua một vị trí mới trong phương tiện
onseeking  Người dùng bắt đầu di chuyển/ chuyển sang
onstalled  Trình duyệt đang cố gắng tải phương tiện nhưng không khả dụng
onwaiting  Phương tiện bị tạm dừng nhưng dự kiến sẽ tiếp tục (giống như trường hợp bộ nhớ đệm)
onsuspend  Trình duyệt cố tình không tải phương tiện
ontimeupdate  Vị trí phát đã thay đổi (giống như trường hợp tour đi nhanh)
onvolumechange  Âm lượng của phương tiện đã được tăng hoặc giảm

8. Animation

Phương thức Giải thích
animationstart  Hoạt ảnh CSS đã được phát
animationend  Kết thúc hoạt ảnh CSS
animationiteration  Hoạt ảnh CSS phát hết

9. Other

Phương thức Giải thích
transitionend  Sự kiện được kích hoạt khi quá trình chuyển đổi CSS đã hoàn tất
onmessage  Nhận thông báo từ nguồn sự kiện
ononline  Trình duyệt bắt đầu hoạt động trực tuyến
onoffline  Trình duyệt bắt đầu hoạt động ngoại tuyến
ontoggle  Người dùng mở hoặc đóng chi tiết của phần tử
onpopstate  Khi lịch sử của cửa sổ thay đổi
onshow  Một phần tử được hiển thị như một menu ngữ cảnh
onstorage  Khu vực lưu trữ web được cập nhật
onwheel  Con lăn của con chuột cuộn lên hoặc xuống qua một phần tử
ontouchstart  Khi một ngón tay được đặt trên màn hình cảm ứng
ontouchend  Ngón tay của người dùng rời khỏi màn hình cảm ứng
ontouchcancel  Động tác chạm bị hủy
ontouchmove  Ngón tay người dùng được kéo trên màn hình

10. Errors

Phương thức Giải thích
try  Khối mã lệnh được thực thi trong trường hợp không có lỗi
catch  Khối mã lệnh được thực thi trong trường hợp có lỗi
throw  Tạo thông báo lỗi tùy chỉnh thay vì lỗi tiêu chuẩn của Js
finally  Khối mã lệnh luôn được thực thị cho dù có lỗi trong quá trình thực thi hay không

Errors (Lỗi)

Mỗi lỗi là đối tượng và được định nghĩa với thuộc tính tên (name) và thông báo lỗi (message)
name: Đặt hoặc lấy tên lỗi
message: Đặt hoặc lấy thông tin lỗi chi tiết hơn

Lỗi Giải thích
EvalError  Xảy ra lỗi trong hàm eval()
RangeError  Số ngoài phạm vi
ReferenceError  Xuất hiện tham chiếu không hợp lệ
SyntaxError  Lỗi cú pháp
TypeError  Lỗi gõ
URIError  Lỗi encodeURI()