JavaHướng dẫn Script DOM với Ví dụ
James Hartman
DOM trong đó là gì JavaKịch bản?
JavaScript có thể truy cập tất cả các thành phần trong trang web bằng cách sử dụng Document Object Model (DOM). Trên thực tế, trình duyệt web tạo DOM của trang web khi trang được tải. Mô hình DOM được tạo dưới dạng cây đối tượng như sau:
Cách sử dụng DOM và Sự kiện
Sử dụng DOM, JavaScript có thể thực hiện nhiều tác vụ. Nó có thể tạo các phần tử và thuộc tính mới, thay đổi các phần tử và thuộc tính hiện có và thậm chí xóa các phần tử và thuộc tính hiện có. JavaScript cũng có thể phản ứng với các sự kiện hiện có và tạo sự kiện mới trong trang.
getElementById, ví dụ về HTML bên trong
- getElementById: Để truy cập các phần tử và thuộc tính có id được đặt.
- bên trongHTML: Để truy cập nội dung của một phần tử.
Hãy tự mình thử ví dụ này:
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>
Ví dụ getElementsByTagName
getElementsByTagName: Để truy cập các phần tử và thuộc tính bằng tên thẻ. Phương thức này sẽ trả về một mảng của tất cả các mục có cùng tên thẻ.
Hãy tự mình thử ví dụ này:
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>
Ví dụ xử lý sự kiện
- createElement: Để tạo phần tử mới
- RemoveChild: Xóa một phần tử
- Bạn có thể thêm một xử lý sự kiện đến một yếu tố cụ thể như thế này:
document.getElementById(id).onclick=function()
{
lines of code to be executed
}
OR
document.getElementById(id).addEventListener("click", functionname)
Hãy tự mình thử ví dụ này:
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>
