어트리뷰트
-
DOM 조작 - 속성 노드의 생성, 수정, 삭제 2프론트엔드/DOM 2020. 10. 16. 05:22
우리는 다른 게시글을 통해 속성 노드의 생성, 수정, 삭제를 배웠다. 요소 노드에 속성 노드를 추가하기 위해선 다음과 같은 메서드를 사용했다. 속성 노드 확인 : hasAttribute() 메서드, getAttribute() 메서드, 속성 노드 생성 : setAttribute() 메서드 속성 노드 삭제 : removeAttribute() 메서드 예를 들어서 아무 속성도 없는 요소 노드에 글자에 색상도 넣고 싶다면 다음과 같이 코드를 짜면 된다. 테스트 문장입니다. 위 코드를 실행하면 아래와 같이 변한다. 위 코드를 쓰면 한 번에 여러 속성값 전달할 수도 있다. 1. 속성 노드의 간략화 하지만 문제는 이렇다. 저렇게 쓸 경우 한 두개의 요소 노드 컨트롤은 어렵지 않다. 하지만 수백개의 요소 노드의 색상을 ..
-
DOM 조작 - 속성 노드의 생성, 삭제프론트엔드/DOM 2020. 10. 16. 04:23
HTML 조작시 어트리뷰트(attribute) 즉 속성값을 이용해야하는 경우가 존재한다. 단순히 텍스트만 수정한다면 굳이 속성값을 이용할 필요가 없을지 모른다. 하지만 HTML 컨텐츠에 색상을 입히거나 다양한 효과를 주고 싶다면 속성값을 이용하게 된다. 사실 속성값은 그 종류가 굉장히 다양하지만 몇 가지만 알면 충분히 활용이 가능하다. 1. 어트리뷰트 노드 접근하기 위와 같은 HTML의 태그가 있다고 생각해보자. 이 태그를 선택하기 위해선 아래처럼 'getElementsByTagName' 메서드를 이용하면 된다. 하지만 뭔가 조잡하다. 게다가 'getElementsByTagName'메서드는 태그의 내용이 바뀌면 선택 내용도 바뀐다. 그렇다면 해당 태그가 가진 'id' 속성값 또는 'class' 속성값을 ..