Thứ Năm, 23 tháng 1, 2014
DOM yếu tố
Trang này dạy bạn làm thế nào để tìm và truy cập các yếu tố HTML trong một trang HTML.
Tìm HTML Elements
Thông thường, với JavaScript, bạn muốn thao tác các phần tử HTML.
Để làm như vậy, bạn phải tìm các yếu tố đầu tiên. Có một vài cách để làm điều này:
- Tìm kiếm các phần tử HTML bằng id
- Tìm kiếm các phần tử HTML bằng tên thẻ
- Tìm kiếm các phần tử HTML bằng tên lớp
- Tìm kiếm các phần tử HTML bằng bộ sưu tập đối tượng HTML
Tìm HTML yếu tố của Id
Cách dễ nhất để tìm các phần tử HTML trong DOM, là bằng cách sử dụng các yếu tố id.
Ví dụ này cho thấy các phần tử với id = "intro":
Ví dụ
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
<script>
x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");
</script>
</body>
</html>
Thử nó cho mình »
Nếu phần tử được tìm thấy, phương pháp này sẽ trở lại các yếu tố như một đối tượng (trong x).
Nếu phần tử không tìm thấy, x sẽ chứa null.
Tìm HTML yếu tố của Tag Tên
Ví dụ này cho thấy các phần tử với id = "chính", và sau đó tìm tất cả các yếu tố <p> bên trong "chính":
Ví dụ
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('First paragraph inside "main" is ' + y[0].innerHTML);
</script>
</body>
</html>
Thử nó cho mình »
Tìm HTML yếu tố của Class Name
Nếu bạn muốn tìm tất cả các phần tử HTML với tên cùng một lớp. Sử dụng phương pháp này:
document.getElementsByClassName("intro");
Ví dụ trên trả về một danh sách của tất cả các yếu tố với class = "intro".
 | Việc tìm kiếm các yếu tố theo tên lớp không làm việc trong Internet Explorer 5,6,7 và 8. |
|---|
Tìm HTML yếu tố của HTML Object Bộ sưu tập
Ví dụ này tìm thấy các yếu tố hình thức với id = "frm1", trong bộ sưu tập các hình thức, và hiển thị tất cả các giá trị phần tử:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Try it" button to return the value of each element in the form.</p>
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("frm1");
var txt = "";
for (var i=0;i<x.length;i++)
{
txt = txt + x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>
Thử nó cho mình »
Các bộ sưu tập đối tượng HTML sau đây đều lấy từ:
- document.anchors
- document.forms
- document.images
- document.links
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét