Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
20 Tip Javascript Dành Cho Người Mới Lập Trình

20 Tip Javascript Dành Cho Người Mới Lập Trình


Ngày 22 Tháng 5 Năm 2021

Khi học một ngôn ngữ lập trình nào đó thì ngoài việc hiểu hết các lý thuyết cơ bản thì chuyện áp dụng nó vào sử dụng trong thực tế cũng đặc biệt quan trọng. Do đó nên ngày hôm nay mình sẽ giới thiệu đến bạn các đoạn code hay được sử dụng vợi mục đích chính là giải quyết các vấn đề phổ biến trong thực tế bằng Javascript. Nào chúng ta hãy cùng nhau tìm hiểu nhé!

Kiểm tra Element Có Chứa Class Hay Không?

Check Class JS

Và dưới đây là đoạn code nhé!

ele.classList.contains('Tên Class');

Thêm Một Đối Tượng Con Vào Element Xác Định

Add Element JS

Và dưới đây là đoạn code nhé!

target.appendChild(element);

Tạo Đối Tượng Mới

Create new Element

Và dưới đây là đoạn code nhé!

const element = document.createElement('div');

Tạo Text Note Mới

Create new text node

Và dưới đây là đoạn code nhé!

const ele = document.createTextNode('Xin Chào');

Cách Lấy CSS Style Của Đối Tượng

get element style CSS

Và dưới đây là đoạn code nhé!

const styles = window.getComputedStyle(element, null);

Sau đó thì chúng ta sẽ lấy thuộc tính CSS của element bằng getPropertyValue:

const backgroundColor = styles.getPropertyValue('background-color');

Cách Lấy Thuộc Tính(Attribute) Của Đối Tượng

Get Attribute HTML By JS

Và dưới đây là đoạn code nhé!

const tieuDe = link.getAttribute('title');

Cách Set Thuộc Tính(Attribute) Của Đối Tượng

Set Attribute HTML By JS

Và dưới đây là đoạn code nhé!

image.setAttribute('width', '200px');

Cách Xoá Thuộc Tính(Attribute) Của Đối Tượng

Remove Attribute HTML By JS

Và dưới đây là đoạn code nhé!

ele.removeAttribute('title');

Tự Động Selected Text Khi Người Dùng Focus Ô Input

Selected text when focus

Và dưới đây là đoạn code nhé!

ele.addEventListener('focus', function(e) {
    // Chọn nội dung đang có trong element
    e.target.select();
});

Hiện Hay Ẩn Một Element Nào Đó

Show Or Hide Element

Và dưới đây là đoạn code nhé!

 element.style.display = 'none';
element.style.display = '';

Thêm Class Vào Element

Add Class For Element

Và dưới đây là đoạn code nhé!

 ele.classList.add('class-name');

Nếu bạn muốn thêm nhiều class vào một element thì ta có thể viết như sau:

 ele.classList.add('class1', 'class2', 'class3');

Xoá Class Của Một Element

Remove Class For Element

Và dưới đây là đoạn code nhé!

 element.classList.remove('class-name');

Nếu bạn muốn xoá nhiều class vào một element thì ta có thể viết như sau:

 ele.classList.remove('class1', 'class2', 'class3');

Xoá Class Của Một Element

Remove Class For Element

Và dưới đây là đoạn code nhé!

 element.classList.remove('class-name');

Nếu bạn muốn xoá nhiều class vào một element thì ta có thể viết như sau:

 ele.classList.remove('class1', 'class2', 'class3');

Kiểm Tra Xem Website Có Đang Chạy Trên Trình Duyệt Mobile Hay Không?

check browser mobile

Và dưới đây là đoạn code nhé!

 const isMobile = /Android|BlackBerry|iPad|iPod|iPhone|webOS/i.test(navigator.userAgent);

Thay Thế Element

Replace element

Và dưới đây là đoạn code nhé!

 ele.parentNode.replaceChild(newElement, ele);

Chọn Đối Tượng Theo ID

Select an element by ID

Và dưới đây là đoạn code nhé!

document.getElementById('hello');

Chọn Đối Tượng Theo Tên Class

Select elements by class name

Và dưới đây là đoạn code nhé!

ele.getElementsByClassName('hello');

Chọn Đối Tượng Theo Tên Tag

Select elements by tag name

Và dưới đây là đoạn code nhé!

ele.getElementsByTagName('p');

Thiết Lập HTML Cho Element

Get and set html of an element

Và dưới đây là đoạn code nhé!

const html = ele.innerHTML;
ele.innerHTML = '<p>Hello World!</p>';

Lấy Nội Dung Khi Người Dùng Selected Text(Bôi Đen Văn Bản)

Get the selected text

Và dưới đây là đoạn code nhé!

const selectedText = window.getSelection().toString();

Xoá Một Đối Tượng Bằng Javascript

Remove Element

Và dưới đây là đoạn code nhé!

if (ele.parentNode) {
    ele.parentNode.removeChild(ele);
}

Nếu bạn muốn tham khảo thêm các tip javscript thì co thể truy cập ở đây nhé!

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức Javascript hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!