Written by nodejs-style
on 2021-09-22

Javascript_05: 속성 다루기 .getAttribute() .setAttribute...

DOM은 웹페이지에 나타난 html 문서 전체를 객체로 표현한다 (복습)

HTML 문서가 만들어지면 객체들의 정보가 DOM객체에 입력된다 (태그→요소노드,텍스트노드)

HTML 태그 속성(property)들은 대부분 DOM객체의 요소노드의 속성이 되지만

HTML 표준이 아닌(ex: href) 속성은 요소노드의 속성이 되지 않는다

//link 라는 href링크를 가진 id가 존재한다 console.log(link); //출력된다 console.log(link.href); //undefined가 출력된다

HTML표준이 아닌 속성의 접근 / 추가 / 삭제 하는 메소드명에 Attribute가 공통적으로 들어간다

속성 접근하기

element .getAttribute( '속성' ) ; //속성에 접근한다(HTML표준X 포함)

.getAttribute = get 가져온다 Attribute 속성

console.log(link.getAttribute('href'));

속성 추가(수정)하기

element .setAttribute( '속성' , '값' ) ; //속성을 추가한다(HTML표준X 포함)

.setAttribute = set 설정한다 Attribute 속성

link.setAttribute('href','http://www.tistory.com/'); //HTML에서 로 바뀜

속성 제거하기

element .removeAttribute( '속성' ) ; //속성을 제거한다(HTML표준X 포함)

link.removeAttribute('href'); //로 href속성이 사라진다

*속성이름은 소문자이다. '속성'에 대문자를 적어도 소문자로 자동변환된다

요소노드 다루기

요소노드 생성과 추가 = document.createElement(' 태그 '); document.createElement(''); //꺽쇠 X new.textContent = ' 내용 '; prepend() / append()

before() / after() element.append(new); 요소노드 삭제 element.remove(); *delete가 아니다 element.children[index].remove(); 요소노드 이동 element.append( 이동할 요소 ) *children을 활용한다

요소노드 속성 다루기

요소노드 속성 접근하기 element.getAttribute('속성'); 요소노드 속성 추가(수정) element.setAttribute('속성', '값'); 요소노드 속성 제거 element.removeAttribute('속성');

from http://devyoseph.tistory.com/9 by ccl(A) rewrite - 2021-09-22 16:26:21

Top