HTML DOM 快速導覽 - 文件物件 document 的屬性 anchors

document.anchors 回傳文件中所有連結所集合成的 HTMLCollection 物件 (object) 。



舉例如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function init() {
    var t = document.getElementById("title");
    var i, li, newA;
    for (i = 0; i < document.anchors.length; i++) {
        li = document.createElement("li");
        newA = document.createElement('a');
        newA.href = "#" + document.anchors[i].name;
        newA.innerHTML = document.anchors[i].text;
        li.appendChild(newA);
        t.appendChild(li);
    }
}
 
/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：document003.js
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 */


此例取得文件中所有連結後，另外做成一份連結清單，第 4 行
4
document.anchors.length


length 屬性 (attributes) 為連結的數量，第 7 行
7
newA.href = "#" + document.anchors[i].name;


name 屬性為存取連結中的 name 屬性，第 8 行
8
newA.innerHTML = document.anchors[i].text;


text 屬性為連結的文字內容。


我們以下面的 HTML 文件載入
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="document003.js" type="text/javascript"></script>
</head>
<body onload="init();">
<h1>Title</h1>
<ul id="title"></ul>
<a name="demo1"><h1>demo1</h1></a>
<ul>
<li>demo1_1</li>
<li>demo1_2</li>
</ul>
<a name="demo2"><h1>demo2</h1></a>
<ul>
<li>demo2_1</li>
<li>demo2_2</li>
</ul>
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：document003.html
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (broswer) 開啟，首先，結果如下



中英文術語對照
物件object
屬性attribute
瀏覽器broswer


您可以繼續參考
基本概念
文件物件 document


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/document.anchors
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)