자바스크립트 탭) HTML5의 data-속성과 getAttribute()

 

안녕하세요 찐망고입니다.

 

이번 포스팅에서는 자바스크립트의 getAttribute() 메서드와 HTML5의 data- 속성을 활용하여,

마우스 이벤트에 반응하는 탭 구조를 만드는 방법을 소개하겠습니다.

 

아래 그림을 볼까요?

노보셀바이오 Research & Develope섹션

노보셀바이오 Research & Develope섹션

 

오른쪽 탭에 마우스를 올릴 때마다 왼쪽의 이미지가 바뀌는데요.

HTML5의 data속성과 자바스크립트의 getAttribute() 메서드를 이용한 코드를 포스팅해볼까 해요

 

일단 getAttribute()는 JavaScript에서 사용되는 메서드로, HTML 요소의 속성(attribute)을 가져올 때 사용되는데요.

예를 들어, HTML 태그에 id, class, href 같은 속성이 있을 때, 해당 속성의 값을 가져오는 데 유용합니다.

element.getAttribute(attributeName);

• element: 속성을 가져오려는 HTML 요소를 의미합니다.
• attributeName: 가져오려는 속성의 이름을 문자열로 지정합니다.

<a id="myLink" href="https://example.com" target="_blank">Example Link</a>

const link = document.getElementById('myLink');
const hrefValue = link.getAttribute('href');
console.log(hrefValue); // 출력: "https://example.com"

 

 

위 코드에서 link.getAttribute('href')를 사용해 a 태그의 href 값을 가져옵니다.

 

 

data- 속성은 HTML5에서 도입된 커스텀데이터 속성입니다.

개발자가 HTML요소에 추가적인 정보를 저장할 수 있도록 해주는 기능인데요.

data-로 시작하는 모든 속성을 의미합니다. JavaScript를 통해서도 쉽게 접근가능하고요.

<element data-속성명="값"></element>

 

• 속성명: data- 뒤에 임의로 지정할 수 있는 속성 이름. 소문자로 쓰는 걸 추천합니다.
• 값: 해당 속성에 저장할 데이터.

 

<div id="user" data-user-id="12345" data-user-role="admin"></div>

 

1. getAttribute()로 접근하는 방법:

const userDiv = document.getElementById('user');
const userId = userDiv.getAttribute('data-user-id');
console.log(userId); // 출력: "12345"

 

2. dataset을 사용하여 접근하는 방법:

const userDiv = document.getElementById('user');
console.log(userDiv.dataset.userId); // 출력: "12345"
console.log(userDiv.dataset.userRole); // 출력: "admin"

 

2-1. dataset을 사용하여 값을 수정하는 방법:

userDiv.dataset.userId = "67890";
console.log(userDiv.dataset.userId); // 출력: "67890"

 

 

이젠 탭을 만들어 봅시다 CSS는 생략할게요~

 

HTML

각 li에 data-img라는 커스텀 속성을 추가했고, li에 마우스가 올라갈 때 변경될 이미지경로를 저장합니다.

첫 번째 li에 on클래스가 적용되어 있습니다.

<div id="wrap">
   <main>
      <section class="sec rnd-sec">
        <div class="inner">
          <div class="tit-box">
            <h2>Research & Develope</h2>
            <p>노보셀바이오는 끊임없는 연구개발로 기술경쟁력에서 앞서갑니다.</p>
          </div>
          <div class="con-box">
            <div class="left-box">
              <span><img src="img/mcnt3_img1.jpg" alt="연구개발이미지" id="main-image"></span>
            </div>
            <ul class="right-box">
              <li class="on" data-img="img/mcnt3_img1.jpg">
                <a href="#">
                  <div class="tab-box">
                    <h3>R&D Principle</h3>
                    <p>노보셀바이오는 끊임없는 연구개발로 기술경쟁력에서 앞서갑니다.</p>
                  </div>
                </a>
              </li>
              <li data-img="img/mcnt3_img2.jpg">
                <a href="#">                  
                  <div class="tab-box">
                    <h3>임상Time Table</h3>
                    <p>객관적으로 인증받은 노보셀바이오는 연구개발 현황을 소개합니다.</p>
                  </div>
                </a>
              </li>
              <li data-img="img/mcnt3_img3.jpg">
                <a href="#">
                  <div class="tab-box">
                    <h3>R&D Global Strategy</h3>
                    <p>노보셀바이오의 가능성을 세계가 주목하고 있습니다.</p>
                  </div>
                </a>
              </li>
            </ul>
          </div> 
          <a href="#" class="more"><span>view more</span></a>
        </div>
      </section>
    </main>
</div>

 

 

JS코드 

const listItems = document.querySelectorAll(".right-box li");
const mainImage = document.getElementById("main-image")

listItems.forEach((li) => {
  li.addEventListener("mouseenter", function() {
    //li에 on클래스 제거
    listItems.forEach(item => item.classList.remove("on"));
	
    //마우스를 올리면 on클래스 추가
    this.classList.add("on");

    //data-img속성에서 이미지 경로를 가져와서 mainImage의 src속성을 변경
    const newImgSrc = this.getAttribute("data-img");
    mainImage.src = newImgSrc;
  })
})

 

 

아래 결과물을 확인해 보세요

 

See the Pen js)getAttribute사용하기 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

참고로 getAttribute()는 HTML 코드에 정의된 속성 값을 가져오는 거지,

DOM 속성 값을 직접 가져오는 건 아니라서

DOM에서 element.href로 접근하는 경우와 getAttribute('href')로 접근하는 값이 다를 수 있습니다.

getAttribute()와 DOM 속성(element.href 같은 직접 접근)의 차이는 주로

동적으로 변하는 속성 값과 기본적으로 정의된 속성 값에서 발생합니다.

HTML 속성과 DOM 속성의 차이

• HTML 속성은 우리가 HTML 문서에 작성하는 그 상태 그대로의 값을 뜻합니다.  예를 들어, <a> 태그에 href 속성을 정의하면, 그 값은 처음 HTML 코드에 정의된 그대로 있겠죠
• DOM 속성은 JavaScript에서 해당 요소가 브라우저에 의해 파싱되고 나서 동적으로 변할 수 있는 값을 의미합니다. DOM에서의 속성은 브라우저가 자동으로 변환하거나 다르게 해석하는 경우가 많겠죠

차이를 이해하는 예시:

<a id="myLink" href="/mypage">Go to My Page</a>

1. getAttribute() 사용

HTML에 정의된 href 속성을 그대로 가져옴: 여기서 /mypage는 HTML에 정의된 그 값을 그대로 반환함

const link = document.getElementById('myLink');
console.log(link.getAttribute('href')); // "/mypage"

 

2. DOM 속성 사용

element.href로 접근하면 브라우저가 그 값을 절대 경로로 변환해서 반환함

console.log(link.href); // "http://yourwebsite.com/mypage"

 

위 코드에서는 href가 현재 페이지의 도메인 경로와 결합되어 절대 URL로 변환된 값이 반환되는 걸 볼 수 있는데요.

이는 브라우저가 처리하는 방식이기 때문에, element.href로 접근할 때는 브라우저가 자동으로 해당 경로를 풀어서

절대 경로로 변환해 주는 거죠

 

 

 

 

 

 

참고사이트

노보셀바이오