a태그 링크스타일

외부링크에만 스타일 설정하기

외부링크는 조건
1. href에 ://가 포함되어 있어야 합니다.
2. http://internal.com으로 시작하지 않아야 합니다.

<a name="list">the list</a>
<ul>
  <li><a href="http://google.com">http://google.com</a></li>
  <li><a href="/tutorial">/tutorial.html</a></li>
  <li><a href="local/path">local/path</a></li>
  <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
  <li><a href="http://nodejs.org">http://nodejs.org</a></li>
  <li><a href="http://internal.com/test">http://internal.com/test</a></li>
</ul>

<script>
  // setting style for a single link
  let link = document.querySelector('a');
  link.style.color = 'orange';
</script>

document.querySelectorAll('a'); 컬렉션을 반복순회하면서 href속성값 또는 프로퍼티값을 확인하여 외부링크에만 스타일을 설정하면 된다.

href는 내부링크일경우 태그속성값과 객체프로퍼티값이 달라짐을 유의해야 한다.
따라서 태그속성값에 접근해야 한다.

해답1

let links = document.querySelectorAll("a");

for (const link of links) {
  let href = link.getAttribute('href');
  
  if( href && href.indexOf('://') != -1 ){
    link.style.color = "orange";
  }

}

href속성이 없으면 null이 반환되기때문에 null에 문자열메소드를 사용할 수 없다.

외부링크를 찾기위해 ://문자열을 indexOf메소드를 사용했다.

해답2

let links = document.querySelectorAll("a");

for (const link of links) {
  let href = link.getAttribute('href');

  if( !href || href.startsWith('http://internal.com') || !href.includes('://')){
    continue;
  }
  
  link.style.color = "orange";

}

indexOf는 위치를 찾는 메소드이기때문에 위와같이 존재여부만을 알기위해서는 includes메소드를 사용하는 것이 좋다.

해답3

let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);
links.forEach(link => link.style.color = 'orange');

외부링크 조건을 CSS로 구현할 수 있는지 부터 생각이 들어야 한다.