👇 활용할 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="content">
<h2 class="title">A</h2>
<ul id="list-1">
<li>A-1</li>
<li>A-2</li>
<li>A-3</li>
<li>A-4</li>
</ul>
<h2 class="title">B</h2>
<ul id="list-2">
<li>B-1</li>
<li>B-2</li>
<li>B-3</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>📰 HTML 속성 다루기
요소 노드를 통해 HTML 태그가 가진 속성들을 다룰 수 있다.
1. 속성에 접근하기
Node.'속성'
해당하는 속성의 값을 얻어올 수 있다.
❗ 단, 비표준 속성은 얻어올 수 없다.
class를 얻어올 때는 .className으로 사용한다.
myTag.id
myTag.classNameNode.getAttribute('속성')
해당하는 속성의 값을 얻어올 수 있다.
✔️ 비표준 속성도 얻어올 수 있다.
myTag.getAttribute('href')
myTag.getAttribute('class')2. 속성 추가 / 수정 하기
Node.setAttribute('속성', '값')
해당하는 속성의 값을 설정할 수 있다.
➕ 원래 없던 속성이라면 추가되고
🔄️ 원래 있던 속성이라면 수정된다.
myTag.setAttribute('class', 'list')
myTag.setAttribute('id', 'new')3. 속성 제거하기
Node.removeAttribute('속성')
해당하는 속성을 삭제할 수 있다.
myTag.removeAttribute('href');
myTag.removeAttribute('class'); 🖌️ 스타일 다루기
1. style 프로퍼티 활용하기
element.style.styleName = 'value'; 로 원하는 요소에 스타일을 적용할 수 있다.
❗ 이때, styleName에서 여러 단어를 이어서 만든 속성에는 카멜 표기법을 사용해야 한다.
ex) background-color ➡️ backgroundColor / text-decoration ➡️ textDecoration
예시 코드에서 A-2 중간에 줄을 그으려면 아래처럼 작성하면 된다.
const myTag = document.querySelector('#list-1')
myTag.children[1].style.textDecoration = 'line-through'
😵 style 프로퍼티의 문제점!
- html의 style속성으로 추가되기 때문에, 스타일 우선순위가 높아질 수 있다.
- 같은 스타일을 여러 요소에 적용하려면 같은 코드를 반복해서 작성해줘야 한다.
2. element.className
element의 클래스를 설정할 수 있다.
만약, <div id="div" class="item"> </div> 가 있다면
const myTag = document.querySelector("#div");
myTag.className = 'new'위 코드를 통해 클래스를 item 에서 new 로 변경할 수 있다.
이렇게 div에는 new 클래스에 적용된 스타일이 적용될 것이다.
😵 element.className의 문제점
원래 있던 item 클래스가 new로 변경되므로, 기존 item 에 적용된 스타일이 삭제되버림
즉, 클래스를 하나만 지정하는 경우라면 괜찮지만, 아닌 경우에는 문제가 생길 수 있다.
3. element.classList
element의 클래스 속성값들을 모두 포함하는 유사배열
클래스 속성을 하나씩 다룰 수 있고, 몇 가지 메소드들도 활용할 수 있다.
- classList.add('val') : 클래스에 val을 추가한다
- classList.remove('val') : 클래스에서 val을 삭제한다
- classList.toggle('val') : 클래스에 val이 없다면 추가하고, val이 있다면 삭제한다.
