-
DOM 조작 - 속성 노드의 생성, 수정, 삭제 2프론트엔드/DOM 2020. 10. 16. 05:22
우리는 다른 게시글을 통해 속성 노드의 생성, 수정, 삭제를 배웠다.
요소 노드에 속성 노드를 추가하기 위해선 다음과 같은 메서드를 사용했다.
속성 노드 확인 : hasAttribute() 메서드, getAttribute() 메서드,
속성 노드 생성 : setAttribute() 메서드
속성 노드 삭제 : removeAttribute() 메서드
예를 들어서 아무 속성도 없는 요소 노드에 글자에 색상도 넣고 싶다면 다음과 같이 코드를 짜면 된다.
<body> <p> 테스트 문장입니다. </p> </body> <script> var test = document.getElementsByTagName('p')[0]; // html에서 해당 요소 모두 선택 test.setAttribute("style","color : red; font-size : 50px"); </script>위 코드를 실행하면 아래와 같이 변한다.
위 코드를 쓰면 한 번에 여러 속성값 전달할 수도 있다.
1. 속성 노드의 간략화
하지만 문제는 이렇다.
저렇게 쓸 경우 한 두개의 요소 노드 컨트롤은 어렵지 않다.
하지만 수백개의 요소 노드의 색상을 한 번에 바꿔야 한다면 어떻게 해야할까?
매번 코드를 칠 수도 없고 가독성도 엉망이 될 것이다.
이럴 땐 <style> 태그 안에 여러 속성들을 그룹화하여 아이디, 클래스 별로 미리 설정해두면 된다.
이게 무슨 말이냐면 우선 코드를 보자.
<!DOCTYPE html> <head> <style> /* red 클래스에 해당 내용 적용 */ .red{ color: red; font-size: 50px; font-weight: bold; } /* blue 클래스에 해당 내용 적용 */ .blue{ color: blue; font-size: 45px; font-weight: bold; } /* green 클래스에 해당 내용 적용 */ .green{ color: green; font-size: 45px; font-weight: bold; } </style> </head> <body> <p> 테스트 문장입니다. </p> </body> <script> var test = document.getElementsByTagName('p')[0]; // html에서 해당 요소 모두 선택 test.setAttribute("class", "red"); // red 클래스 추가 test.setAttribute("class", "blue"); // blue 클래스 추가 test.setAttribute("class", "green"); // green 클래스 추가 </script> </html>위 코드는 <p> 태그에 적용할 여러 속성값을 <style> 태그 내에서 미리 그룹화하여 묶어뒀다.
그리고 해당 클래스를 추가하면 CSS가 해당 클래스를 가진 요소 노드에 적용되는 것이다.
참고로 red 클래스를 <p> 태그에 추가하면 다음과 같이 변한다.
콘솔창을 통해 <p> 태그가 어떻게 변했는지 살펴보자.
'setAttribute()' 메서드를 통해 태그 자체에 직접 속성값을 모두 넣는 것보다 깔끔하다.
2. 클래스 관련 프로퍼티와 메서드 사용
위와 같이 직접적으로 클래스, 아이디값을 속성으로 추가하는 경우도 있다.
HTML로 웹페이지를 짜보면 알겠지만 즉흥적으로 클래스, 아이디를 부여하는 경우는 적다.
보통 미리 설정해두는 경우가 많다.
그럴 때 'class'를 많이 쓰게 되는데 이번엔 'class' 속성을 다룰 수 있는 각종 메서드를 공부한다.
<!DOCTYPE html> <head> <style> /* red 클래스에 해당 내용 적용 */ .red{ color: red; font-size: 50px; font-weight: bold; } /* blue 클래스에 해당 내용 적용 */ .blue{ color: blue; font-size: 45px; font-weight: bold; } /* green 클래스에 해당 내용 적용 */ .green{ color: green; font-size: 45px; font-weight: bold; } </style> </head> <body> <p class="test"> 테스트 문장입니다. </p> </body> <script> var test = document.getElementsByTagName('p')[0]; </script> </html>위에서 봤던 코드와 거의 동일하지만 <p> 태그에 'class' 속성을 미리 부여했다.
이때 이러한 'class'를 컨트롤하기 위해선 'ClassList'라는 프로퍼티를 이용하면 된다.
사용법은 다음과 같다.
<script> var test = document.getElementsByTagName('p')[0]; test.classList; </script>이렇게 변수명에 프로퍼티를 붙여서 써주면 사용할 준비가 다됐다.
이제 클래스를 추가, 수정, 삭제하는 메서드를 써보자.
우선 클래스를 추가하는 add() 메서드다.
<script> var test = document.getElementsByTagName('p')[0]; test.classList; test.classList.add('red'); // red 클래스 추가 </script>위와 같이 add 메서드의 파라미터 값을 css에 지정해둔 클래스명 입력하면 해당 태그에 css가 적용된다.
CSS가 적용되면 다음과 같이 문장이 변한다.
다음은 replace() 메서드로 클래스를 바꿔보자.
<script> var test = document.getElementsByTagName('p')[0]; test.classList; test.classList.add('red'); // red 클래스 추가 test.classList.replace('red', 'blue'); // red 클래스를 blue 클래스로 변경 </script>replace의 파라미터는 두개를 인자로 받는다.
위 코드는 red와 blue를 인자로 넣었는데 이로서 <p> 태그의 클래스는 red에서 blue로 바뀐다.
이제 클래스를 삭제해주는 remove() 메서드를 써보자.
<script> var test = document.getElementsByTagName('p')[0]; test.classList; test.classList.add('red'); // red 클래스 추가 test.classList.replace('red', 'blue'); // red 클래스를 blue 클래스로 변경 test.classList.remove('blue'); </script>위와 같이 파라미터에 삭제하길 원하는 클래스 명을 넣으면 해당 클래스가 삭제된다.
여기선 red가 blue로 대체하고 blue를 삭제했으므로 이제 <p> 태그는 클래스가 없게 된다.
이를 적용하면 다음과 같이 변한다.
'프론트엔드 > DOM' 카테고리의 다른 글
DOM 조작 - 컨텐츠 추가하기 (0) 2020.10.16 DOM 조작 - 텍스트 노드에 대한 접근 / 수정 2 (0) 2020.10.16 DOM 조작 - 속성 노드의 생성, 삭제 (0) 2020.10.16 DOM 조작 - 텍스트 노드에 대한 접근 / 수정 (0) 2020.10.13 DOM - 노드의 관계를 통한 접근 (0) 2020.10.07
