Thứ Năm, 23 tháng 1, 2014
JavaScript HTML DOM Navigation
Với DOM HTML, bạn có thể điều hướng các cây nút sử dụng các mối quan hệ nút.
DOM nút
Theo tiêu chuẩn W3C HTML DOM, tất cả mọi thứ trong một tài liệu HTML là một nút:
- Toàn bộ tài liệu là một nút tài liệu
- Mọi phần tử HTML là một nút phần tử
- Các văn bản bên trong các phần tử HTML là các nút văn bản
- Mỗi thuộc tính HTML là một nút thuộc tính
- Tất cả các ý kiến được các nút bình luận
Với DOM HTML, tất cả các nút trong cây nút có thể được truy cập bằng JavaScript.
Các nút mới có thể được tạo ra, và tất cả các nút có thể được sửa đổi hoặc xóa.
Các mối quan hệ nút
Các nút trong cây nút có mối quan hệ thứ bậc với nhau.
Các điều khoản cha mẹ, con, anh chị em và được sử dụng để mô tả các mối quan hệ.
- Trong một cây nút, nút đầu được gọi là root (hoặc nút gốc)
- Tất cả các nút có chính xác một phụ huynh, ngoại trừ thư mục gốc (mà không có cha mẹ)
- Một nút có thể có một số trẻ em
- Anh chị em ruột (anh chị em) là các nút với phụ huynh cùng
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
Từ HTML trên bạn có thể đọc:
- <html> là nút gốc
- <html> không có cha mẹ
- <html> là cha của <head> và <body>
- <head> là con đầu tiên của <html>
- <body> là con cuối cùng của <html>
và:
- <head> có một đứa con: <title>
- <title> có một đứa con (một nút văn bản): "DOM Hướng dẫn"
- <body> có hai con: <h1> và <p>
- <h1> có một đứa con: "DOM Bài học đầu tiên"
- <p> có một đứa trẻ: "Xin chào thế giới!"
- <h1> và <p> là anh chị em ruột
Điều hướng giữa các nút
Bạn có thể sử dụng các thuộc tính nút sau để Navigat giữa các nút với JavaScript:
- parentNode
- childNodes [ nodenumber ]
- firstChild
- lastChild
- nextSibling
- previousSibling
Cảnh báo!
Một lỗi phổ biến trong chế biến DOM là để mong đợi một nút phần tử có chứa văn bản.
Trong ví dụ này: <title>DOM Tutorial</title>, các nút phần tử <title> không chứa văn bản. Nó chứa một text node có giá trị "DOM Hướng dẫn".
Giá trị của nút văn bản có thể được truy cập bằng của nút innerHTML tài sản, hoặc nodeValue .
Các nút con và giá trị Node
Ngoài các thuộc tính innerHTML, bạn cũng có thể sử dụng childNodes và tài sản nodeValue để có được nội dung của một phần tử.
Các mã sau đây được giá trị của các yếu tố <p> với id = "intro":
Ví dụ
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
Thử nó cho mình »
Trong ví dụ trên, getElementById là một phương pháp, trong khi childNodes và nodeValue là tài sản.
Trong hướng dẫn này chúng tôi sử dụng các thuộc tính innerHTML. Tuy nhiên, học tập phương pháp trên rất hữu ích cho sự hiểu biết cấu trúc cây và chuyển hướng của DOM.
Sử dụng tài sản firstChild là giống như sử dụng childNodes [0]:
Ví dụ
<html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").firstChild.nodeValue;
document.write(txt);
</script>
</body>
</html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").firstChild.nodeValue;
document.write(txt);
</script>
</body>
</html>
Thử nó cho mình »
DOM gốc nút
Có hai tính chất đặc biệt cho phép truy cập vào các tài liệu đầy đủ:
- document.documentElement - Các tài liệu đầy đủ
- document.body - Cơ thể của tài liệu
Ví dụ
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
Thử nó cho mình »
Các nodeName tài sản
Tài sản nodeName chỉ định tên của một nút.
- nodeName là chỉ đọc
- nodeName của một nút phần tử cũng giống như tên thẻ
- nodeName của một nút thuộc tính là tên thuộc tính
- nodeName của một nút văn bản luôn luôn là # văn bản
- nodeName của nút tài liệu luôn luôn là tài liệu #
Lưu ý: nodeName luôn luôn chứa tên tag chữ hoa của một phần tử HTML.
Các nodeValue tài sản
Tài sản nodeValue xác định giá trị của một nút.
- nodeValue các nút phần tử là không xác định
- nodeValue cho các nút văn bản là văn bản chính nó
- nodeValue cho các nút thuộc tính là giá trị thuộc tính
Các nodeType tài sản
Tài sản nodeType trả về kiểu của nút. nodeType chỉ được đọc.
Các loại nút quan trọng nhất là:
| Element type | NodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét