Javascript DOM Element là gì?

Học Javascript 05/02/2015 07:00 542
Trong bài viết này chúng ta sẽ tìm hiểu đến DOM Element trong Javascript là gì?. 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 và cú pháp CSS Selector.

Nội dung của bài này chúng ta tìm hiểu các vấn đề sau:

  • Tìm thẻ HTML theo ID
  • Tìm thẻ HTML theo class
  • Tìm thẻ HTML theo tên thẻ
  • Tìm thẻ HTML theo selector

1. Tìm thẻ HTML 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');

Ví dụ:

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

Xem kết quả

2. Tìm thẻ HTML theo tên của thẻ HTML

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

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

Ví dụ:

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

Trong ví dụ này có sự khác biệt đó là đoạn code element[0].value. Tại sao lại như vậy? Như bạn 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 chứ không phải là một object nữa, chính vì vậy ta sẽ lấy input thứ nhất nên truyền số 0 vào.

3. Tìm thẻ HTML 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');

Ví dụ:

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

Xem kết quả

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.

4. Tìm thẻ HTML theo cú pháp của Selector CSS

Khi chọn các thẻ HTML theo class thường sẽ trả về hàng loạt các kết quả, như vậy đôi khi sẽ có những kết quả mà ta không mong đợi. 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.

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tìm thẻ HTML theo cú pháp của Selector CSS</title>
</head>
<body>
	<input type="text" value="Thẻ không cần lấy giá trị" class="website" />
    <div class="para">
    	 <input type="text" value="Thẻ cần lấy" class="website"/>
    </div>
</body>
</html>

Bây giờ là làm thế nào có thể chọn đúng một thẻ input nằm trong thẻ div và có class="website"?

Chúng 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
//hoặc
div.para input.website
// hoặc
div > input.website
// hoặc
div.para > input.website

Như vậy chúng ta sẽ có:

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

Xem kết quả

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

5. 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.

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.