3. 노드 조작하기
① 콘텐츠 조작하기: 요소 노드는 다음 속성으로 콘텐츠를 조작할 수 있습니다.
|
속성 |
설명 |
|
textContent |
노드 요소의 모든 텍스트에 접근합니다. |
|
innerText |
노드 요소의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근합니다. |
|
innerHTML |
노드 요소의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근합니다. |
② 스타일 조작하기: 요소 노드는 style 속성으로 스타일(CSS)을 지정할 수 있습니다.
형식
<노드>.style.<CSS 속성명> = <속성값>;
③ 클래스 조작하기: classList 속성의 add>(), remove() 메서드로 class 속성을 조작할 수 있습니다.
형식
<노드>.classList.add(class 속성값); <노드>.classList.remove(class 속성값);
④ 데이터 속성 조작하기: dataset 속성으로 HTML 문서에서 data-* 속성을 조작할 수 있습니다.
형식
<노드>.dataset;
⑤ 메서드로 속성 조작하기: 메서드로 모든 속성을 조작할 수 있습니다.
|
메서드 형식 |
설명 |
|
<노드>.getAttribute("속성명"); |
속성값을 가져옵니다. |
|
<노드>.setAttribute("속성명", "속성값"); |
속성값을 설정합니다. |
|
<노드>.remoteAttribute("속성명"); |
속성을 삭제합니다. |