20 Nov

Các phương thức trong DOM – Truy cập đến một phần tử HTML 5.00/5 (100.00%) 1 vote

Hôm nay,hocthietkeweb.net tiếp tục giới thiệu đến các bạn Các phương thức Dom– Truy cập đến một phần tử HTML.Javascript hỗ trợ hai phương thức cơ bản để truy cập đến bất kỳ một phần tử nào đó bên trong tài liệu HTML. Đó là phương thức getElementById() và phương thức getElementsByTagName().

 


Phương thức getElementById()

Đây là phương thức cơ bản nhất để truy cập đến một phần tử bên trong tài liệu HTML. Với phương thức này, bạn có thể truy cập đến một phần tử thông qua thuộc tính id của nó.
Cú pháp

1
var myVariable = document.getElementById("my_element"); 

B1: Tạo file bai12.html, nhập đoạn code sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bài 13 - Phương thức trong Javascript</title>
</head>
<body>
<button id="myButton">Click me</button>
<script type="text/javascript" language="javascript">
var button = document.getElementById('myButton');
console.log(button);
</script>
</body>
</html>

B2: Mở file với trình duyệt, bật phần debug javascript lên

vietobject-javascript-dom-methods

Như vậy là biến button đang đại diện cho phần tử button có id là myButton

Phương thức getElementsByTagName

Phương thức này có tác dụng tương tự như phương thức getElementById(). Tuy nhiên, đúng như tên gọi, nó sẽ truy cập đến phần tử HTML thông qua tên gọi của phần tử đó.

1
var myVariable = document.getElementsByTagName("tên phần tử"); 

B3: Nhập đoạn code sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bài 13 - Phương thức trong Javascript</title>
</head>
<body>
<a href="#">hi there</a>
<script type="text/javascript" language="javascript">
var anchorElement = document.getElementsByTagName('a');
console.log(anchorElement);
</script>
</body>
</html>

B4: Mở file với trình duyệt

vietobject-javascript-dom-methods1

Hover chuột lên dòng chữ HTMLCollection[a #] trong bảng console, sẽ thấy dòng chứ hi theretrong trình duyệt được bôi đen

vietobject-javascript-dom-methods2

Click chuột vào dòng chữ HTMLCollection[a #] trong bảng console, sẽ hiện ra thông tin chi tiết về phần tử

vietobject-javascript-dom-methods3

Bài viết hôm nay đến đây là kết thúc, Chúc các bạn thực hành lại thành công.

Nguồn:vietobject.com