DOM Element trong javascript

Trong bài này chúng ta sẽ tìm hiểu đến DOM Element Javascript, ta sẽ học cách truy xuất đến một thẻ HTML bất kì thông qua các thuộc tính như id, class, name hay thậm chí là tên của thẻ HTML. .

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

DOM element trong Javascript là tổng hợp những hàm như getElementById, getElementsByTagName, getElementsByClass và querySelectorAll. Nhưng hàm này có công dụng là truy xuất đến các thẻ trong tài liệu html. Cụ thể như sau.

1. Sử dụng getElementById để tìm theo ID

Để truy xuất tới một thẻ HTML theo ID ta sử dụng cú pháp sau:

var element = document.getElementById('idname');

Demo RUN

// Lấy thẻ input
var element = document.getElementById('website');

// Lấy giá trị của thẻ input
document.write(element.value);

2. Sử dụng getElementsByTagName để tìm theo tên thẻ html

Tên thẻ HTML chính là tên các thẻ như p, a, div, ... Và ta sẽ truy xuất tới nó bằng cú pháp sau:

Bài viết này được đăng tại [free tuts .net]

var element = document.getElementsByTagName('tagname');

Demo RUN

// Lấy thẻ input
var element = document.getElementsByTagName('input');

// Lấy giá trị của thẻ input
document.write(element[0].value);

Bạn có hiểu ý nghĩa của đoạn code element[0].value không? Như ta biết, trong một trang web có thể có nhiều thẻ HTML giống nhau (ví dụ có hai thẻ div) nên hàm getElementsByTagName() sẽ trả về một mảng các object (xem bài mảng trong javascript) chứ không phải là một object nữa. Vì mình muốn lấy thẻ input thứ nhất và nó là phần tử đầu tiên trong mảng nên nhập số 0 vào.

3. Sử dụng getElementsByClassName để tìm theo tên class

Để tìm các thẻ HTML có class nào đó thì ta dùng cú pháp sau:

var element = document.getElementsByClassName('input');

Tương tự như tìm theo tên thẻ HTML, thì tìm theo tên class sẽ trả về một mảng các object nên bạn sẽ phải sử dụng cú pháp truy xuất mảng để chọn đúng đối tượng muốn lấy.

Demo RUN

// Lấy thẻ input
var element = document.getElementsByClassName('website');

// Lấy giá trị của thẻ input
document.write(element[0].value);

4. Sử dụng querySelectorAll để tìm theo CSS selector

Khi chọn các thẻ HTML theo class thì thường sẽ trả về hàng loạt các kết quả nên đôi khi sẽ có những kết quả mà ta không muốn lấy. Chính vì vậy javascript DOM có một phương thức kết hợp với CSS Selector để truy vấn có độ chính xác cao hơn, đó chính là hàm querySelectorAll.

Và đây là cú pháp sử dụng:

var element = document.querySelectorAll("selector css");

Ví dụ: Mình có một đoạn mã HTML như sau:

<html>
  <body>
    <input type="text" value="thẻ không cần lấy" class="website"/>
    <div>
      	<input type="text" value="Thẻ Cần Lấy" class="website"/>
        <input type="text" value="thẻ không cần lấy"/>
    </div>
  </body>
</html>

Câu hỏi đặt ra là làm thế nào có thể chọn đúng một thẻ input nằm trong thẻ div và có class="website"?

Trước tiên ta quay lại chút với CSS Selector đã nhé. Trong CSS để chọn thẻ input nằm trong thẻ div và có class="website" thì cú pháp là:

div input.website

Chỉ cần đưa css selector này vào hàm querySelectorAll là ta có được kết quả cần lấy.

Demo RUN

var element = document.querySelectorAll("div input.website");

Và có một lưu ý tương tự là kết quả sẽ trả về một mảng các Objects.

Lời kết: Trên là 4 cách thông thường chúng ta hay sử dụng trong javascript để truy xuất tới một thẻ HTML bất kì. Nếu sau này làm việc với jQuery thì bạn không cần phải nhọc nhằn như thế nữa mà nó có những phương thức ngắn gọn hơn rất nhiều.

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

DOM Element trong javascript

1. Sử dụng getElementById để tìm theo ID

2. Sử dụng getElementsByTagName để tìm theo tên thẻ html

3. Sử dụng getElementsByClassName để tìm theo tên class

4. Sử dụng querySelectorAll để tìm theo CSS selector

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

DOM Element trong javascript

1. Sử dụng getElementById để tìm theo ID

2. Sử dụng getElementsByTagName để tìm theo tên thẻ html

3. Sử dụng getElementsByClassName để tìm theo tên class

4. Sử dụng querySelectorAll để tìm theo CSS selector

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript