Đối tượng document trong JavaScript đại diện cho toàn bộ tài liệu HTML. Show Nội dung chính
Nội dung chính
Khi tài liệu html được tải trong trình duyệt, nó sẽ trở thành một đối tượng document. Nó là phần tử gốc đại diện cho tài liệu html. Nó có các thuộc tính và phương thức. Nhờ sự giúp đỡ của đối tượng document, chúng tôi có thể thêm nội dung động vào trang web. Đối tượng document là thuộc tính của đối tượng window, vì vậy nó có thể được truy cập bằng cách: Hoặc: Theo W3C - "Document Object Model (DOM) - Mô hình đối tượng document (DOM) là giao diện nền tảng và trung lập ngôn ngữ cho phép các chương trình và tập lệnh tự động truy cập và cập nhật nội dung, cấu trúc và css của tài liệu". Các thuộc tính của đối tượng documentHình dưới đây thể hiện các thuộc tính của đối tượng docment.  Các phương thức của đối tượng documentChúng ta có thể truy cập và thay đổi nội dung của trang web bằng các phương thức của đối tượng document. Các phương thức quan trọng của đối tượng document như sau:
Truy cập giá trị trường bằng đối tượng documentTrong ví dụ này, chúng ta sẽ nhận được giá trị của văn bản đầu vào từ người dùng. Ở đây, chúng ta đang sử dụng document.form1.name.value để lấy giá trị của trường name: document: là phần tử gốc đại diện cho tài liệu html. form1 : là tên của biểu mẫu. name : là tên thuộc tính của văn bản đầu vào. value : là thuộc tính, trả về giá trị của văn bản đầu vào. Dưới đây là ví dụ sử dụng đối tượng document: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vi du doi tuong document trong JavaScript</title>
<script type="text/javascript">
function printValue() {
var name = document.form1.name.value;
alert("Welcome: " + name);
}
</script>
</head>
<body>
<form name="form1">
Enter Name: <input type="text" name="name" />
<input type="button" onclick="printValue()" value="Display Name" />
</form>
</body>
</html>
Kết quả: Phương thức Phương thức này là một trong những phương thức phổ biến nhất trong HTML DOM và được sử dụng gần như mọi lúc bạn muốn thao tác (hoặc lấy thông tin từ) một phần tử trên tài liệu của bạn. Trả về
ID phải là duy nhất trong một trang. Tuy nhiên, nếu có nhiều hơn một phần tử với ID được chỉ định tồn tại (trùng ID), phương thức getElementById() trả về phần tử đầu tiên trong mã nguồn. Cú phápvar element = document.getElementById(elementID) Tham số:
Giá trị trả lại: Một đối tượng Ví dụLấy phần tử có var x = document.getElementById("demo"); // Get the element with id="demo"
x.style.color = "red"; // Change the color of the elementHTML <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getElementById example - daipho.com</title>
</head>
<body>
<p id="para">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>
JavaScript function changeColor(newColor) {
var elem = document.getElementById('para');
elem.style.color = newColor;
}Kết quả Tính tương thích của trình duyệt webTrình duyệt trên máy tính
Trình duyệt trên thiết bị di động
Tham khảo:
|
