특정 태그에 데이터를 지정하는 방법 data 속성, defer 속성

data속성으로 해당 데이터 가져오는 방법

 

문법

<태그 data-이름="데이터"></태그>

 

<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana ">바나나</div>

const els = document.querySelectorAll('div')  <!--div에 대한 요소를 모두 찾아서 변수에 저장 -->
els.forEach(el => {
  console.log(el.dataset.fruitName);  
  <!--dataset이라는 명령을 이용하여 fruit-name이라는 이름에 데이터를 불러옴-->
  <!--(-)하이픈 기호대신 첫문자를 대문자로 바꿔서 입력해야한다고 함-->
});

 

결과

defer속성

필요성: 자바스크립트가 상단에 명시되어 있는경우 body태그 부분에 태그값을 못가져와 작동을 안될때 사용

 

SCRIPT요소에 defer속성은, HTML 구조가 준비된 후(문서 분석 이후)에 JavaScript를 해석하겠다는 의미가 있다.

<script defer src="./main.js"></script>

외부에 있는 JS파일을 사용할 때만 해당 속성을 이용할 수 있다고 한다.