Yongtae Jeon

javascript. 함수 구현부에서 자기함수객체를 참조하는 방법

20140424

노드 생성

1. 엘레먼트 생성

var divE = document.createElement( "div" );

2. 텍스트노드 생성

var messageN = document.createTextNode( "hey!!" );

노드 복사

var divCE = divE.cloneNode( false );

노드의 삽입,이동

1. 마지막 자식으로 추가

document.body.appendChild( divE ); 

2. 특정 자식앞에 추가,이동

document.body.insertBefore( divCE, divE );

3. appendChild, insertBefore 이용시에 대상 엘레먼트가 이미 문서구조상에 존재할 경우, 기존 위치에서는 삭제되게 된다 ( 이동의 효과 )

노드의 삭제

document.body.removeChild( divCE );

노드의 교체

document.body.replaceChild( divCE, divE );

엘레먼트의 속성 생성,변경,참조

1. 엘레먼트의 속성 생성,변경

divE.setAttribute( "id", "firstDiv" );

2. 엘레먼트의 속성 참조

var divId = divE.getAttribute( "id" );

하위 엘레먼트 획득

1. 하위 엘레먼트중 특정 아이디를 가진 엘레먼트를 획득

var searchedDiv = document.getElementById( "firstDiv" );

2. 하위 엘레먼트중 특정 태그명을 가진 엘레먼트의 배열을 획득

var searchedDivArray = document.getElementsByTagName( "div" );

노드 프로퍼티

1. 노드.nodeType

노드타입 관련한 다음 정리글을 참고하자

https://developer.mozilla.org/ko/docs/Web/API/Node/nodeType

2. 노드.nodeName

3. 노드.nodeValue

var findedDivE = document.getElementById( "firstDiv" );
if( findedDivE != null && findedDivE.firstChild.nodeType == 3 ){ // 3은 TEXT_NODE임
    findedDIvE.firstChild.nodeValue = "이런식으로 주로 사용합니다";
}

4. 노드.hasChildNodes

5. 노드.childNodes

6. 노드.firstChild

7. 노드.lastChild

8. 노드.nextSibling

9. 노드.previousSibling

10. 노드.parentNode