Các thuộc tính thường dùng trong DOM Document

Tiếp tục về DOM chúng ta sẽ tìm hiểu về các thuộc tính hay dùng trong đối tượng document.

1, Thuộc tính activeElement.

-Thuộc tính này có tác dụng trả về đối tượng HTML đang focus.

VD:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>toidicode.com</title>
	<link rel="stylesheet" href="">
</head>

<body onclick="getActive()">
	<div>Click vào <b>button</b> hoặc <b>input</b> để xem kết quả</div>
	<input type="text" value="Toidicode.com">
	<br/>
	<button>button</button>
	<p id='result'></p>
	<script type="text/javascript">
		function getActive()
		{
            //lấy ra thẻ đang được focus
			var name = document.activeElement.tagName;
            // hiển thị
			document.getElementById('result').innerText = name;
		}
	</script>
</body>

</html>

Xem Kết Quả

2, Thuộc tính anchors.

-Thuộc tính này trả về một mảng đối tượng các thẻ a trong trang (không chứa href).

VD:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>toidicode.com</title>
	<link rel="stylesheet" href="">
</head>

<body>
	<p>click vào <em>get</em> để xem kết quả</p>
	<a name="toidicode">Toidicode</a><br>
	<a name="facebook">facebook</a><br>
	<button onclick="getA()" >GET</button>
	<p id='result'></p>
	<script type="text/javascript">
		function getA()
		{
			//
			var length = document.anchors.length;
			document.getElementById('result').innerText = length;
		}
	</script>
</body>

</html>

Xem Kết Quả

3, Thuộc tính Links.

-Trả về một mảng các đối tượng chứa các thẻ a, area có thuộc tính href trong trang.

VD:

<!DOCTYPE html>
<html>
<body>

<img  width="145" height="126" alt="toidicode" usemap ="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="http://toidicode.com" alt="toidicode">
  <area shape="circle" coords="90,58,3" href="http://toidicode.com" alt="toidicode">
  <area shape="circle" coords="124,58,8" href="http://toidicode.com" alt="toidicode">
</map>

<p>
  <a href="http://toidicode.com/tu-hoc-html-7">HTML</a><br>
  <a href="http://toidicode.com/tu-hoc-css-8">CSS</a>
</p>

<p>Click vào GET để xem kết quả</p>

<button onclick="myFunction()">GET</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.links.length;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Xem Kết Quả

4, Thuộc tính URL.

-Trả về đường dẫn của trang hiện tại.

VD:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>toidicode.com</title>
	<link rel="stylesheet" href="">
</head>

<body>
	<p>click vào <em>GET</em> để xem kết quả</p>
	<button onclick="getA()" >GET</button>
	<p id='result'></p>
	<script type="text/javascript">
		function getA()
		{
			var length = document.URL;
			document.getElementById('result').innerText = length;
		}
	</script>
</body>

</html>

Xem Kết Quả

5, Thuộc tính title.

-Trả về tiêu đều của trang hiện tại.

VD:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>toidicode.com</title>
	<link rel="stylesheet" href="">
</head>

<body>
	<p>click vào <em>GET</em> để xem kết quả</p>
	<button onclick="getA()" >GET</button>
	<p id='result'></p>
	<script type="text/javascript">
		function getA()
		{
			var title = document.title;
			document.getElementById('result').innerText = title;
		}
	</script>
</body>

</html>

Xem Kết Quả

6, Thuộc tính scripts.

-Trả về một mảng đối tượng chứa các thẻ script trong trang.

VD:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>toidicode.com</title>
	<link rel="stylesheet" href="">
</head>

<body>
	<p>click vào <em>GET</em> để xem kết quả</p>
	<button onclick="getA()" >GET</button>
	<p id='result'></p>
	<script type="text/javascript">
		function getA()
		{
			var sum = document.scripts.length;
			document.getElementById('result').innerText = 'Có ' + sum + ' thẻ script';
		}
	</script>
</body>

</html>

Xem Kết Quả

7, Thuộc tính readyState.

-Trả về trạng thái của trang. Bao gồm 4 trạng thái sau:

uninitialized: Trang chưa được tải.
loading: Trang đang được tải.
loaded: Trang đã được tải.
interactive: Trang đã tải xong nhưng thứ cần thiết.
complete: Trang đã được tải đầy đủ nội dung.

VD:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>toidicode.com</title>
	<link rel="stylesheet" href="">
</head>

<body>
	<p>click vào <em>GET</em> để xem kết quả</p>
	<button onclick="getA()" >GET</button>
	<p id='result'></p>
	<script type="text/javascript">
		function getA()
		{
			var status = document.readyState;
			document.getElementById('result').innerText = 'Trạng thái của trang: ' + status;
		}
	</script>
</body>

</html>

Xem Kết Quả

8, Thuộc tính images.

- Trả về một mảng đối tượng chứa các thẻ img trong trang.

VD:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>toidicode.com</title>
	<link rel="stylesheet" href="">
</head>

<body>
	<p>click vào <em>GET</em> để xem kết quả</p>
	<img  alt="toidicode">
	<img  alt="toidicode">
	<img  alt="toidicode">
	<img  alt="toidicode">
	<br>
	<button onclick="getA()" >GET</button>
	<p id='result'></p>
	<script type="text/javascript">
		function getA()
		{
			var length = document.images.length;
			document.getElementById('result').innerText = 'Số thẻ img : ' + length;
		}
	</script>
</body>

</html>

Xem Kết Quả

9, Lời kết.

-Như vậy mình đã giới thiệu đến mọi người một số thuộc tính thường dùng trong đối tượng document rồi, tuy nhiên trong đối tượng document này còn rất là nhiều các thuộc tính khác mà mình chưa giới thiệu. Các bạn ai quan tâm có thể xem tại đây.