04/10/2018, 17:05
[BÀI 12] THUỘC TÍNH TRONG DOM
Các thuộc tính cơ bản thường dùng trong DOM . Chúng ta cùng đi tìm hiểu innerHTML Trả về mã HTML bên trong phần tử hiện tại, tất cả các đánh dấu và nội dung bên trong. Bạn cũng có thể gán đánh dấu và nội dung cho phần tử. Ví du: Hiển thị nội dung bên trong thẻ <p>. ...
Các thuộc tính cơ bản thường dùng trong DOM . Chúng ta cùng đi tìm hiểu
innerHTML
Trả về mã HTML bên trong phần tử hiện tại, tất cả các đánh dấu và nội dung bên trong. Bạn cũng có thể gán đánh dấu và nội dung cho phần tử.
Ví du:
Hiển thị nội dung bên trong thẻ <p>.
<script type="text/javascript">
var dev = document.getElementById("test").innerHTML;
document.getElementById("demo").innerHTML = dev;
</script>
<p id="test">Hello.Welcome to DevPro</p>
<p id="demo"></p>
</body>
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> var dev = document.getElementById("test").innerHTML; document.getElementById("demo").innerHTML = dev; </script> <p id="test">Hello.Welcome to DevPro</p> <p id="demo"></p> </body> |
Thay thế nội dung bên trong thẻ <p>
<body>
<p id="test">Hello. Welcom To DevPro</p>
<div id="demo">Can We Help You</div>
<script type="text/javascript">
document.getElementById("test").innerHTML = "Content";
document.getElementById("demo").innerHTML = " 1 - 2 - 3 - 4 ";
</script>
</body>
|
1 2 3 4 5 6 7 8 |
<body> <p id="test">Hello. Welcom To DevPro</p> <div id="demo">Can We Help You</div> <script type="text/javascript"> document.getElementById("test").innerHTML = "Content"; document.getElementById("demo").innerHTML = " 1 - 2 - 3 - 4 "; </script> </body> |
Attributes
Thuộc tính này trả về tập các thuộc tính như id, name, type, title, href ….
Ví dụ:
<body>
<script>
function myFunction() {
var x = document.getElementById("btn").attributes[0].name;
document.getElementById("demo").innerHTML = x;
}
</script>
<input type="button" id="btn" onclick="myFunction()" value="CLick here">
<p id="demo"></p>
</body>
|
1 2 3 4 5 6 7 8 9 10 |
<body> <script> function myFunction() { var x = document.getElementById("btn").attributes[0].name; document.getElementById("demo").innerHTML = x; } </script> <input type="button" id="btn" onclick="myFunction()" value="CLick here"> <p id="demo"></p> </body> |
=>Để lấy tên thuộc tính ta dùng thêm thuộc tính “name”, và để lấy giả trị của thuộc tính chúng ta dùng thêm thuộc tính “value”.
className
Cho biết thông tin về tên thuộc tính class của phần tử, bạn còn có thể gán class cho phần tử bạn muốn.
<head>
<style>
.mystyle {awidth: 500px;height: 100px;background-color: #FFDCA8;
text-align: center;font-size: 25px;color: white;margin-bottom: 20px;}
</style>
</head>
<body>
<script>
function myFunction() {
document.getElementById("test").className = "mystyle";
}
</script>
<div id="test">
DevPro - 147 Mai Dich, Cau Giay, HN
</div>
<input type="button" value="Click Here" onclick="myFunction()">
</body>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<head> <style> .mystyle {awidth: 500px;height: 100px;background-color: #FFDCA8; text-align: center;font-size: 25px;color: white;margin-bottom: 20px;} </style> </head> <body> <script> function myFunction() { document.getElementById("test").className = "mystyle"; } </script> <div id="test"> DevPro - 147 Mai Dich, Cau Giay, HN </div> <input type="button" value="Click Here" onclick="myFunction()"> </body> |
