Attribute ?
- HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공한다.
- 글로벌 어트리뷰트 :id , class ,style ,title ,lang ,hidden 등
- HTML 문서가 파싱될때 , 어트리뷰트 하나당 하나의 노드가 생성된다.
- attributes 프로퍼티는 NamedNodeMap 객체에 담겨 요소 노드의 attribute에 저장된다.
( NamedNodeMap 객체 : 유사배열객체 , 이터러블 )
attributes 프로퍼티의 불편한점
- getter만 존재하는 읽기 전용 접근자 프로퍼티이다.
- 따라서 값을 취득하는것은 가능하지만 수정은 불가능하다.
- 값을 취득할때도 유사배열 객체를 다뤄야하기 때문에 불편하다!
▷ 따라서 getAttribute , setAttribute 를 사용하자 !!
그렇다면 어트리뷰트 조작을 하는 메서드에 대해 알아보자!
HTML 어트리뷰트 조작
HTML 어트리뷰트 값 참조
Element.prototype.getAttribute(어트리뷰트이름);
HTML 어트리뷰트 값 변경
Element.prototype.setAttribute(어트리뷰트이름);
HTML 어트리뷰트 값 삭제
Element.prototype.removeAttribute(어트리뷰트이름);
HTML 어트리뷰트가 존재하는지 확인
Element.prototype.hasAttribute(어트리뷰트이름);
어트리뷰트 노드
- HTML 어트리뷰트로 지정한 HTML 요소의 초기상태를 관리한다.
- HTML 요소에 지정한 어트리뷰트 값은 사용자의 입력에 의해 변하지 않으므로 어트리뷰트 값은 언제나 동일하다 .
- setAttribute로 HTML 요소의 초기상태 값을 변경한다.
DOM 프로퍼티
- 사용자가 입력한 최신 상태는 HTML 어트리뷰트에 대응하는 요소노드의 DOM이 관리한다.
- 사용자의 입력에 의한 상태변화에 반응하여 언제나 최신 상태를 유지한다.
- 하지만 getAttribute 메서드로 취득한 HTML의 속성값은 변하지 않고 유지된다.
[예제 - 1]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 어트리뷰트 & DOM 프로퍼티</title>
</head>
<body>
<input id="user" type="text" value="one" />
<script>
const $input = document.querySelector("#user");
$input.value = "two";
console.log($input.value); // 현재 VALUE값
console.log($input.getAttribute("value")); //초기 VALUE 값
</script>
</body>
</html>위 코드를 보면
HTML어트리뷰트는 초기상태값을 관리하기때문에 초기 value값인 one을 출력하고 ,
DOM프로퍼티는 사용자에 입력에 의한 최신 상태를 관리하기에 two를 출력하는것을 알 수 있다.
DOM 프로퍼티와 HTML 어트리뷰트 대응관계
- id 어트리뷰트와 id 프로퍼티는 1대1대응 , 동일한 값으로 연동
- input요소의 value 어트리뷰트는 value 프로퍼티와 1대1대응 , 하지만 value 어트리뷰트는 초기상태를 , value 프로퍼티는 최신상태를 갖는다.
- class 어트리뷰트는 className , classList와 1대1 대응
- textContent 프로퍼티와 대응하는 어트리뷰트는 존재하지 않는다.
- 어트리뷰트 이름은 대소문자 구별 X , 하지만 대응하는 프로퍼티 키는 카멜케이스를 따름
정리
- Attribute : 정적으로 변하지 않음 , HTML 문서 안 기준 의미 EX ) class
- property : 값이 동적으로 변할 수 있음 , HTML DOM 기준 의미 EX ) className
Style 조작
- 모든 요소노드의 인라인스타일을 취득 , 추가 , 변경한다.
[ 예제-1 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div style="color: red">안녕?</div>
<script>
const $div = document.querySelector("div");
console.log($div.style);
$div.style.backgroundColor = "black";
</script>
</body>
</html>style 프로퍼티에 의해 인라인 스타일을 조작 할 수 있다.
Class 조작
- CSS class를 미리 정의 한 후 class 어트리뷰트 값을 변경하여 style을 변경할 수도 있다.
- class 어트리뷰트에 대응하는 DOM 프로퍼티는 className , classList 이다.
- DOM프로퍼티의 이름을 class를 사용하지 않는 이유는 예약어이기 때문이다.
Element.prototype.className
- class 어트리뷰트 값을 반환, 변경할 수 있다.
- className 프로퍼티는 문자열을 반환하므로 공백으로 구분된 여러개의 클래스를 반환하는 경우 다루기 불편하다.
Element.prototype.classList
- class 정보를 담은 DOMTokenList 객체를 반환한다.
- DOMTokenList 객체는 유사 배열 객체이면서 이터러블
[ DOMTokenList 객체의 메서드 ]
| add(className) | 인수로 전달된 문자열을 class 속성값에 추가 |
| remove(className) | 인수로 전달된 문자열과 일치한 class 속성값 삭제 |
| item(index) | 인수로 전달된 index에 해당되는 클래스를 class 속성에서 반환 ex) 첫번째 클래스면 index = 0 , 두번째 클래스면 index =1 ... |
| contain(className) | 인수로 전달된 문자열과 일치하는 class가 포함되어있는지 확인 |
| replace(oldClassName,newClassName) | 첫번째 인수를 두번째 인수로 변경 |
| toggle (className[,force]) | 인수로 전달된 문자열과 일치하는 클래스가 존재하면 제거 , 존재하지 않으면 추가 |
요소에 적용되어있는 CSS 스타일 참조
- style 프로퍼티는 인라인 스타일만 반환하기때문에 클래스로 적용한 스타일이나 , 상속에 의한 스타일은 참조할 수 없다
- HTML 요소에 적용된 모든 CSS 스타일을 참조해야할 경우 아래 메서드를 사용한다.
window.getComputeStyle(element,[,pseudo])
element : 요소노드에 적용되어 있는 모든 스타일
pseudo : :afeter :before와 같은 의사요소를 지정하는 문자열 전달 (생략가능)
이렇게 해서 DOM 포스팅을 마치겠다.
https://mandelina-code.tistory.com/58
[JS] DOM (1) - DOM이란?
DOM이란? - HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API (프로퍼티,메소드)를 제공하는 트리자료구조이다. - 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 "노드 (nod
mandelina-code.tistory.com
https://mandelina-code.tistory.com/59
[JS] DOM (2) - 노드 탐색 , 및 Text 조작
노드탐색 - 요소노드를 얻고, DOM트리의 노드를 옮겨다니며 탐색할 경우가 있다. - 노드탐색 프로퍼티는 모두 자체적으로 값을 갖진 않고 다른 데이터 프로퍼티 값을 읽거나 저장할 때 호출되는
mandelina-code.tistory.com
https://mandelina-code.tistory.com/62
[JS] DOM (3) - DOM 조작
DOM 조작 - DOM조작이란 새로운 노드를 생성하여 DOM에 추가하거나, 기존 노드를 삭제 또는 교체하는것을 말한다. - 성능에 영향을 주므로 최적화를 위해 주의하여 다뤄야한다. innerHTML - 요소
mandelina-code.tistory.com
https://mandelina-code.tistory.com/66
DOM(4) - attribute 조작 및 style조작
Attribute? - HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공한다. - 글로벌 어트리뷰트 :id , class ,style ,title ,lang ,hidden 등 - HTML 문서가 파싱될때 , 어트리뷰트 하나당 하나의 노드가 생성..
mandelina-code.tistory.com
'FE > JavaScript' 카테고리의 다른 글
| [JS] async / await (0) | 2022.05.23 |
|---|---|
| [JS] Promise (feat. 동기,비동기가 뭘까?) (0) | 2022.05.23 |
| [JS] 이벤트 위임 (0) | 2022.05.22 |
| [JS] DOM (3) - DOM 조작 (0) | 2022.05.18 |
| [JS] DOM (2) - 노드 탐색 , 및 Text 조작 (0) | 2022.05.18 |