DOM Elements Trong JavaScript - Stolennguyen Website

DOM Elements Trong JavaScript

DOM-Elements-trong-JavaScript-1

DOM Elements trong JavaScript

1. DOM là gì?

HTML
JS

DOM Elements Trong JavaScript hay DOM là viết tắt của Document Object Model. Hiểu đơn giản thì DOM chính là những phần tử biểu diễn cấu trúc dữ liệu của một trang web

Mô hình HTML DOM được xây dựng dưới dạng cây Đối tượng:

The HTML DOM Tree of Object

2. DOM Elements Trong JavaScript

Khi bạn muốn truy cập các phần tử HTML bằng JavaScript, trước tiên bạn phải tìm các phần tử:

  • Tìm các phần tử HTML thông qua ID
  • Tìm các phần tử HTML thông qua name
  • Tìm các phần tử HTML thông qua class
  • Tìm các phần tử HTML thông qua CSS Selectors
  • Tìm các phần tử HTML thông qua đối tượng HTML

a) Tìm các phần tử HTML thông qua ID

 var myElement = document.getElementById("intro");
  • Nếu phần tử được tìm thấy, phương thức sẽ trả về phần tử dưới dạng một đối tượng
  • Nếu phần tử không được tìm thấy, myElement sẽ chứa null

Ví dụ:

Ví dụ tìm các phần tử HTML thông qua ID
Ví dụ này tìm phần tử có id = “intro”

b) Tìm các phần tử HTML thông qua TagName

var x = document.getElementsByTagName("p");
Tìm các phần tử HTML thông qua TagName
Ví dụ này tìm phần tử có id = “main” và sau đó tìm tất cả các phần tử <p> bên trong “main”

c) Tìm các phần tử HTML thông qua Class

var x = document.getElementsByClassName("intro");
Tìm các phần tử HTML thông qua Class
Ví dụ này tìm tất cả các phần tử có class = “intro”

d) Tìm các phần tử thông qua CSS Selectors

var x = document.querySelectorAll("p.intro");
Tìm các phần tử thông qua CSS Selectors
Ví dụ này trả về một danh sách tất cả các phần tử <p> với class = “intro”.

Phương thức querySelectorAll () không hoạt động trong Internet Explorer 8 và các phiên bản trước đó.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *