Javascript - Đối tượng Document
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.
Như các bạn biết trong mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha - con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ, ...
Bạn có thể tham khảo hình vẽ dưới đây để hiểu rõ hơn về DOM.
Cú pháp:
window.document
Hoặc
document
Các phương thức của đối tượng DOM
Chúng ta có thể truy cập và thay đổi nội dung của tài liệu bằng các phương thức của nó.
Các phương thức quan trọng của đối tượng tài liệu như sau:
Phương thức | Giải thích |
---|---|
write("string") | Xuất chuỗi ra trình duyệt. |
writeln("string") | Xuất chuỗi ra trinh duyệt và xuống dòng. |
getElementById(id) | Lấy các thành phần theo id của thẻ HTML.. |
getElementsByName(tagname) | Lấy phần tử theo tên, chính là thuộc tính name trong thẻ. |
getElementsByTagName(name) | Lấy phần tử theo tên thẻ HTML. |
getElementsByClassName() | Lấy phần tử theo thuộc tính class. |
Ví dụ: Truy xuất và thông báo ra nội dung của thẻ HTML có id là hiepsi.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hiep si IT javascript</title>
</head>
<body>
<div id="hello">Chào mừng các bạn đến với website học lập trình online </div>
<div id="hiepsi">Hiep SI IT</div>
<script type="text/javascript">
var element = document.getElementById('hiepsi');
var content = element.innerHTML;
alert(content);
</script>
</body>
</html>
Ví dụ: Tìm và lấy ra nội dung của thẻ HTML có class name là hello
.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hiệp Sĩ IT javascript</title>
</head>
<body>
<div class="hello">Chào mừng các bạn đến với website học lập trình online </div>
<div class="hiepsi">Hiệp Sĩ IT</div>
<script type="text/javascript">
var element = document.getElementsByClassName('hello');
//Lấy ra nội dung của thẻ đầu tiên
var content = element[0].innerHTML;
alert(content);
</script>
</body>
</html>
Truy cập giá trị của field bằng đối tượng Document
Trong ví dụ này, chúng ta sẽ nhận được giá trị của văn bản do người sử dụng nhập vào. Ở đây, chúng ta đang sử dụng document.form1.name.value để lấy giá trị của filed name.
Ở đây, Document là phần tử gốc đại diện cho tài liệu html.
form1 là tên của form.
name là tên thuộc tính của thẻ input.
value là thuộc tính, trả về giá trị của văn bản do người sử dụng nhập vào.
Ví dụ:
<script type="text/javascript">
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>