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

DOM은 웹페이지에 나타난 html 문서 전체를 → 객체로 표현한다
HTML 문서가 만들어지면 객체들의 정보가 DOM객체에 입력된다(태그→요소노드,텍스트노드)
HTML 태그 속성(property)들은 대부분 DOM객체의 요소노드의 속성이 되지만
HTML 표준이 아닌(ex: href) 속성은 요소노드의 속성이 되지 않는다

//link 라는 href링크를 가진 id가 존재한다

console.log(link);
//출력된다

console.log(link.href);
//undefined가 출력된다.
//href는 HTML의 표준 속성이 아니기 때문이다

 

---

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

 

자바스크립트 → HTML 속성 접근하기

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

.getAttribute = get 가져온다 Attribute 속성

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

 

자바스크립트 → HTML 속성 추가(수정)하기

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

.setAttribute = set 설정한다 Attribute 속성

link.setAttribute('href','http://www.tistory.com/');
//HTML에서 <ol id="link" href="http://www.tistory.com/"> 로 바뀜

 

자바스크립트 → HTML 속성 제거하기

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

link.removeAttribute('href');
//<ol id="link">로 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('속성');