페이지 하단의 클릭 가능한 링크로 모든 URL을 찾아서 나열합니다.

이미 알고 있듯이 다음을 사용하여 문서의 모든 링크를 가져올 수 있습니다.

var links = document.links;

이제 HTMLCollection이 있습니다. 그것을 반복하고 모든 링크를 표시 할 수 있습니다. 더 나은 레이아웃을 위해 단락 ( p) 에 넣을 수 있습니다 . 이것은 루프입니다.

for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");
    p.appendChild(links[i]);
    document.body.appendChild(p);
}

이제 모든 링크가 페이지 끝에 추가되고 모든 링크가 자체 행에 있으며 클릭 할 수 있습니다. 이것을 시도하십시오.

편집 : 귀하의 의견에 따라 내가 올바르게 이해하면 한 줄을 추가하면됩니다.

for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");

    // the following line is added
    links[i].innerHTML = links[i].href;

    p.appendChild(links[i]);
    document.body.appendChild(p);
}

이 줄은 단순히 링크의 내부 HTML을 속성 값으로 바꿉니다 href.

편집하다:

변수 links는 document.links. 따라서 기존 링크는 원래 위치에서 제거되고 끝에 추가됩니다. document.createElement("a")문서의 모든 링크를 반복하기 때문에 무한 루프를 만드는 것처럼 for 루프에서 새 링크를 만들려고하면 . 변수 links는 document.links생성 된 시점 의 스냅 샷이 아니라이를 가리 킵니다.

배열을 생성하여이 문제를 해결할 수 있습니다.

var links = [];
// populate the array links
for (var j = 0; j < document.links.length; j++) {
    links.push(document.links[j].cloneNode());
}

이제 이것은 페이지에있는 모든 링크의 스냅 샷입니다. 모든 링크가 복제되고 어레이로 푸시됩니다. 이제 for 루프를 실행하면 원래 링크가 제거되지 않습니다.

원래 링크가 다음과 같은 경우 :

<a href="http://example.com" id="example" class="example-class" title="click me">This is an example.</a>

다음과 같이됩니다.

<a href="http://example.com" id="example" class="example-class" title="click me">http://example.com</a>

하지만 원하는 경우 :

<a href="http://example.com">http://example.com</a>

그런 다음 코드를 수정해야합니다.

  
for (var i = 0; i < links.length; i++) {
    var p = document.createElement("p");
    var a = document.createElement("a");
    a.href = links[i].href;
    a.text = links[i].href; // you can use text instead of innerHTML
    p.appendChild(a);
    document.body.appendChild(p);
}
  

출력 스타일을 지정하려면 다음과 같은 클래스를 추가 할 수 있습니다.

p.classList.add("my-css-class");

이것이 당신의 목표를 달성하는 데 도움이되기를 바랍니다.