Làm việc với DOM trong Javascript

Làm việc với DOM trong Javascript

Mục lục

Trong bài viết này chúng ta cùng tìm hiểu DOM là gì và cách thao tác với DOM trên Javascript

DOM là gì?

DOM là viết tắt của chữ Document Object Model, dịch tạm ra là mô hình các đối tượng trong tài liệu HTML. Nó là một chuẩn được định nghĩa bởi W3C (Tổ Chức Web Toàn Cầu – World Wide Web Consortium) và DOM được dùng để truy xuất các tài liệu dạng HTML và XML, có dạng một cây cấu trúc dữ liệu, và thông thường mô hình DOM độc lập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tài liệu.

Một số cách truy cập vào phần tử trong DOM

  1. document.getElementById => Trả 1 đối tượng
  2. document.getElementsByClassName => trả về list đối tương
  3. document.getElementsByTagName => trả về list đối tượng
  4. document.getElementsByName => trả về list đối tượng
  5. document.querySelector    => 1 đối tương đầu tiên
  6. document.querySelectorAll   => trả về list đối tượng

Ví dụ:

const selectid = document.getElementById('id_cần_tìm')
const selectclass = document.getElementsByClassName('class_cần_tìm')
const selecttag = document.getElementsByTagName('tag_cần_tìm')
const selectname = document.getElementsByName('name_cần_tìm')

Đối với querySelector & querySelectorAll

Về mặt cú pháp thì querySelector và querySelectorAll có cú pháp như nhau chỉ khác querySelector trả về 1 đối tượng đầu tiên, querySelectorAll trả về danh sách đối tượng

Ví dụ:

Lấy theo id

const addproduct = document.querySelector('#addproduct')
console.log(addproduct2);

Lấy theo class

const items = document.querySelectorAll('.item')
console.log(items2);

Lấy theo tag name

const span = document.querySelectorAll('span')
console.log(span);

Lấy theo attribute

const address = document.querySelectorAll('[name = address]')
console.log(address);

Một số cách truy cập phần tử thông qua các thuộc tính của phần tử khác

  1. Phần tử sau nó
const btnsubmit = curentElm.nextElementSibling
console.log(btnsubmit);
  1. Phần tử trước nó
const input2 = curentElm.previousElementSibling
console.log(input2);
  1. Phần tử cha
const parent = curentElm.parentElement
console.dir(parent);
  1. Phần tử con
const children = parent.children

Note: Để tìm hiểu thêm các thuộc tính của phần tử có thể sử dụng cú pháp console.dir(curentElm) để kiểm tra.

Tạo mới và thêm phần tử html bằng Javascript

Tạo mới

const newElm = document.createElement('a')
newElm.innerText ='Click đây đi, hay lắm'
newElm.href = 'https://ngocnv.top'


Ở ví dụ này chúng ta sẽ tạo một thẻ a với link liên kết đến website https://ngocnv.top và nội dung text của thẻ a là 'Click đây đi, hay lắm'

Chèn phần tử vừa tạo vào một phần tử nào đó

  1. Chèn làm phần tử cuối cùng: parent.append(newElm)
  2. Chèn làm phần tử đầu tiên: parent.prepend(newElm)

Thay thế nội dung html bên trong phần tử bằng nội dung html khác

parent.innerHTML =`
<strong>Xin chào</strong>
<img src="link_ảnh"/>
`

Sử dụng phương thức addEventListener để bắt sự kiện trên DOM

VD: khi click vào nút submit thì thực hiện hành động nào đó

- Truy cập vào nút submit

const button = document.querySelector('button')

- Lắng nghe sự kiện

button.addEventListener('click',()=>{
 //todo
alert('Bạn vừa click')
})

Tips: Có thể sử dụng console.dir(curentElm) để kiểm tra những sự kiện nào có thể sử dụng

Được viết bởi: Ngọc Ngô

Bài viết cùng chuyên mục

Vote 0