-
DOM 조작 - 속성 노드의 생성, 삭제프론트엔드/DOM 2020. 10. 16. 04:23
HTML 조작시 어트리뷰트(attribute) 즉 속성값을 이용해야하는 경우가 존재한다.
단순히 텍스트만 수정한다면 굳이 속성값을 이용할 필요가 없을지 모른다.
하지만 HTML 컨텐츠에 색상을 입히거나 다양한 효과를 주고 싶다면 속성값을 이용하게 된다.
사실 속성값은 그 종류가 굉장히 다양하지만 몇 가지만 알면 충분히 활용이 가능하다.
1. 어트리뷰트 노드 접근하기
위와 같은 HTML의 <p> 태그가 있다고 생각해보자.
이 <p>태그를 선택하기 위해선 아래처럼 'getElementsByTagName' 메서드를 이용하면 된다.
<script> var test = document.getElementsByTagName('p')[0]; // html에서 해당 요소 모두 선택 console.log(test); // "<p> 클래스 테스트 문장입니다. <p>" 출력 </script>하지만 뭔가 조잡하다.
게다가 'getElementsByTagName'메서드는 태그의 내용이 바뀌면 선택 내용도 바뀐다.
그렇다면 해당 태그가 가진 'id' 속성값 또는 'class' 속성값을 이용하는 편이 훨씬 안전하고 편하다.
그렇다면 해당 <p> 태그가 가진 'id', 'class' 등의 속성값을 어떻게 알 수 있을까?
그냥 이렇게 코드를 들여다보면 된다.
<body> <p> 클래스 테스트 문장입니다. </p> </body>하지만 코드가 엄청 길고 해당 내용이 어디있는지 찾기가 힘들다면?
그럴 땐 다음과 같은 메서드를 쓰면 해당 요소가 원하는 속성값을 가졌는지 알 수 있다.
<script> console.log(test.hasAttribute('id')); // false 출력 console.log(test.getAttribute('id')); // null 출력 </script>'hasAttribute()'와 'getAttribute()' 메서드가 그것이다.
두 메서드를 사용하고 파라미터 값으로 알고자 하는 속성값을 입력하면 그 결과를 얻을 수 있다.
'hasAttribute()'는 해당 요소 노드가 해당 속성값을 가졌는지 'true / false'로 판별하여 반환한다.
'getAttribute()'는 해당 요소 노드가 해당 가진 속성값이 어떤 것인지 알려준다.
위 코드로 확인하기엔 'false', 'null'이 나온 것을 보면 해당 요소 노드인 <p> 태그는 'id' 속성이 없다.
그렇다면 이제 <p> 태그에 'id' 값을 부여해보자.
2. 어트리뷰트 노드 생성
앞서 <p> 태그에는 'id'값이 없었다.
이때 해당 요소 노드에 속성 값을 추가하는 건 'setAttribute()'를 사용하면 된다.
<script> var test = document.getElementsByTagName('p')[0]; // html에서 해당 요소 모두 선택 console.log(test.hasAttribute('id')); // false 출력 console.log(test.getAttribute('id')); // null 출력 test.setAttribute('id', 'test'); console.log(test.hasAttribute('id')); // true 출력 console.log(test.getAttribute('id')); // test 출력 var id_test = document.getElementById('test'); console.log(id_test.hasAttribute('id')); // true 출력 console.log(id_test.getAttribute('id')); // test 출력 </script>위와 같이 파라미터를 통해 '속성'과 '속성의 값'을 부여하면 해당 요소 노드에 추가가 된다.
그렇다면 해당 요소 노드의 색상을 바꾸려면 어떻게 해야할까?
이런 문장이 다음과 같이 속성을 추가해주면 아래와 같이 변한다.
<script> id_test.setAttribute('style', 'color: #F55F3E'); </script>'setAttribute()' 메서드로 스타일 속성을 추가하고 컬러 속성값을 줬다.
그리고 이때 해당 요소 노드는 아래와 같은 변화를 가진다.
'setAttribute()' 메서드를 사용하여 실제로 요소 노드에 변화가 온 것을 확인할 수 있다.
3. 어트리뷰트 노드 삭제
'hasAttribute()', 'getAttribute()'을 이용해서 요소 노드의 속성 노드를 확인하는 법을 배웠다.
그리고 'setAttribute()'를 이용해 속성 요소를 생성하는 법을 배웠다.
이제는 삭제하는 것을 배울 시간이다.
삭제는 간단히 말하면 'removeAttribute()' 메서드를 쓰면 된다.
아까와 같은 컬러 스타일이 적용된 <p> 태그를 보자.
그리고 'removeAttribute('속성')'을 이용해 속성을 삭제하자.
<script> id_test.removeAttribute('style'); </script>그러면 아래와 같이 변한다.
개발자 도구의 콘솔 창에서 해당 요소 노드의 변화는 다음과 같다.
'removeAttribute()' 메서드를 이용하니 해당 속성이 삭제된 것을 확인할 수 있다.
'프론트엔드 > DOM' 카테고리의 다른 글
DOM 조작 - 텍스트 노드에 대한 접근 / 수정 2 (0) 2020.10.16 DOM 조작 - 속성 노드의 생성, 수정, 삭제 2 (0) 2020.10.16 DOM 조작 - 텍스트 노드에 대한 접근 / 수정 (0) 2020.10.13 DOM - 노드의 관계를 통한 접근 (0) 2020.10.07 DOM - 요소노드에 대한 접근 (0) 2020.10.07
