HTML DOM 앵커 컬렉션

<시간/>

HTML DOM Anchor 컬렉션은 HTML 문서에 있는 모든 앵커 태그()의 컬렉션을 반환하는 데 사용됩니다. 연결된 이름 속성이 있는 경우에만 링크를 계산합니다. 그러나 name 속성은 현재 HTML5에서 더 이상 사용되지 않습니다. 요소는 html 소스 문서에 있는 것과 동일한 순서로 나타납니다.

속성

다음은 Anchor 컬렉션의 속성입니다.

속성	설명
길이	html 문서의 링크 수()를 반환합니다.

방법

Anchor 수집 방법은 다음과 같습니다.

메소드	설명
[색인]	지정된 인덱스의 링크를 반환합니다. 인덱스는 0에서 시작하여 위에서 아래로 순서가 지정됩니다. 항목이 없으면 Null이 반환됩니다.
항목(색인)	지정된 인덱스의 링크를 반환합니다. 인덱스는 0부터 시작합니다. 항목이 없으면 Null이 반환됩니다.
namedItem(id):	지정된 ID를 가진 컬렉션에서 링크를 반환합니다. 항목이 없으면 Null이 반환됩니다.

구문

다음은 구문입니다 -

앵커 수집을 위해.

document.anchors

참고 − 앵커 컬렉션은 읽기 전용이므로 설정할 수 없습니다.

예시

앵커 컬렉션의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<body>
<a name="example">Sample1</a><br>
<a name="example1">Sample2</a><br>
<a name="example2">Sample3</a><br>
<p>Click the button to get first link text in the above list</p>
<button onclick="getCollection()">Collection</button>
<button onclick="getLength()">Length</button>
<p id="sample"></p>
<script>
   function getCollection() {
      var x = document.anchors[0].innerHTML;
      document.getElementById("sample").innerHTML = x;
   }
   function getLength() {
      var x = document.anchors[0].innerHTML.length;
      document.getElementById("sample").innerHTML = x;
   }
</script>
</body>
</html>

출력

다음 출력을 생성합니다 -

"수집" 버튼 클릭 시 -

"길이" 버튼 클릭 시 -

위의 예에서 -

name 속성이 example, example1 및 example2와 같은 세 개의 링크가 있습니다.

<a name="example">Sample1</a><br>
<a name="example1">Sample2</a><br>
<a name="example2">Sample3</a> <br>

그런 다음 getCollection() 및 getLength() 함수를 각각 실행할 수 있는 두 개의 버튼 컬렉션과 길이가 있습니다.

<button onclick="getCollection()">Collection</button>
<button onclick="getLength()">Length</button>

getCollection() 함수는 우리의 경우 Sample1인 0 인덱스 위치에서 앵커 태그 텍스트를 반환합니다. getLength() 함수는 링크 텍스트의 길이를 반환합니다. 여기에서 링크 텍스트는 Sample1이므로 반환되는 길이는 7입니다.