Bài 15: Các thuộc tính thường dùng trong DOM Document
Bài 15: 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, […]
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>
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>
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>
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>
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>
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>
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>
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>
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.
Lượt xem : 228
